@insforge/react 0.3.1 → 0.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +604 -604
- package/dist/atoms.d.mts +5 -5
- package/dist/atoms.d.ts +5 -5
- package/dist/atoms.js +4 -12
- package/dist/atoms.js.map +1 -1
- package/dist/atoms.mjs +4 -12
- package/dist/atoms.mjs.map +1 -1
- package/dist/components.js +75 -56
- package/dist/components.js.map +1 -1
- package/dist/components.mjs +75 -56
- package/dist/components.mjs.map +1 -1
- package/dist/forms.d.mts +4 -4
- package/dist/forms.d.ts +4 -4
- package/dist/forms.js +33 -21
- package/dist/forms.js.map +1 -1
- package/dist/forms.mjs +33 -21
- package/dist/forms.mjs.map +1 -1
- package/dist/hooks.d.mts +4 -4
- package/dist/hooks.d.ts +4 -4
- package/dist/hooks.js +4 -4
- package/dist/hooks.js.map +1 -1
- package/dist/hooks.mjs +4 -4
- package/dist/hooks.mjs.map +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +78 -59
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +78 -59
- package/dist/index.mjs.map +1 -1
- package/dist/lib.js.map +1 -1
- package/dist/lib.mjs.map +1 -1
- package/dist/router.js.map +1 -1
- package/dist/router.mjs.map +1 -1
- package/dist/types.d.mts +7 -4
- package/dist/types.d.ts +7 -4
- package/package.json +98 -98
- package/src/styles.css +15 -15
package/dist/index.js
CHANGED
|
@@ -254,9 +254,9 @@ function InsforgeProvider({
|
|
|
254
254
|
},
|
|
255
255
|
[user, onAuthChange, insforge]
|
|
256
256
|
);
|
|
257
|
-
const
|
|
257
|
+
const sendResetPasswordEmail = react.useCallback(
|
|
258
258
|
async (email) => {
|
|
259
|
-
const sdkResult = await insforge.auth.
|
|
259
|
+
const sdkResult = await insforge.auth.sendResetPasswordEmail({ email });
|
|
260
260
|
return sdkResult.data;
|
|
261
261
|
},
|
|
262
262
|
[insforge]
|
|
@@ -292,7 +292,7 @@ function InsforgeProvider({
|
|
|
292
292
|
updateUser,
|
|
293
293
|
reloadAuth: loadAuthState,
|
|
294
294
|
baseUrl,
|
|
295
|
-
|
|
295
|
+
sendResetPasswordEmail,
|
|
296
296
|
resetPassword,
|
|
297
297
|
verifyEmail,
|
|
298
298
|
getPublicAuthConfig
|
|
@@ -310,22 +310,22 @@ function useInsforge() {
|
|
|
310
310
|
}
|
|
311
311
|
function usePublicAuthConfig() {
|
|
312
312
|
const { getPublicAuthConfig } = useInsforge();
|
|
313
|
-
const [
|
|
313
|
+
const [authConfig, setAuthConfig] = react.useState(null);
|
|
314
314
|
const [isLoaded, setIsLoaded] = react.useState(false);
|
|
315
315
|
react.useEffect(() => {
|
|
316
316
|
async function fetchConfig() {
|
|
317
317
|
const result = await getPublicAuthConfig();
|
|
318
318
|
if (result) {
|
|
319
|
-
|
|
319
|
+
setAuthConfig(result);
|
|
320
320
|
} else {
|
|
321
321
|
console.error("[usePublicAuthConfig] Failed to get public auth config");
|
|
322
|
-
|
|
322
|
+
setAuthConfig(null);
|
|
323
323
|
}
|
|
324
324
|
setIsLoaded(true);
|
|
325
325
|
}
|
|
326
326
|
fetchConfig();
|
|
327
327
|
}, [getPublicAuthConfig]);
|
|
328
|
-
return {
|
|
328
|
+
return { authConfig, isLoaded };
|
|
329
329
|
}
|
|
330
330
|
function AuthBranding() {
|
|
331
331
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-[#FAFAFA] px-2 py-4 flex flex-row justify-center items-center gap-1", children: [
|
|
@@ -562,7 +562,7 @@ function AuthPasswordField({
|
|
|
562
562
|
label,
|
|
563
563
|
id,
|
|
564
564
|
showStrengthIndicator = false,
|
|
565
|
-
|
|
565
|
+
authConfig,
|
|
566
566
|
forgotPasswordLink,
|
|
567
567
|
value,
|
|
568
568
|
appearance = {},
|
|
@@ -640,7 +640,7 @@ function AuthPasswordField({
|
|
|
640
640
|
AuthPasswordStrengthIndicator,
|
|
641
641
|
{
|
|
642
642
|
password: String(value || ""),
|
|
643
|
-
config:
|
|
643
|
+
config: authConfig
|
|
644
644
|
}
|
|
645
645
|
)
|
|
646
646
|
]
|
|
@@ -1077,11 +1077,7 @@ function AuthEmailVerificationStep({
|
|
|
1077
1077
|
react.useEffect(() => {
|
|
1078
1078
|
const sendInitialEmail = async () => {
|
|
1079
1079
|
try {
|
|
1080
|
-
|
|
1081
|
-
await insforge.auth.sendVerificationCode({ email });
|
|
1082
|
-
} else {
|
|
1083
|
-
await insforge.auth.sendVerificationLink({ email });
|
|
1084
|
-
}
|
|
1080
|
+
await insforge.auth.sendVerificationEmail({ email });
|
|
1085
1081
|
} catch {
|
|
1086
1082
|
}
|
|
1087
1083
|
};
|
|
@@ -1107,11 +1103,7 @@ function AuthEmailVerificationStep({
|
|
|
1107
1103
|
setIsSending(true);
|
|
1108
1104
|
setVerificationError("");
|
|
1109
1105
|
try {
|
|
1110
|
-
|
|
1111
|
-
await insforge.auth.sendVerificationCode({ email });
|
|
1112
|
-
} else {
|
|
1113
|
-
await insforge.auth.sendVerificationLink({ email });
|
|
1114
|
-
}
|
|
1106
|
+
await insforge.auth.sendVerificationEmail({ email });
|
|
1115
1107
|
} catch {
|
|
1116
1108
|
setResendDisabled(false);
|
|
1117
1109
|
setResendCountdown(0);
|
|
@@ -1189,7 +1181,7 @@ function SignInForm({
|
|
|
1189
1181
|
oauthLoading = null,
|
|
1190
1182
|
availableProviders = [],
|
|
1191
1183
|
onOAuthClick,
|
|
1192
|
-
|
|
1184
|
+
authConfig,
|
|
1193
1185
|
appearance = {},
|
|
1194
1186
|
title = "Welcome Back",
|
|
1195
1187
|
subtitle = "Login to your account",
|
|
@@ -1279,7 +1271,7 @@ function SignInForm({
|
|
|
1279
1271
|
onChange: (e) => onPasswordChange(e.target.value),
|
|
1280
1272
|
required: true,
|
|
1281
1273
|
autoComplete: "current-password",
|
|
1282
|
-
|
|
1274
|
+
authConfig,
|
|
1283
1275
|
forgotPasswordLink: forgotPasswordUrl ? {
|
|
1284
1276
|
href: forgotPasswordUrl,
|
|
1285
1277
|
text: forgotPasswordText
|
|
@@ -1350,7 +1342,7 @@ function SignIn({
|
|
|
1350
1342
|
...uiProps
|
|
1351
1343
|
}) {
|
|
1352
1344
|
const { signIn, baseUrl } = useInsforge();
|
|
1353
|
-
const {
|
|
1345
|
+
const { authConfig } = usePublicAuthConfig();
|
|
1354
1346
|
const [email, setEmail] = react.useState("");
|
|
1355
1347
|
const [password, setPassword] = react.useState("");
|
|
1356
1348
|
const [error, setError] = react.useState("");
|
|
@@ -1416,7 +1408,7 @@ function SignIn({
|
|
|
1416
1408
|
setOauthLoading(null);
|
|
1417
1409
|
}
|
|
1418
1410
|
}
|
|
1419
|
-
if (!
|
|
1411
|
+
if (!authConfig) {
|
|
1420
1412
|
return null;
|
|
1421
1413
|
}
|
|
1422
1414
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1430,9 +1422,9 @@ function SignIn({
|
|
|
1430
1422
|
error,
|
|
1431
1423
|
loading,
|
|
1432
1424
|
oauthLoading,
|
|
1433
|
-
availableProviders:
|
|
1425
|
+
availableProviders: authConfig?.oAuthProviders || [],
|
|
1434
1426
|
onOAuthClick: handleOAuth,
|
|
1435
|
-
|
|
1427
|
+
authConfig,
|
|
1436
1428
|
showVerificationStep: step === "awaiting-verification",
|
|
1437
1429
|
onVerifyCode: handleVerifyCode,
|
|
1438
1430
|
...uiProps
|
|
@@ -1450,7 +1442,7 @@ function SignUpForm({
|
|
|
1450
1442
|
oauthLoading = null,
|
|
1451
1443
|
availableProviders = [],
|
|
1452
1444
|
onOAuthClick,
|
|
1453
|
-
|
|
1445
|
+
authConfig,
|
|
1454
1446
|
appearance = {},
|
|
1455
1447
|
title = "Get Started",
|
|
1456
1448
|
subtitle = "Create your account",
|
|
@@ -1537,10 +1529,10 @@ function SignUpForm({
|
|
|
1537
1529
|
value: password,
|
|
1538
1530
|
onChange: (e) => onPasswordChange(e.target.value),
|
|
1539
1531
|
required: true,
|
|
1540
|
-
minLength:
|
|
1532
|
+
minLength: authConfig.passwordMinLength,
|
|
1541
1533
|
autoComplete: "new-password",
|
|
1542
1534
|
showStrengthIndicator: true,
|
|
1543
|
-
|
|
1535
|
+
authConfig,
|
|
1544
1536
|
appearance: {
|
|
1545
1537
|
containerClassName: appearance.form?.passwordField?.container,
|
|
1546
1538
|
labelClassName: appearance.form?.passwordField?.label,
|
|
@@ -1678,7 +1670,7 @@ function SignUp({
|
|
|
1678
1670
|
...uiProps
|
|
1679
1671
|
}) {
|
|
1680
1672
|
const { signUp, baseUrl } = useInsforge();
|
|
1681
|
-
const {
|
|
1673
|
+
const { authConfig } = usePublicAuthConfig();
|
|
1682
1674
|
const [email, setEmail] = react.useState("");
|
|
1683
1675
|
const [password, setPassword] = react.useState("");
|
|
1684
1676
|
const [error, setError] = react.useState("");
|
|
@@ -1692,7 +1684,7 @@ function SignUp({
|
|
|
1692
1684
|
e.preventDefault();
|
|
1693
1685
|
setLoading(true);
|
|
1694
1686
|
setError("");
|
|
1695
|
-
if (!
|
|
1687
|
+
if (!authConfig) {
|
|
1696
1688
|
setError("Configuration not loaded. Please refresh the page.");
|
|
1697
1689
|
setLoading(false);
|
|
1698
1690
|
return;
|
|
@@ -1705,11 +1697,11 @@ function SignUp({
|
|
|
1705
1697
|
return;
|
|
1706
1698
|
}
|
|
1707
1699
|
const passwordZodSchema = createPasswordSchema({
|
|
1708
|
-
minLength:
|
|
1709
|
-
requireUppercase:
|
|
1710
|
-
requireLowercase:
|
|
1711
|
-
requireNumber:
|
|
1712
|
-
requireSpecialChar:
|
|
1700
|
+
minLength: authConfig.passwordMinLength,
|
|
1701
|
+
requireUppercase: authConfig.requireUppercase,
|
|
1702
|
+
requireLowercase: authConfig.requireLowercase,
|
|
1703
|
+
requireNumber: authConfig.requireNumber,
|
|
1704
|
+
requireSpecialChar: authConfig.requireSpecialChar
|
|
1713
1705
|
});
|
|
1714
1706
|
const passwordValidation = passwordZodSchema.safeParse(password);
|
|
1715
1707
|
if (!passwordValidation.success) {
|
|
@@ -1771,7 +1763,7 @@ function SignUp({
|
|
|
1771
1763
|
setOauthLoading(null);
|
|
1772
1764
|
}
|
|
1773
1765
|
}
|
|
1774
|
-
if (!
|
|
1766
|
+
if (!authConfig) {
|
|
1775
1767
|
return null;
|
|
1776
1768
|
}
|
|
1777
1769
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1785,9 +1777,9 @@ function SignUp({
|
|
|
1785
1777
|
error,
|
|
1786
1778
|
loading,
|
|
1787
1779
|
oauthLoading,
|
|
1788
|
-
availableProviders:
|
|
1780
|
+
availableProviders: authConfig?.oAuthProviders || [],
|
|
1789
1781
|
onOAuthClick: handleOAuth,
|
|
1790
|
-
|
|
1782
|
+
authConfig,
|
|
1791
1783
|
showVerificationStep: step === "awaiting-verification",
|
|
1792
1784
|
onVerifyCode: handleVerifyCode,
|
|
1793
1785
|
...uiProps
|
|
@@ -1918,7 +1910,8 @@ function ResetPasswordForm({
|
|
|
1918
1910
|
onSubmit,
|
|
1919
1911
|
error,
|
|
1920
1912
|
loading = false,
|
|
1921
|
-
|
|
1913
|
+
success = false,
|
|
1914
|
+
authConfig,
|
|
1922
1915
|
appearance = {},
|
|
1923
1916
|
title = "Reset Password",
|
|
1924
1917
|
subtitle = "Enter your new password below.",
|
|
@@ -1929,8 +1922,27 @@ function ResetPasswordForm({
|
|
|
1929
1922
|
submitButtonText = "Reset Password",
|
|
1930
1923
|
loadingButtonText = "Resetting...",
|
|
1931
1924
|
backToSignInText = "",
|
|
1932
|
-
backToSignInUrl = "/sign-in"
|
|
1925
|
+
backToSignInUrl = "/sign-in",
|
|
1926
|
+
successTitle = "Password Reset Successful!",
|
|
1927
|
+
successMessage = "Your password has been successfully reset. You can now sign in with your new password."
|
|
1933
1928
|
}) {
|
|
1929
|
+
if (success) {
|
|
1930
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1931
|
+
AuthContainer,
|
|
1932
|
+
{
|
|
1933
|
+
appearance: {
|
|
1934
|
+
containerClassName: appearance.container,
|
|
1935
|
+
cardClassName: appearance.card
|
|
1936
|
+
},
|
|
1937
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
|
|
1938
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-green-600 dark:text-green-400", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 13l4 4L19 7" }) }) }),
|
|
1939
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
|
|
1940
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: successMessage }),
|
|
1941
|
+
/* @__PURE__ */ jsxRuntime.jsx("a", { href: backToSignInUrl, className: "mt-4 text-black dark:text-white font-medium", children: "Back to Sign In" })
|
|
1942
|
+
] })
|
|
1943
|
+
}
|
|
1944
|
+
);
|
|
1945
|
+
}
|
|
1934
1946
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1935
1947
|
AuthContainer,
|
|
1936
1948
|
{
|
|
@@ -1976,7 +1988,7 @@ function ResetPasswordForm({
|
|
|
1976
1988
|
required: true,
|
|
1977
1989
|
autoComplete: "new-password",
|
|
1978
1990
|
showStrengthIndicator: true,
|
|
1979
|
-
|
|
1991
|
+
authConfig,
|
|
1980
1992
|
appearance: {
|
|
1981
1993
|
containerClassName: appearance.form?.newPasswordField?.container,
|
|
1982
1994
|
labelClassName: appearance.form?.newPasswordField?.label,
|
|
@@ -1994,7 +2006,7 @@ function ResetPasswordForm({
|
|
|
1994
2006
|
onChange: (e) => onConfirmPasswordChange(e.target.value),
|
|
1995
2007
|
required: true,
|
|
1996
2008
|
autoComplete: "new-password",
|
|
1997
|
-
|
|
2009
|
+
authConfig,
|
|
1998
2010
|
appearance: {
|
|
1999
2011
|
containerClassName: appearance.form?.confirmPasswordField?.container,
|
|
2000
2012
|
labelClassName: appearance.form?.confirmPasswordField?.label,
|
|
@@ -2038,16 +2050,17 @@ function ResetPassword({
|
|
|
2038
2050
|
...uiProps
|
|
2039
2051
|
}) {
|
|
2040
2052
|
const { resetPassword } = useInsforge();
|
|
2041
|
-
const {
|
|
2053
|
+
const { authConfig } = usePublicAuthConfig();
|
|
2042
2054
|
const [newPassword, setNewPassword] = react.useState("");
|
|
2043
2055
|
const [confirmPassword, setConfirmPassword] = react.useState("");
|
|
2044
2056
|
const [error, setError] = react.useState("");
|
|
2045
2057
|
const [loading, setLoading] = react.useState(false);
|
|
2058
|
+
const [success, setSuccess] = react.useState(false);
|
|
2046
2059
|
async function handleSubmit(e) {
|
|
2047
2060
|
e.preventDefault();
|
|
2048
2061
|
setLoading(true);
|
|
2049
2062
|
setError("");
|
|
2050
|
-
if (!
|
|
2063
|
+
if (!authConfig) {
|
|
2051
2064
|
setError("Configuration not loaded. Please refresh the page.");
|
|
2052
2065
|
setLoading(false);
|
|
2053
2066
|
return;
|
|
@@ -2063,11 +2076,11 @@ function ResetPassword({
|
|
|
2063
2076
|
return;
|
|
2064
2077
|
}
|
|
2065
2078
|
const passwordZodSchema = createPasswordSchema({
|
|
2066
|
-
minLength:
|
|
2067
|
-
requireUppercase:
|
|
2068
|
-
requireLowercase:
|
|
2069
|
-
requireNumber:
|
|
2070
|
-
requireSpecialChar:
|
|
2079
|
+
minLength: authConfig.passwordMinLength,
|
|
2080
|
+
requireUppercase: authConfig.requireUppercase,
|
|
2081
|
+
requireLowercase: authConfig.requireLowercase,
|
|
2082
|
+
requireNumber: authConfig.requireNumber,
|
|
2083
|
+
requireSpecialChar: authConfig.requireSpecialChar
|
|
2071
2084
|
});
|
|
2072
2085
|
const passwordValidation = passwordZodSchema.safeParse(newPassword);
|
|
2073
2086
|
if (!passwordValidation.success) {
|
|
@@ -2079,6 +2092,7 @@ function ResetPassword({
|
|
|
2079
2092
|
try {
|
|
2080
2093
|
const result = await resetPassword(token, newPassword);
|
|
2081
2094
|
if (result?.message) {
|
|
2095
|
+
setSuccess(true);
|
|
2082
2096
|
if (onSuccess) {
|
|
2083
2097
|
onSuccess(result.redirectTo);
|
|
2084
2098
|
}
|
|
@@ -2099,7 +2113,7 @@ function ResetPassword({
|
|
|
2099
2113
|
setLoading(false);
|
|
2100
2114
|
}
|
|
2101
2115
|
}
|
|
2102
|
-
if (!
|
|
2116
|
+
if (!authConfig) {
|
|
2103
2117
|
return null;
|
|
2104
2118
|
}
|
|
2105
2119
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -2112,7 +2126,8 @@ function ResetPassword({
|
|
|
2112
2126
|
onSubmit: handleSubmit,
|
|
2113
2127
|
error,
|
|
2114
2128
|
loading,
|
|
2115
|
-
|
|
2129
|
+
success,
|
|
2130
|
+
authConfig,
|
|
2116
2131
|
backToSignInUrl,
|
|
2117
2132
|
...uiProps
|
|
2118
2133
|
}
|
|
@@ -2124,8 +2139,8 @@ function ForgotPassword({
|
|
|
2124
2139
|
onError,
|
|
2125
2140
|
...uiProps
|
|
2126
2141
|
}) {
|
|
2127
|
-
const {
|
|
2128
|
-
const {
|
|
2142
|
+
const { sendResetPasswordEmail, baseUrl } = useInsforge();
|
|
2143
|
+
const { authConfig } = usePublicAuthConfig();
|
|
2129
2144
|
const [insforge] = react.useState(() => sdk.createClient({ baseUrl }));
|
|
2130
2145
|
const [step, setStep] = react.useState("email");
|
|
2131
2146
|
const [email, setEmail] = react.useState("");
|
|
@@ -2164,9 +2179,9 @@ function ForgotPassword({
|
|
|
2164
2179
|
return;
|
|
2165
2180
|
}
|
|
2166
2181
|
try {
|
|
2167
|
-
const result = await
|
|
2182
|
+
const result = await sendResetPasswordEmail(emailValidation.data);
|
|
2168
2183
|
if (result?.success) {
|
|
2169
|
-
if (
|
|
2184
|
+
if (authConfig?.resetPasswordMethod === "link") {
|
|
2170
2185
|
setSuccess(true);
|
|
2171
2186
|
if (onSuccess) {
|
|
2172
2187
|
onSuccess();
|
|
@@ -2219,7 +2234,7 @@ function ForgotPassword({
|
|
|
2219
2234
|
setIsSendingCode(true);
|
|
2220
2235
|
setError("");
|
|
2221
2236
|
try {
|
|
2222
|
-
await
|
|
2237
|
+
await sendResetPasswordEmail(email);
|
|
2223
2238
|
} catch (err) {
|
|
2224
2239
|
setError(err.message || "Failed to resend code");
|
|
2225
2240
|
setResendDisabled(false);
|
|
@@ -2227,13 +2242,17 @@ function ForgotPassword({
|
|
|
2227
2242
|
} finally {
|
|
2228
2243
|
setIsSendingCode(false);
|
|
2229
2244
|
}
|
|
2230
|
-
}, [email,
|
|
2231
|
-
function handlePasswordResetSuccess() {
|
|
2245
|
+
}, [email, sendResetPasswordEmail]);
|
|
2246
|
+
function handlePasswordResetSuccess(redirectTo) {
|
|
2247
|
+
const targetUrl = redirectTo || backToSignInUrl;
|
|
2232
2248
|
if (onSuccess) {
|
|
2233
2249
|
onSuccess();
|
|
2234
2250
|
}
|
|
2251
|
+
setTimeout(() => {
|
|
2252
|
+
window.location.href = targetUrl;
|
|
2253
|
+
}, 1500);
|
|
2235
2254
|
}
|
|
2236
|
-
if (!
|
|
2255
|
+
if (!authConfig) {
|
|
2237
2256
|
return null;
|
|
2238
2257
|
}
|
|
2239
2258
|
if (step === "email") {
|