@insforge/react 0.2.9 → 0.3.0

package/dist/components.mjs

@@ -1,9 +1,10 @@
-import { createContext, useState, useRef, useEffect, useContext } from 'react';
+import { createContext, useState, useRef, useEffect, useCallback, useContext } from 'react';
 import { createClient } from '@insforge/sdk';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { AlertTriangle, Check, EyeOff, Eye, Loader2, CircleCheck, LogOut } from 'lucide-react';
+import { z } from 'zod';
 
 var InsforgeContext = createContext(
   void 0
@@ -683,6 +684,7 @@ function AuthVerificationCodeInput({
   email,
   onChange,
   disabled = false,
+  onComplete,
   appearance = {}
 }) {
   const inputRefs = useRef([]);
@@ -696,6 +698,9 @@ function AuthVerificationCodeInput({
     if (digit && index < length - 1) {
       inputRefs.current[index + 1]?.focus();
     }
+    if (digit && index === length - 1 && updatedValue.length === length && onComplete) {
+      onComplete(updatedValue);
+    }
   };
   const handleKeyDown = (index, e) => {
     if (e.key === "Backspace") {
@@ -716,6 +721,9 @@ function AuthVerificationCodeInput({
     if (/^\d+$/.test(pastedData) && pastedData.length === length) {
       onChange(pastedData);
       inputRefs.current[length - 1]?.focus();
+      if (onComplete) {
+        onComplete(pastedData);
+      }
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: cn(
@@ -756,6 +764,126 @@ function AuthVerificationCodeInput({
     )) })
   ] });
 }
+function AuthEmailVerificationStep({
+  email,
+  title = "Verify Your Email",
+  description,
+  method = "code",
+  onVerifyCode
+}) {
+  const { baseUrl } = useInsforge();
+  const [insforge] = useState(() => createClient({ baseUrl }));
+  const [resendDisabled, setResendDisabled] = useState(true);
+  const [resendCountdown, setResendCountdown] = useState(60);
+  const [isSending, setIsSending] = useState(false);
+  const [verificationCode, setVerificationCode] = useState("");
+  const [isVerifying, setIsVerifying] = useState(false);
+  const [verificationError, setVerificationError] = useState("");
+  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.";
+  useEffect(() => {
+    const sendInitialEmail = async () => {
+      try {
+        if (method === "code") {
+          await insforge.auth.sendVerificationCode({ email });
+        } else {
+          await insforge.auth.sendVerificationLink({ email });
+        }
+      } catch {
+      }
+    };
+    void sendInitialEmail();
+  }, [email, method, insforge.auth]);
+  useEffect(() => {
+    if (resendCountdown > 0) {
+      const timer = setInterval(() => {
+        setResendCountdown((prev) => {
+          if (prev <= 1) {
+            setResendDisabled(false);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1e3);
+      return () => clearInterval(timer);
+    }
+  }, [resendCountdown]);
+  const handleResend = async () => {
+    setResendDisabled(true);
+    setResendCountdown(60);
+    setIsSending(true);
+    setVerificationError("");
+    try {
+      if (method === "code") {
+        await insforge.auth.sendVerificationCode({ email });
+      } else {
+        await insforge.auth.sendVerificationLink({ email });
+      }
+    } catch {
+      setResendDisabled(false);
+      setResendCountdown(0);
+    } finally {
+      setIsSending(false);
+    }
+  };
+  const handleVerifyCode = async (code) => {
+    if (!onVerifyCode) {
+      return;
+    }
+    setIsVerifying(true);
+    setVerificationError("");
+    try {
+      await onVerifyCode(code);
+    } catch (error) {
+      setVerificationError(
+        error instanceof Error ? error.message : "Invalid verification code. Please try again."
+      );
+      setVerificationCode("");
+    } finally {
+      setIsVerifying(false);
+    }
+  };
+  const displayDescription = description || defaultDescription;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-6 items-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-full bg-neutral-100 dark:bg-neutral-800 rounded-lg px-4 pt-4 pb-6 flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-black dark:text-white", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
+        part,
+        index < array.length - 1 && /* @__PURE__ */ jsx("span", { className: "font-medium text-black dark:text-white", children: email })
+      ] }, index)) }),
+      method === "code" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 mt-2", children: [
+        /* @__PURE__ */ jsx(
+          AuthVerificationCodeInput,
+          {
+            value: verificationCode,
+            onChange: setVerificationCode,
+            email,
+            disabled: isVerifying,
+            onComplete: (code) => {
+              void handleVerifyCode(code);
+            }
+          }
+        ),
+        verificationError && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600 dark:text-red-400 text-center", children: verificationError }),
+        isVerifying && /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "w-full text-sm text-center text-neutral-600 dark:text-neutral-400", children: [
+      "Didn't receive the email?",
+      " ",
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            void handleResend();
+          },
+          disabled: resendDisabled || isSending,
+          className: "text-black dark:text-white font-medium transition-colors disabled:cursor-not-allowed cursor-pointer hover:underline disabled:no-underline disabled:opacity-50",
+          children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
+        }
+      )
+    ] })
+  ] });
+}
 function SignInForm({
   email,
   password,
@@ -920,6 +1048,7 @@ function SignIn({
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
+  const [step, setStep] = useState("form");
   const [oauthLoading, setOauthLoading] = useState(
     null
   );
@@ -931,6 +1060,11 @@ function SignIn({
     try {
       const result = await signIn(email, password);
       if ("error" in result) {
+        if (result.statusCode === 403) {
+          setStep("awaiting-verification");
+          setLoading(false);
+          return;
+        }
         throw new Error(result.error);
       }
       const { user, accessToken } = result;
@@ -945,6 +1079,21 @@ function SignIn({
       setLoading(false);
     }
   }
+  async function handleVerifyCode(code) {
+    try {
+      const result = await insforge.auth.verifyEmail({ email, otp: code });
+      if (result.error) {
+        throw new Error(result.error.message || "Verification failed");
+      }
+      if (result.data?.accessToken) {
+        if (onSuccess && result.data.user) {
+          onSuccess(result.data.user, result.data.accessToken);
+        }
+      }
+    } catch (err) {
+      throw new Error(err.message || "Invalid verification code");
+    }
+  }
   async function handleOAuth(provider) {
     try {
       setOauthLoading(provider);
@@ -963,7 +1112,7 @@ function SignIn({
   if (!emailConfig) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
+  return step === "form" ? /* @__PURE__ */ jsx(
     SignInForm,
     {
       email,
@@ -979,6 +1128,12 @@ function SignIn({
       emailAuthConfig: emailConfig,
       ...uiProps
     }
+  ) : /* @__PURE__ */ jsx(
+    AuthEmailVerificationStep,
+    {
+      email,
+      onVerifyCode: handleVerifyCode
+    }
   );
 }
 function SignUpForm({
@@ -1129,6 +1284,34 @@ function SignUpForm({
     }
   );
 }
+var emailSchema = z.string().min(1, "Email is required").email("Invalid email address");
+function createPasswordSchema(options) {
+  const {
+    minLength = 6,
+    requireUppercase = false,
+    requireLowercase = false,
+    requireNumber = false,
+    requireSpecialChar = false
+  } = options || {};
+  let schema = z.string().min(minLength, `Password must be at least ${minLength} characters`);
+  if (requireUppercase) {
+    schema = schema.regex(/[A-Z]/, "Password must contain at least one uppercase letter");
+  }
+  if (requireLowercase) {
+    schema = schema.regex(/[a-z]/, "Password must contain at least one lowercase letter");
+  }
+  if (requireNumber) {
+    schema = schema.regex(/\d/, "Password must contain at least one number");
+  }
+  if (requireSpecialChar) {
+    schema = schema.regex(
+      /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/,
+      "Password must contain at least one special character"
+    );
+  }
+  return schema;
+}
+createPasswordSchema();
 function SignUp({
   afterSignUpUrl,
   onSuccess,
@@ -1141,6 +1324,7 @@ function SignUp({
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
+  const [step, setStep] = useState("form");
   const [oauthLoading, setOauthLoading] = useState(
     null
   );
@@ -1149,19 +1333,46 @@ function SignUp({
     e.preventDefault();
     setLoading(true);
     setError("");
-    if (emailConfig && !validatePasswordStrength(password, emailConfig)) {
-      setError("Password does not meet all requirements");
+    if (!emailConfig) {
+      setError("Configuration not loaded. Please refresh the page.");
+      setLoading(false);
+      return;
+    }
+    const emailValidation = emailSchema.safeParse(email);
+    if (!emailValidation.success) {
+      const firstError = emailValidation.error.issues[0];
+      setError(firstError.message);
+      setLoading(false);
+      return;
+    }
+    const passwordZodSchema = createPasswordSchema({
+      minLength: emailConfig.passwordMinLength,
+      requireUppercase: emailConfig.requireUppercase,
+      requireLowercase: emailConfig.requireLowercase,
+      requireNumber: emailConfig.requireNumber,
+      requireSpecialChar: emailConfig.requireSpecialChar
+    });
+    const passwordValidation = passwordZodSchema.safeParse(password);
+    if (!passwordValidation.success) {
+      const firstError = passwordValidation.error.issues[0];
+      setError(firstError.message);
       setLoading(false);
       return;
     }
     try {
-      const result = await signUp(email, password);
+      const result = await signUp(emailValidation.data, password);
       if ("error" in result) {
         throw new Error(result.error);
       }
-      const { user, accessToken } = result;
-      if (onSuccess) {
-        if (user) onSuccess(user, accessToken || "");
+      if (result.requiresEmailVerification && !result.accessToken) {
+        setStep("awaiting-verification");
+        setLoading(false);
+        return;
+      }
+      if (result.accessToken && result.user) {
+        if (onSuccess) {
+          onSuccess(result.user, result.accessToken);
+        }
       }
     } catch (err) {
       const errorMessage = err.message || "Sign up failed";
@@ -1171,6 +1382,21 @@ function SignUp({
       setLoading(false);
     }
   }
+  async function handleVerifyCode(code) {
+    try {
+      const result = await insforge.auth.verifyEmail({ email, otp: code });
+      if (result.error) {
+        throw new Error(result.error.message || "Verification failed");
+      }
+      if (result.data?.accessToken) {
+        if (onSuccess && result.data.user) {
+          onSuccess(result.data.user, result.data.accessToken);
+        }
+      }
+    } catch (err) {
+      throw new Error(err.message || "Invalid verification code");
+    }
+  }
   async function handleOAuth(provider) {
     try {
       setOauthLoading(provider);
@@ -1189,7 +1415,7 @@ function SignUp({
   if (!emailConfig) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
+  return step === "form" ? /* @__PURE__ */ jsx(
     SignUpForm,
     {
       email,
@@ -1205,326 +1431,75 @@ function SignUp({
       emailAuthConfig: emailConfig,
       ...uiProps
     }
+  ) : /* @__PURE__ */ jsx(
+    AuthEmailVerificationStep,
+    {
+      email,
+      onVerifyCode: handleVerifyCode
+    }
   );
 }
-function UserButton({
-  afterSignOutUrl = "/",
-  mode = "detailed",
-  appearance = {}
+function ForgotPasswordForm({
+  email,
+  onEmailChange,
+  onSubmit,
+  error,
+  loading = false,
+  success = false,
+  appearance = {},
+  title = "Forgot Password?",
+  subtitle = "Enter your email address and we'll send you a code to reset your password.",
+  emailLabel = "Email",
+  emailPlaceholder = "example@email.com",
+  submitButtonText = "Send Reset Code",
+  loadingButtonText = "Sending...",
+  backToSignInText = "Remember your password?",
+  backToSignInUrl = "/sign-in",
+  successTitle = "Check Your Email",
+  successMessage
 }) {
-  const { user, signOut } = useInsforge();
-  const [isOpen, setIsOpen] = useState(false);
-  const [imageError, setImageError] = useState(false);
-  const dropdownRef = useRef(null);
-  useEffect(() => {
-    setImageError(false);
-    const avatarUrl = user?.avatarUrl;
-    if (!avatarUrl) return;
-    const checkImageUrl = async () => {
-      try {
-        const response = await fetch(avatarUrl, {
-          method: "HEAD",
-          cache: "no-cache"
-        });
-        if (!response.ok) {
-          setImageError(true);
-        }
-      } catch (error) {
-        setImageError(true);
-      }
-    };
-    checkImageUrl();
-  }, [user?.avatarUrl]);
-  useEffect(() => {
-    function handleClickOutside(event) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
+  if (success) {
+    return /* @__PURE__ */ jsx(
+      AuthContainer,
+      {
+        appearance: {
+          containerClassName: appearance.container,
+          cardClassName: appearance.card
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: /* @__PURE__ */ 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__ */ jsx("path", { d: "M5 13l4 4L19 7" }) }) }),
+          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: successMessage || `We've sent a password reset link to ${email}. Please check your email and follow the instructions.` }),
+          /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "mt-4 text-black dark:text-white font-medium", children: "Back to Sign In" })
+        ] })
       }
-    }
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOpen]);
-  async function handleSignOut() {
-    await signOut();
-    setIsOpen(false);
-    window.location.href = afterSignOutUrl;
+    );
   }
-  if (!user) return null;
-  const initials = user.name ? user.name.charAt(0).toUpperCase() : user.email.split("@")[0].slice(0, 2).toUpperCase();
   return /* @__PURE__ */ jsxs(
-    "div",
+    AuthContainer,
     {
-      className: cn("relative inline-block", appearance.containerClassName),
-      ref: dropdownRef,
+      appearance: {
+        containerClassName: appearance.container,
+        cardClassName: appearance.card
+      },
       children: [
-        /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsx(
+          AuthHeader,
           {
-            className: cn(
-              "p-1 bg-transparent border-0 rounded-full cursor-pointer transition-all duration-200",
-              "flex items-center justify-center gap-2",
-              "hover:bg-black/5",
-              mode === "detailed" && "rounded-lg p-2",
-              appearance.buttonClassName
-            ),
-            onClick: () => setIsOpen(!isOpen),
-            "aria-expanded": isOpen,
-            "aria-haspopup": "true",
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full", children: user.avatarUrl && !imageError ? /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: user.avatarUrl,
-                  alt: user.email,
-                  onError: () => setImageError(true),
-                  className: "rounded-full object-cover w-full h-full"
-                }
-              ) : /* @__PURE__ */ jsx("span", { className: "text-white font-semibold text-sm", children: initials }) }),
-              mode === "detailed" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-0.5", children: [
-                user.name && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "text-sm font-semibold text-gray-900 leading-5 text-left",
-                      appearance.nameClassName
-                    ),
-                    children: user.name
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "text-xs text-gray-500 leading-4 text-left",
-                      appearance.emailClassName
-                    ),
-                    children: user.email
-                  }
-                )
-              ] })
-            ]
+            title,
+            subtitle,
+            appearance: {
+              containerClassName: appearance.header?.container,
+              titleClassName: appearance.header?.title,
+              subtitleClassName: appearance.header?.subtitle
+            }
           }
         ),
-        isOpen && /* @__PURE__ */ jsx(
-          "div",
+        /* @__PURE__ */ jsx(
+          AuthErrorBanner,
           {
-            className: cn(
-              "absolute top-full right-0 mt-2 min-w-40",
-              "bg-white border border-gray-200 rounded-lg",
-              "shadow-lg z-50 overflow-hidden p-1",
-              appearance.dropdownClassName
-            ),
-            children: /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: handleSignOut,
-                className: "flex items-center justify-start gap-2 w-full px-3 py-2 text-sm font-normal text-red-600 bg-transparent border-0 rounded-md cursor-pointer transition-colors hover:bg-red-50 text-left",
-                children: [
-                  /* @__PURE__ */ jsx(LogOut, { className: "w-5 h-5" }),
-                  "Sign out"
-                ]
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-function Protect({
-  children,
-  fallback,
-  redirectTo = "/sign-in",
-  condition,
-  onRedirect
-}) {
-  const { isSignedIn, isLoaded, user } = useInsforge();
-  useEffect(() => {
-    if (isLoaded && !isSignedIn) {
-      if (onRedirect) {
-        onRedirect(redirectTo);
-      } else {
-        window.location.href = redirectTo;
-      }
-    } else if (isLoaded && isSignedIn && condition && user) {
-      if (!condition(user)) {
-        if (onRedirect) {
-          onRedirect(redirectTo);
-        } else {
-          window.location.href = redirectTo;
-        }
-      }
-    }
-  }, [isLoaded, isSignedIn, redirectTo, condition, user, onRedirect]);
-  if (!isLoaded) {
-    return fallback || /* @__PURE__ */ jsx("div", { className: "insforge-loading", children: "Loading..." });
-  }
-  if (!isSignedIn) {
-    return fallback || null;
-  }
-  if (condition && user && !condition(user)) {
-    return fallback || null;
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children });
-}
-function SignedIn({ children }) {
-  const { isSignedIn, isLoaded } = useInsforge();
-  if (!isLoaded) return null;
-  if (!isSignedIn) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children });
-}
-function SignedOut({ children }) {
-  const { isSignedIn, isLoaded } = useInsforge();
-  if (!isLoaded) return null;
-  if (isSignedIn) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children });
-}
-function InsforgeCallback({
-  redirectTo,
-  onSuccess,
-  onError,
-  loadingComponent,
-  onRedirect
-}) {
-  const isProcessingRef = useRef(false);
-  const { handleAuthCallback } = useInsforge();
-  useEffect(() => {
-    const processCallback = async () => {
-      if (isProcessingRef.current) return;
-      isProcessingRef.current = true;
-      const searchParams = new URLSearchParams(window.location.search);
-      const error = searchParams.get("error");
-      if (error) {
-        if (onError) {
-          onError(error);
-        } else {
-          const errorUrl = "/?error=" + encodeURIComponent(error);
-          if (onRedirect) {
-            onRedirect(errorUrl);
-          } else {
-            window.location.href = errorUrl;
-          }
-        }
-        return;
-      }
-      const accessToken = searchParams.get("access_token");
-      if (!accessToken) {
-        const errorMsg = "no_token";
-        if (onError) {
-          onError(errorMsg);
-        } else {
-          const errorUrl = "/?error=" + encodeURIComponent(errorMsg);
-          if (onRedirect) {
-            onRedirect(errorUrl);
-          } else {
-            window.location.href = errorUrl;
-          }
-        }
-        return;
-      }
-      const result = await handleAuthCallback({
-        accessToken
-      });
-      if (!result.success) {
-        const errorMsg = result.error || "authentication_failed";
-        if (onError) {
-          onError(errorMsg);
-        } else {
-          const errorUrl = "/?error=" + encodeURIComponent(errorMsg);
-          if (onRedirect) {
-            onRedirect(errorUrl);
-          } else {
-            window.location.href = errorUrl;
-          }
-        }
-        return;
-      }
-      window.history.replaceState({}, "", window.location.pathname);
-      if (onSuccess) {
-        onSuccess();
-      }
-      const destination = redirectTo || sessionStorage.getItem("auth_destination") || sessionStorage.getItem("oauth_final_destination") || "/";
-      sessionStorage.removeItem("auth_destination");
-      sessionStorage.removeItem("oauth_final_destination");
-      if (onRedirect) {
-        onRedirect(destination);
-      } else {
-        window.location.href = destination;
-      }
-    };
-    processCallback();
-  }, [handleAuthCallback, redirectTo, onSuccess, onError, onRedirect]);
-  const defaultLoading = /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold mb-4", children: "Completing authentication..." }),
-    /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto" })
-  ] }) });
-  return loadingComponent || defaultLoading;
-}
-function ForgotPasswordForm({
-  email,
-  onEmailChange,
-  onSubmit,
-  error,
-  loading = false,
-  success = false,
-  appearance = {},
-  title = "Forgot Password?",
-  subtitle = "Enter your email address and we'll send you a code to reset your password.",
-  emailLabel = "Email",
-  emailPlaceholder = "example@email.com",
-  submitButtonText = "Send Reset Code",
-  loadingButtonText = "Sending...",
-  backToSignInText = "Remember your password?",
-  backToSignInUrl = "/sign-in",
-  successTitle = "Check Your Email",
-  successMessage
-}) {
-  if (success) {
-    return /* @__PURE__ */ jsx(
-      AuthContainer,
-      {
-        appearance: {
-          containerClassName: appearance.container,
-          cardClassName: appearance.card
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
-          /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: /* @__PURE__ */ 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__ */ jsx("path", { d: "M5 13l4 4L19 7" }) }) }),
-          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: successMessage || `We've sent a password reset link to ${email}. Please check your email and follow the instructions.` }),
-          /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "mt-4 text-black dark:text-white font-medium", children: "Back to Sign In" })
-        ] })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    AuthContainer,
-    {
-      appearance: {
-        containerClassName: appearance.container,
-        cardClassName: appearance.card
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          AuthHeader,
-          {
-            title,
-            subtitle,
-            appearance: {
-              containerClassName: appearance.header?.container,
-              titleClassName: appearance.header?.title,
-              subtitleClassName: appearance.header?.subtitle
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          AuthErrorBanner,
-          {
-            error: error || "",
-            className: appearance.errorBanner
+            error: error || "",
+            className: appearance.errorBanner
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -1695,37 +1670,616 @@ function ResetPasswordForm({
     }
   );
 }
-function VerifyEmailStatus({
-  status,
-  error,
-  appearance = {},
-  verifyingTitle = "Verifying your email...",
-  successTitle = "Email Verified!",
-  successMessage = "Your email has been verified successfully. You can close this page and return to your app.",
-  errorTitle = "Verification Failed"
+function ResetPassword({
+  token,
+  backToSignInUrl = "/sign-in",
+  onSuccess,
+  onError,
+  ...uiProps
 }) {
-  if (status === "verifying") {
-    return /* @__PURE__ */ jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-center justify-center gap-6", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white", children: verifyingTitle }),
-      /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-black dark:border-white" })
-    ] }) });
+  const { resetPassword } = useInsforge();
+  const { emailConfig } = usePublicAuthConfig();
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+    if (!emailConfig) {
+      setError("Configuration not loaded. Please refresh the page.");
+      setLoading(false);
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setError("Passwords do not match");
+      setLoading(false);
+      return;
+    }
+    if (!token) {
+      setError("Reset token is missing");
+      setLoading(false);
+      return;
+    }
+    const passwordZodSchema = createPasswordSchema({
+      minLength: emailConfig.passwordMinLength,
+      requireUppercase: emailConfig.requireUppercase,
+      requireLowercase: emailConfig.requireLowercase,
+      requireNumber: emailConfig.requireNumber,
+      requireSpecialChar: emailConfig.requireSpecialChar
+    });
+    const passwordValidation = passwordZodSchema.safeParse(newPassword);
+    if (!passwordValidation.success) {
+      const firstError = passwordValidation.error.issues[0];
+      setError(firstError.message);
+      setLoading(false);
+      return;
+    }
+    try {
+      const result = await resetPassword(token, newPassword);
+      if (result?.message) {
+        if (onSuccess) {
+          onSuccess(result.redirectTo);
+        }
+      } else {
+        const errorMessage = "Failed to reset password";
+        setError(errorMessage);
+        if (onError) {
+          onError(new Error(errorMessage));
+        }
+      }
+    } catch (err) {
+      const errorMessage = err.message || "Failed to reset password";
+      setError(errorMessage);
+      if (onError) {
+        onError(new Error(errorMessage));
+      }
+    } finally {
+      setLoading(false);
+    }
   }
-  if (status === "error") {
-    return /* @__PURE__ */ jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col items-stretch justify-center gap-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-center gap-2", children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-black dark:text-white", children: errorTitle }),
-      /* @__PURE__ */ jsxs("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed", children: [
-        error || "The verification link is invalid or has expired.",
-        " Please try again or contact support if the problem persists. You can close this page and return to your app."
-      ] })
-    ] }) }) });
+  if (!emailConfig) {
+    return null;
   }
-  return /* @__PURE__ */ jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col items-stretch justify-center gap-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
-    /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: /* @__PURE__ */ 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__ */ jsx("path", { d: "M5 13l4 4L19 7" }) }) }),
-    /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
-    /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: successMessage })
-  ] }) }) });
+  return /* @__PURE__ */ jsx(
+    ResetPasswordForm,
+    {
+      newPassword,
+      confirmPassword,
+      onNewPasswordChange: setNewPassword,
+      onConfirmPasswordChange: setConfirmPassword,
+      onSubmit: handleSubmit,
+      error,
+      loading,
+      emailAuthConfig: emailConfig,
+      backToSignInUrl,
+      ...uiProps
+    }
+  );
+}
+function ForgotPassword({
+  backToSignInUrl = "/sign-in",
+  onSuccess,
+  onError,
+  ...uiProps
+}) {
+  const { sendPasswordResetCode, baseUrl } = useInsforge();
+  const { emailConfig } = usePublicAuthConfig();
+  const [insforge] = useState(() => createClient({ baseUrl }));
+  const [step, setStep] = useState("email");
+  const [email, setEmail] = useState("");
+  const [verificationCode, setVerificationCode] = useState("");
+  const [resetToken, setResetToken] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [resendDisabled, setResendDisabled] = useState(true);
+  const [resendCountdown, setResendCountdown] = useState(60);
+  const [isSendingCode, setIsSendingCode] = useState(false);
+  const [isVerifyingCode, setIsVerifyingCode] = useState(false);
+  useEffect(() => {
+    if (resendCountdown > 0 && step === "code") {
+      const timer = setInterval(() => {
+        setResendCountdown((prev) => {
+          if (prev <= 1) {
+            setResendDisabled(false);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1e3);
+      return () => clearInterval(timer);
+    }
+  }, [resendCountdown, step]);
+  async function handleEmailSubmit(e) {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+    const emailValidation = emailSchema.safeParse(email);
+    if (!emailValidation.success) {
+      const firstError = emailValidation.error.issues[0];
+      setError(firstError.message);
+      setLoading(false);
+      return;
+    }
+    try {
+      const result = await sendPasswordResetCode(emailValidation.data);
+      if (result?.success) {
+        if (emailConfig?.resetPasswordMethod === "link") {
+          setSuccess(true);
+          if (onSuccess) {
+            onSuccess();
+          }
+        } else {
+          setStep("code");
+          setResendDisabled(true);
+          setResendCountdown(60);
+        }
+      } else {
+        const errorMessage = result?.message || "Failed to send reset code";
+        setError(errorMessage);
+        if (onError) {
+          onError(new Error(errorMessage));
+        }
+      }
+    } catch (err) {
+      const errorMessage = err.message || "Failed to send reset code";
+      setError(errorMessage);
+      if (onError) {
+        onError(new Error(errorMessage));
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function handleVerifyCode(code) {
+    setIsVerifyingCode(true);
+    setError("");
+    setVerificationCode(code);
+    try {
+      const result = await insforge.auth.verifyResetPasswordCode({ email, code });
+      if (result.error) {
+        throw new Error(result.error.message || "Failed to verify code");
+      }
+      if (result.data) {
+        setResetToken(result.data.resetToken);
+        setStep("password");
+      }
+    } catch (err) {
+      setError(err.message || "Invalid verification code");
+      setVerificationCode("");
+    } finally {
+      setIsVerifyingCode(false);
+    }
+  }
+  const handleResendCode = useCallback(async () => {
+    setResendDisabled(true);
+    setResendCountdown(60);
+    setIsSendingCode(true);
+    setError("");
+    try {
+      await sendPasswordResetCode(email);
+    } catch (err) {
+      setError(err.message || "Failed to resend code");
+      setResendDisabled(false);
+      setResendCountdown(0);
+    } finally {
+      setIsSendingCode(false);
+    }
+  }, [email, sendPasswordResetCode]);
+  function handlePasswordResetSuccess() {
+    if (onSuccess) {
+      onSuccess();
+    }
+  }
+  if (!emailConfig) {
+    return null;
+  }
+  if (step === "email") {
+    return /* @__PURE__ */ jsx(
+      ForgotPasswordForm,
+      {
+        email,
+        onEmailChange: setEmail,
+        onSubmit: handleEmailSubmit,
+        error,
+        loading,
+        success,
+        backToSignInUrl,
+        ...uiProps
+      }
+    );
+  }
+  if (step === "code") {
+    return /* @__PURE__ */ jsxs(
+      AuthContainer,
+      {
+        appearance: {
+          containerClassName: uiProps.appearance?.container,
+          cardClassName: uiProps.appearance?.card
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            AuthHeader,
+            {
+              title: "Enter Reset Code",
+              subtitle: `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.`,
+              appearance: {
+                containerClassName: uiProps.appearance?.header?.container,
+                titleClassName: uiProps.appearance?.header?.title,
+                subtitleClassName: uiProps.appearance?.header?.subtitle
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(AuthErrorBanner, { error, className: uiProps.appearance?.errorBanner }),
+          /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-6 items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-full bg-neutral-100 dark:bg-neutral-800 rounded-lg px-4 pt-4 pb-6 flex flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 mt-2", children: [
+              /* @__PURE__ */ jsx(
+                AuthVerificationCodeInput,
+                {
+                  value: verificationCode,
+                  onChange: setVerificationCode,
+                  email,
+                  disabled: isVerifyingCode,
+                  onComplete: (code) => {
+                    void handleVerifyCode(code);
+                  }
+                }
+              ),
+              isVerifyingCode && /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
+            ] }) }),
+            /* @__PURE__ */ jsxs("div", { className: "w-full text-sm text-center text-neutral-600 dark:text-neutral-400", children: [
+              "Didn't receive the email?",
+              " ",
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => {
+                    void handleResendCode();
+                  },
+                  disabled: resendDisabled || isSendingCode,
+                  className: "text-black dark:text-white font-medium transition-colors disabled:cursor-not-allowed cursor-pointer hover:underline disabled:no-underline disabled:opacity-50",
+                  children: isSendingCode ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "text-black dark:text-white font-medium", children: "Back to Sign In" }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ResetPassword,
+    {
+      token: resetToken,
+      backToSignInUrl,
+      onSuccess: handlePasswordResetSuccess,
+      onError,
+      appearance: uiProps.appearance
+    }
+  );
+}
+function VerifyEmailStatus({
+  status,
+  error,
+  appearance = {},
+  verifyingTitle = "Verifying your email...",
+  successTitle = "Email Verified!",
+  successMessage = "Your email has been verified successfully. You can close this page and return to your app.",
+  errorTitle = "Verification Failed"
+}) {
+  if (status === "verifying") {
+    return /* @__PURE__ */ jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-center justify-center gap-6", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white", children: verifyingTitle }),
+      /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-black dark:border-white" })
+    ] }) });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col items-stretch justify-center gap-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-center gap-2", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-black dark:text-white", children: errorTitle }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed", children: [
+        error || "The verification link is invalid or has expired.",
+        " Please try again or contact support if the problem persists. You can close this page and return to your app."
+      ] })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col items-stretch justify-center gap-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: /* @__PURE__ */ 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__ */ jsx("path", { d: "M5 13l4 4L19 7" }) }) }),
+    /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: successMessage })
+  ] }) }) });
+}
+function VerifyEmail({
+  token,
+  onSuccess,
+  onError,
+  ...uiProps
+}) {
+  const { verifyEmail } = useInsforge();
+  const [status, setStatus] = useState("verifying");
+  const [error, setError] = useState("");
+  useEffect(() => {
+    const verifyEmailFn = async () => {
+      if (!token) {
+        const errorMessage = "Invalid verification link. Missing required token.";
+        setError(errorMessage);
+        setStatus("error");
+        if (onError) {
+          onError(new Error(errorMessage));
+        }
+        return;
+      }
+      try {
+        const result = await verifyEmail(token);
+        if (!result?.accessToken) {
+          const errorMessage = result ? "Verification succeeded but no access token received" : "Email verification failed";
+          setError(errorMessage);
+          setStatus("error");
+          if (onError) {
+            onError(new Error(errorMessage));
+          }
+          return;
+        }
+        setStatus("success");
+        if (onSuccess) {
+          onSuccess({
+            accessToken: result.accessToken,
+            user: result.user
+          });
+        }
+      } catch (err) {
+        const errorMessage = err.message || "Email verification failed";
+        setError(errorMessage);
+        setStatus("error");
+        if (onError) {
+          onError(new Error(errorMessage));
+        }
+      }
+    };
+    void verifyEmailFn();
+  }, [token, verifyEmail, onSuccess, onError]);
+  return /* @__PURE__ */ jsx(VerifyEmailStatus, { status, error, ...uiProps });
+}
+function UserButton({
+  afterSignOutUrl = "/",
+  mode = "detailed",
+  appearance = {}
+}) {
+  const { user, signOut } = useInsforge();
+  const [isOpen, setIsOpen] = useState(false);
+  const [imageError, setImageError] = useState(false);
+  const dropdownRef = useRef(null);
+  useEffect(() => {
+    setImageError(false);
+    const avatarUrl = user?.avatarUrl;
+    if (!avatarUrl) return;
+    const checkImageUrl = async () => {
+      try {
+        const response = await fetch(avatarUrl, {
+          method: "HEAD",
+          cache: "no-cache"
+        });
+        if (!response.ok) {
+          setImageError(true);
+        }
+      } catch (error) {
+        setImageError(true);
+      }
+    };
+    checkImageUrl();
+  }, [user?.avatarUrl]);
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  async function handleSignOut() {
+    await signOut();
+    setIsOpen(false);
+    window.location.href = afterSignOutUrl;
+  }
+  if (!user) return null;
+  const initials = user.name ? user.name.charAt(0).toUpperCase() : user.email.split("@")[0].slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative inline-block", appearance.containerClassName),
+      ref: dropdownRef,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: cn(
+              "p-1 bg-transparent border-0 rounded-full cursor-pointer transition-all duration-200",
+              "flex items-center justify-center gap-2",
+              "hover:bg-black/5",
+              mode === "detailed" && "rounded-lg p-2",
+              appearance.buttonClassName
+            ),
+            onClick: () => setIsOpen(!isOpen),
+            "aria-expanded": isOpen,
+            "aria-haspopup": "true",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full", children: user.avatarUrl && !imageError ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: user.avatarUrl,
+                  alt: user.email,
+                  onError: () => setImageError(true),
+                  className: "rounded-full object-cover w-full h-full"
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "text-white font-semibold text-sm", children: initials }) }),
+              mode === "detailed" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-0.5", children: [
+                user.name && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "text-sm font-semibold text-gray-900 leading-5 text-left",
+                      appearance.nameClassName
+                    ),
+                    children: user.name
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "text-xs text-gray-500 leading-4 text-left",
+                      appearance.emailClassName
+                    ),
+                    children: user.email
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute top-full right-0 mt-2 min-w-40",
+              "bg-white border border-gray-200 rounded-lg",
+              "shadow-lg z-50 overflow-hidden p-1",
+              appearance.dropdownClassName
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleSignOut,
+                className: "flex items-center justify-start gap-2 w-full px-3 py-2 text-sm font-normal text-red-600 bg-transparent border-0 rounded-md cursor-pointer transition-colors hover:bg-red-50 text-left",
+                children: [
+                  /* @__PURE__ */ jsx(LogOut, { className: "w-5 h-5" }),
+                  "Sign out"
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function Protect({
+  children,
+  fallback,
+  redirectTo = "/sign-in",
+  condition,
+  onRedirect
+}) {
+  const { isSignedIn, isLoaded, user } = useInsforge();
+  useEffect(() => {
+    if (isLoaded && !isSignedIn) {
+      if (onRedirect) {
+        onRedirect(redirectTo);
+      } else {
+        window.location.href = redirectTo;
+      }
+    } else if (isLoaded && isSignedIn && condition && user) {
+      if (!condition(user)) {
+        if (onRedirect) {
+          onRedirect(redirectTo);
+        } else {
+          window.location.href = redirectTo;
+        }
+      }
+    }
+  }, [isLoaded, isSignedIn, redirectTo, condition, user, onRedirect]);
+  if (!isLoaded) {
+    return fallback || /* @__PURE__ */ jsx("div", { className: "insforge-loading", children: "Loading..." });
+  }
+  if (!isSignedIn) {
+    return fallback || null;
+  }
+  if (condition && user && !condition(user)) {
+    return fallback || null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function SignedIn({ children }) {
+  const { isSignedIn, isLoaded } = useInsforge();
+  if (!isLoaded) return null;
+  if (!isSignedIn) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function SignedOut({ children }) {
+  const { isSignedIn, isLoaded } = useInsforge();
+  if (!isLoaded) return null;
+  if (isSignedIn) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function InsforgeCallback({
+  redirectTo = "/",
+  onSuccess,
+  onError,
+  loadingComponent,
+  onRedirect
+}) {
+  const isProcessingRef = useRef(false);
+  const { isLoaded, isSignedIn } = useInsforge();
+  useEffect(() => {
+    if (!isLoaded) return;
+    if (isProcessingRef.current) return;
+    isProcessingRef.current = true;
+    const processCallback = async () => {
+      const searchParams = new URLSearchParams(window.location.search);
+      const error = searchParams.get("error");
+      if (error) {
+        if (onError) {
+          onError(error);
+        } else {
+          const errorUrl = "/?error=" + encodeURIComponent(error);
+          if (onRedirect) {
+            onRedirect(errorUrl);
+          } else {
+            window.location.href = errorUrl;
+          }
+        }
+        return;
+      }
+      if (!isSignedIn) {
+        const errorMsg = "authentication_failed";
+        if (onError) {
+          onError(errorMsg);
+        } else {
+          const errorUrl = "/?error=" + encodeURIComponent(errorMsg);
+          if (onRedirect) {
+            onRedirect(errorUrl);
+          } else {
+            window.location.href = errorUrl;
+          }
+        }
+        return;
+      }
+      window.history.replaceState({}, "", window.location.pathname);
+      if (onSuccess) {
+        onSuccess();
+      }
+      if (onRedirect) {
+        onRedirect(redirectTo);
+      } else {
+        window.location.href = redirectTo;
+      }
+    };
+    processCallback();
+  }, [isLoaded, isSignedIn, redirectTo, onSuccess, onError, onRedirect]);
+  const defaultLoading = /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold mb-4", children: "Completing authentication..." }),
+    /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto" })
+  ] }) });
+  return loadingComponent || defaultLoading;
 }
 
-export { AuthBranding, AuthContainer, AuthDivider, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, ForgotPasswordForm, InsforgeCallback, Protect, ResetPasswordForm, SignIn, SignInForm, SignUp, SignUpForm, SignedIn, SignedOut, UserButton, VerifyEmailStatus, validatePasswordStrength };
+export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, ForgotPassword, ForgotPasswordForm, InsforgeCallback, Protect, ResetPassword, ResetPasswordForm, SignIn, SignInForm, SignUp, SignUpForm, SignedIn, SignedOut, UserButton, VerifyEmail, VerifyEmailStatus, validatePasswordStrength };
 //# sourceMappingURL=components.mjs.map
 //# sourceMappingURL=components.mjs.map