@insforge/react 0.4.6 → 0.4.8

package/dist/components.cjs

@@ -199,6 +199,28 @@ function createRequirements(config) {
   }
   return requirements;
 }
+
+// src/lib/path-utils.ts
+function resolveAuthPath(targetPath) {
+  if (typeof window === "undefined") {
+    return targetPath;
+  }
+  const currentPath = window.location.pathname;
+  if (currentPath.startsWith("/auth/")) {
+    if (targetPath.startsWith("/auth/")) {
+      return targetPath;
+    }
+    return `/auth${targetPath}`;
+  }
+  return targetPath;
+}
+function resolveAuthUrl(targetPath, searchParams) {
+  const resolvedPath = resolveAuthPath(targetPath);
+  if (!searchParams || searchParams.toString() === "") {
+    return resolvedPath;
+  }
+  return `${resolvedPath}?${searchParams.toString()}`;
+}
 function AuthPasswordField({
   label,
   id,
@@ -211,6 +233,10 @@ function AuthPasswordField({
 }) {
   const [showPassword, setShowPassword] = react.useState(false);
   const [showStrength, setShowStrength] = react.useState(false);
+  const resolvedForgotPasswordHref = react.useMemo(
+    () => forgotPasswordLink ? resolveAuthPath(forgotPasswordLink.href) : void 0,
+    [forgotPasswordLink]
+  );
   const handleFocus = (e) => {
     if (showStrengthIndicator) {
       setShowStrength(true);
@@ -220,7 +246,7 @@ function AuthPasswordField({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-passwordField if-internal-p5w9m7", children: [
     (label || forgotPasswordLink) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-passwordField-labelRow", children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "if-passwordField-label", children: label }),
-      forgotPasswordLink && /* @__PURE__ */ jsxRuntime.jsx("a", { href: forgotPasswordLink.href, className: "if-passwordField-forgotLink", children: forgotPasswordLink.text || "Forget Password?" })
+      forgotPasswordLink && resolvedForgotPasswordHref && /* @__PURE__ */ jsxRuntime.jsx("a", { href: resolvedForgotPasswordHref, className: "if-passwordField-forgotLink", children: forgotPasswordLink.text || "Forget Password?" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-passwordField-inputWrapper", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -273,19 +299,7 @@ function AuthSubmitButton({
 }
 function AuthLink({ text, linkText, href }) {
   const [searchParams] = reactRouterDom.useSearchParams();
-  const currentSearch = searchParams.toString();
-  const finalHref = (() => {
-    if (!currentSearch) {
-      return href;
-    }
-    try {
-      const url = new URL(href, window.location.origin);
-      url.search = currentSearch;
-      return url.pathname + url.search;
-    } catch {
-      return href;
-    }
-  })();
+  const finalHref = resolveAuthUrl(href, searchParams);
   return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "if-authLink if-internal-al5w9p", children: [
     text && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-authLink-text", children: text }),
     text && " ",
@@ -559,7 +573,6 @@ function AuthOAuthProviders({
 function AuthVerificationCodeInput({
   length = 6,
   value,
-  email,
   onChange,
   disabled = false,
   onComplete
@@ -607,33 +620,25 @@ function AuthVerificationCodeInput({
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationCode if-internal-vc8m4p", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "if-verificationCode-description", children: [
-      "We've sent a verification code to your inbox at",
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-verificationCode-email", children: email }),
-      ". Enter it below to proceed."
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-verificationCode-inputContainer", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        ref: (el) => {
-          inputRefs.current[index] = el;
-        },
-        type: "text",
-        inputMode: "numeric",
-        maxLength: 1,
-        value: value[index] || "",
-        onChange: (e) => handleChange(index, e.target.value),
-        onKeyDown: (e) => handleKeyDown(index, e),
-        onPaste: handlePaste,
-        disabled,
-        className: "if-verificationCode-input",
-        autoComplete: "one-time-code"
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-verificationCode-inputContainer", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref: (el) => {
+        inputRefs.current[index] = el;
       },
-      index
-    )) })
-  ] });
+      type: "text",
+      inputMode: "numeric",
+      maxLength: 1,
+      value: value[index] || "",
+      onChange: (e) => handleChange(index, e.target.value),
+      onKeyDown: (e) => handleKeyDown(index, e),
+      onPaste: handlePaste,
+      disabled,
+      className: "if-verificationCode-input",
+      autoComplete: "one-time-code"
+    },
+    index
+  )) });
 }
 function AuthEmailVerificationStep({
   email,
@@ -646,7 +651,8 @@ function AuthEmailVerificationStep({
   const [isSending, setIsSending] = react.useState(false);
   const [verificationCode, setVerificationCode] = react.useState("");
   const [isVerifying, setIsVerifying] = react.useState(false);
-  const defaultDescription = method === "code" ? "We've sent a 6-digit verification code to {email}. Please enter it below to verify your account. The code will expire in 10 minutes." : "We've sent a verification link to {email}. Please check your email and click the link to verify your account. The link will expire in 10 minutes.";
+  const isLinkMethod = method === "link";
+  const displayDescription = isLinkMethod ? "We have sent an email to {email}. Please check your email to confirm your account before signing in. The confirmation link expires in 10 minutes." : "We've sent a verification code to your inbox at {email}. Enter it below to proceed.";
   react.useEffect(() => {
     const sendInitialEmail = async () => {
       try {
@@ -696,23 +702,29 @@ function AuthEmailVerificationStep({
       setVerificationCode("");
     }
   };
-  const displayDescription = defaultDescription;
-  const isLinkMethod = method === "link";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      part,
-      index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-verificationCode-email", children: email })
-    ] }, index)) }),
+    isLinkMethod && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-descriptionContainer", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-descriptionTitle", children: "Verify Your Email" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        part,
+        index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-verificationLink-email", children: email })
+      ] }, index)) })
+    ] }),
     !isLinkMethod && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-codeContainer", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-verificationStep-codeInputWrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
-        AuthVerificationCodeInput,
-        {
-          value: verificationCode,
-          onChange: setVerificationCode,
-          email,
-          disabled: isVerifying
-        }
-      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-codeInputWrapper", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-codeDescription", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          part,
+          index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-verificationCode-email", children: email })
+        ] }, index)) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AuthVerificationCodeInput,
+          {
+            value: verificationCode,
+            onChange: setVerificationCode,
+            disabled: isVerifying
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         AuthSubmitButton,
         {
@@ -722,7 +734,7 @@ function AuthEmailVerificationStep({
           onClick: () => {
             void handleSubmit();
           },
-          children: isVerifying ? "Verifying..." : "Verify Code"
+          children: isVerifying ? "Verifying..." : "Continue"
         }
       )
     ] }),
@@ -754,6 +766,8 @@ function AuthResetPasswordVerificationStep({
   const [isSending, setIsSending] = react.useState(false);
   const [verificationCode, setVerificationCode] = react.useState("");
   const [isVerifying, setIsVerifying] = react.useState(false);
+  const isLinkMethod = method === "link";
+  const displayDescription = isLinkMethod ? "We have sent an email to {email}. Please check your email to reset your password. The link expires in 10 minutes." : "We've sent a reset password code to your inbox at {email}. Enter it below to proceed.";
   react.useEffect(() => {
     if (resendCountdown > 0) {
       const timer = setInterval(() => {
@@ -793,17 +807,20 @@ function AuthResetPasswordVerificationStep({
       setVerificationCode("");
     }
   };
-  const isLinkMethod = method === "link";
-  const description = isLinkMethod ? `We've sent a password reset link to ${email}. Please check your email and click the link to reset your password. The link will expire in 10 minutes.` : `We've sent a 6-digit verification code to ${email}. Please enter it below to reset your password. The code will expire in 10 minutes.`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-description", children: description }),
+    isLinkMethod && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-descriptionContainer", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-descriptionTitle", children: "Check Your Email" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        part,
+        index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-verificationLink-email", children: email })
+      ] }, index)) })
+    ] }),
     !isLinkMethod && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-codeContainer", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-verificationStep-codeInputWrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
         AuthVerificationCodeInput,
         {
           value: verificationCode,
           onChange: setVerificationCode,
-          email,
           disabled: isVerifying
         }
       ) }),
@@ -856,7 +873,7 @@ function SignInForm({
   passwordLabel = "Password",
   passwordPlaceholder = "\u2022\u2022\u2022\u2022\u2022\u2022",
   forgotPasswordText = "Forget Password?",
-  forgotPasswordUrl,
+  forgotPasswordUrl = "/forgot-password",
   submitButtonText = "Sign In",
   loadingButtonText = "Signing in...",
   signUpText = "Don't have an account?",
@@ -867,13 +884,7 @@ function SignInForm({
   onVerifyCode
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(AuthContainer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      AuthHeader,
-      {
-        title: showVerificationStep ? "Verify Your Email" : title,
-        subtitle: showVerificationStep ? "" : subtitle
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsx(AuthHeader, { title, subtitle }),
     /* @__PURE__ */ jsxRuntime.jsx(AuthErrorBanner, { error: error || "" }),
     showVerificationStep ? /* @__PURE__ */ jsxRuntime.jsx(AuthEmailVerificationStep, { email, onVerifyCode }) : /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -972,7 +983,7 @@ function SignIn({ onError, ...uiProps }) {
   async function handleVerifyCode(code) {
     setError("");
     try {
-      const result = await verifyEmail(email, code);
+      const result = await verifyEmail(code, email);
       if (result?.error) {
         throw new Error(result.error.message || "Verification failed");
       }
@@ -1043,13 +1054,7 @@ function SignUpForm({
   onVerifyCode
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(AuthContainer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      AuthHeader,
-      {
-        title: showVerificationStep ? "Verify Your Email" : title,
-        subtitle: showVerificationStep ? "" : subtitle
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsx(AuthHeader, { title, subtitle }),
     /* @__PURE__ */ jsxRuntime.jsx(AuthErrorBanner, { error: error || "" }),
     showVerificationStep ? /* @__PURE__ */ jsxRuntime.jsx(AuthEmailVerificationStep, { email, onVerifyCode }) : /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1199,7 +1204,7 @@ function SignUp({ onError, ...uiProps }) {
   async function handleVerifyCode(code) {
     setError("");
     try {
-      const result = await verifyEmail(email, code);
+      const result = await verifyEmail(code, email);
       if (result?.error) {
         throw new Error(result.error.message || "Verification failed");
       }
@@ -1249,10 +1254,10 @@ function ForgotPasswordForm({
   error,
   loading = false,
   title = "Forgot Password?",
-  subtitle = "Enter your email address and we'll send you a code to reset your password.",
+  subtitle = "Enter your email address and we'll send you a {method} to reset your password.",
   emailLabel = "Email",
   emailPlaceholder = "example@email.com",
-  submitButtonText = "Send Reset Code",
+  submitButtonText = "Reset Password",
   loadingButtonText = "Sending...",
   backToSignInText = "Remember your password?",
   backToSignInUrl = "/sign-in",
@@ -1261,14 +1266,9 @@ function ForgotPasswordForm({
   onVerifyCode,
   onResendEmail
 }) {
+  const displaySubtitle = subtitle.replace("{method}", resetPasswordMethod);
   return /* @__PURE__ */ jsxRuntime.jsxs(AuthContainer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      AuthHeader,
-      {
-        title: showVerificationStep ? resetPasswordMethod === "link" ? "Check Your Email" : "Enter Reset Code" : title,
-        subtitle: showVerificationStep ? "" : subtitle
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsx(AuthHeader, { title, subtitle: displaySubtitle }),
     /* @__PURE__ */ jsxRuntime.jsx(AuthErrorBanner, { error: error || "" }),
     showVerificationStep ? /* @__PURE__ */ jsxRuntime.jsx(
       AuthResetPasswordVerificationStep,
@@ -1495,12 +1495,9 @@ function ForgotPassword({ onError, ...uiProps }) {
       const result = await resetPassword(resetToken, newPassword);
       if (result?.message) {
         setSuccess(true);
-        const signInUrl = new URL("/sign-in", window.location.origin);
-        searchParams.forEach((value, key) => {
-          signInUrl.searchParams.set(key, value);
-        });
+        const signInUrl = resolveAuthUrl("/sign-in", searchParams);
         setTimeout(() => {
-          window.location.href = signInUrl.toString();
+          window.location.href = signInUrl;
         }, 2e3);
       } else {
         const errorMessage = "Failed to reset password";
@@ -1918,23 +1915,24 @@ function Protect({
   onRedirect
 }) {
   const { isSignedIn, isLoaded, user } = useInsforge();
+  const resolvedRedirectTo = react.useMemo(() => resolveAuthPath(redirectTo), [redirectTo]);
   react.useEffect(() => {
     if (isLoaded && !isSignedIn) {
       if (onRedirect) {
-        onRedirect(redirectTo);
+        onRedirect(resolvedRedirectTo);
       } else {
-        window.location.href = redirectTo;
+        window.location.href = resolvedRedirectTo;
       }
     } else if (isLoaded && isSignedIn && condition && user) {
       if (!condition(user)) {
         if (onRedirect) {
-          onRedirect(redirectTo);
+          onRedirect(resolvedRedirectTo);
         } else {
-          window.location.href = redirectTo;
+          window.location.href = resolvedRedirectTo;
         }
       }
     }
-  }, [isLoaded, isSignedIn, redirectTo, condition, user, onRedirect]);
+  }, [isLoaded, isSignedIn, resolvedRedirectTo, condition, user, onRedirect]);
   if (!isLoaded) {
     return fallback || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "insforge-loading", children: "Loading..." });
   }