@insforge/react 0.2.10 → 0.3.1

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,125 @@ function AuthVerificationCodeInput({
     )) })
   ] });
 }
+function AuthEmailVerificationStep({
+  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: "flex flex-col gap-6 items-stretch", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 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)) }),
+    verificationError && /* @__PURE__ */ jsx("div", { className: "pl-3 py-2 pr-2 bg-red-50 border-2 border-red-600 rounded", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-red-500 shrink-0", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600 flex-1", children: verificationError })
+    ] }) }),
+    method === "code" && /* @__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(
+        AuthVerificationCodeInput,
+        {
+          value: verificationCode,
+          onChange: setVerificationCode,
+          email,
+          disabled: isVerifying,
+          onComplete: (code) => {
+            void handleVerifyCode(code);
+          }
+        }
+      ),
+      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,
@@ -782,7 +909,11 @@ function SignInForm({
   signUpText = "Don't have an account?",
   signUpLinkText = "Sign Up Now",
   signUpUrl = "/sign-up",
-  dividerText = "or"
+  dividerText = "or",
+  // Email verification step props
+  showVerificationStep = false,
+  onVerifyCode,
+  verificationDescription
 }) {
   return /* @__PURE__ */ jsxs(
     AuthContainer,
@@ -795,8 +926,8 @@ function SignInForm({
         /* @__PURE__ */ jsx(
           AuthHeader,
           {
-            title,
-            subtitle,
+            title: showVerificationStep ? "Verify Your Email" : title,
+            subtitle: showVerificationStep ? "" : subtitle,
             appearance: {
               containerClassName: appearance.header?.container,
               titleClassName: appearance.header?.title,
@@ -811,7 +942,14 @@ function SignInForm({
             className: appearance.errorBanner
           }
         ),
-        /* @__PURE__ */ jsxs(
+        showVerificationStep ? /* @__PURE__ */ jsx(
+          AuthEmailVerificationStep,
+          {
+            email,
+            description: verificationDescription,
+            onVerifyCode
+          }
+        ) : /* @__PURE__ */ jsxs(
           "form",
           {
             onSubmit,
@@ -870,39 +1008,41 @@ function SignInForm({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          AuthLink,
-          {
-            text: signUpText,
-            linkText: signUpLinkText,
-            href: signUpUrl,
-            appearance: {
-              containerClassName: appearance.link?.container,
-              linkClassName: appearance.link?.link
-            }
-          }
-        ),
-        availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            AuthDivider,
-            {
-              text: dividerText,
-              className: appearance.divider
-            }
-          ),
+        !showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            AuthOAuthProviders,
+            AuthLink,
             {
-              providers: availableProviders,
-              onClick: onOAuthClick,
-              disabled: loading || oauthLoading !== null,
-              loading: oauthLoading,
+              text: signUpText,
+              linkText: signUpLinkText,
+              href: signUpUrl,
               appearance: {
-                containerClassName: appearance.oauth?.container,
-                buttonClassName: appearance.oauth?.button
+                containerClassName: appearance.link?.container,
+                linkClassName: appearance.link?.link
               }
             }
-          )
+          ),
+          availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              AuthDivider,
+              {
+                text: dividerText,
+                className: appearance.divider
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              AuthOAuthProviders,
+              {
+                providers: availableProviders,
+                onClick: onOAuthClick,
+                disabled: loading || oauthLoading !== null,
+                loading: oauthLoading,
+                appearance: {
+                  containerClassName: appearance.oauth?.container,
+                  buttonClassName: appearance.oauth?.button
+                }
+              }
+            )
+          ] })
         ] })
       ]
     }
@@ -920,6 +1060,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 +1072,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 +1091,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);
@@ -977,6 +1138,8 @@ function SignIn({
       availableProviders: emailConfig?.oAuthProviders || [],
       onOAuthClick: handleOAuth,
       emailAuthConfig: emailConfig,
+      showVerificationStep: step === "awaiting-verification",
+      onVerifyCode: handleVerifyCode,
       ...uiProps
     }
   );
@@ -1005,7 +1168,11 @@ function SignUpForm({
   signInText = "Already have an account?",
   signInLinkText = "Login Now",
   signInUrl = "/sign-in",
-  dividerText = "or"
+  dividerText = "or",
+  // Email verification step props
+  showVerificationStep = false,
+  onVerifyCode,
+  verificationDescription
 }) {
   return /* @__PURE__ */ jsxs(
     AuthContainer,
@@ -1018,8 +1185,8 @@ function SignUpForm({
         /* @__PURE__ */ jsx(
           AuthHeader,
           {
-            title,
-            subtitle,
+            title: showVerificationStep ? "Verify Your Email" : title,
+            subtitle: showVerificationStep ? "" : subtitle,
             appearance: {
               containerClassName: appearance.header?.container,
               titleClassName: appearance.header?.title,
@@ -1034,7 +1201,14 @@ function SignUpForm({
             className: appearance.errorBanner
           }
         ),
-        /* @__PURE__ */ jsxs(
+        showVerificationStep ? /* @__PURE__ */ jsx(
+          AuthEmailVerificationStep,
+          {
+            email,
+            description: verificationDescription,
+            onVerifyCode
+          }
+        ) : /* @__PURE__ */ jsxs(
           "form",
           {
             onSubmit,
@@ -1091,44 +1265,74 @@ function SignUpForm({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          AuthLink,
-          {
-            text: signInText,
-            linkText: signInLinkText,
-            href: signInUrl,
-            appearance: {
-              containerClassName: appearance.link?.container,
-              linkClassName: appearance.link?.link
-            }
-          }
-        ),
-        availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            AuthDivider,
-            {
-              text: dividerText,
-              className: appearance.divider
-            }
-          ),
+        !showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            AuthOAuthProviders,
+            AuthLink,
             {
-              providers: availableProviders,
-              onClick: onOAuthClick,
-              disabled: loading || oauthLoading !== null,
-              loading: oauthLoading,
+              text: signInText,
+              linkText: signInLinkText,
+              href: signInUrl,
               appearance: {
-                containerClassName: appearance.oauth?.container,
-                buttonClassName: appearance.oauth?.button
+                containerClassName: appearance.link?.container,
+                linkClassName: appearance.link?.link
               }
             }
-          )
+          ),
+          availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              AuthDivider,
+              {
+                text: dividerText,
+                className: appearance.divider
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              AuthOAuthProviders,
+              {
+                providers: availableProviders,
+                onClick: onOAuthClick,
+                disabled: loading || oauthLoading !== null,
+                loading: oauthLoading,
+                appearance: {
+                  containerClassName: appearance.oauth?.container,
+                  buttonClassName: appearance.oauth?.button
+                }
+              }
+            )
+          ] })
         ] })
       ]
     }
   );
 }
+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 +1345,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 +1354,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 +1403,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);
@@ -1203,81 +1450,691 @@ function SignUp({
       availableProviders: emailConfig?.oAuthProviders || [],
       onOAuthClick: handleOAuth,
       emailAuthConfig: emailConfig,
+      showVerificationStep: step === "awaiting-verification",
+      onVerifyCode: handleVerifyCode,
       ...uiProps
     }
   );
 }
-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__ */ 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
+          }
+        ),
         /* @__PURE__ */ jsxs(
-          "button",
+          "form",
           {
-            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",
+            onSubmit,
+            noValidate: true,
+            className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
             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",
-                {
+              /* @__PURE__ */ jsx(
+                AuthFormField,
+                {
+                  id: "email",
+                  type: "email",
+                  label: emailLabel,
+                  placeholder: emailPlaceholder,
+                  value: email,
+                  onChange: (e) => onEmailChange(e.target.value),
+                  required: true,
+                  autoComplete: "email",
+                  appearance: {
+                    containerClassName: appearance.form?.emailField?.container,
+                    labelClassName: appearance.form?.emailField?.label,
+                    inputClassName: appearance.form?.emailField?.input
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AuthSubmitButton,
+                {
+                  isLoading: loading,
+                  disabled: loading,
+                  className: appearance.button,
+                  children: loading ? loadingButtonText : submitButtonText
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AuthLink,
+          {
+            text: backToSignInText,
+            linkText: "Back to Sign In",
+            href: backToSignInUrl,
+            appearance: {
+              containerClassName: appearance.link?.container,
+              linkClassName: appearance.link?.link
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function ResetPasswordForm({
+  newPassword,
+  confirmPassword,
+  onNewPasswordChange,
+  onConfirmPasswordChange,
+  onSubmit,
+  error,
+  loading = false,
+  emailAuthConfig,
+  appearance = {},
+  title = "Reset Password",
+  subtitle = "Enter your new password below.",
+  newPasswordLabel = "New Password",
+  newPasswordPlaceholder = "\u2022\u2022\u2022\u2022\u2022\u2022",
+  confirmPasswordLabel = "Confirm Password",
+  confirmPasswordPlaceholder = "\u2022\u2022\u2022\u2022\u2022\u2022",
+  submitButtonText = "Reset Password",
+  loadingButtonText = "Resetting...",
+  backToSignInText = "",
+  backToSignInUrl = "/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
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit,
+            noValidate: true,
+            className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
+            children: [
+              /* @__PURE__ */ jsx(
+                AuthPasswordField,
+                {
+                  id: "newPassword",
+                  label: newPasswordLabel,
+                  placeholder: newPasswordPlaceholder,
+                  value: newPassword,
+                  onChange: (e) => onNewPasswordChange(e.target.value),
+                  required: true,
+                  autoComplete: "new-password",
+                  showStrengthIndicator: true,
+                  emailAuthConfig,
+                  appearance: {
+                    containerClassName: appearance.form?.newPasswordField?.container,
+                    labelClassName: appearance.form?.newPasswordField?.label,
+                    inputClassName: appearance.form?.newPasswordField?.input
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AuthPasswordField,
+                {
+                  id: "confirmPassword",
+                  label: confirmPasswordLabel,
+                  placeholder: confirmPasswordPlaceholder,
+                  value: confirmPassword,
+                  onChange: (e) => onConfirmPasswordChange(e.target.value),
+                  required: true,
+                  autoComplete: "new-password",
+                  emailAuthConfig,
+                  appearance: {
+                    containerClassName: appearance.form?.confirmPasswordField?.container,
+                    labelClassName: appearance.form?.confirmPasswordField?.label,
+                    inputClassName: appearance.form?.confirmPasswordField?.input
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AuthSubmitButton,
+                {
+                  isLoading: loading,
+                  disabled: loading,
+                  className: appearance.button,
+                  children: loading ? loadingButtonText : submitButtonText
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AuthLink,
+          {
+            text: backToSignInText,
+            linkText: "Back to Sign In",
+            href: backToSignInUrl,
+            appearance: {
+              containerClassName: appearance.link?.container,
+              linkClassName: appearance.link?.link
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function ResetPassword({
+  token,
+  backToSignInUrl = "/sign-in",
+  onSuccess,
+  onError,
+  ...uiProps
+}) {
+  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 (!emailConfig) {
+    return null;
+  }
+  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),
@@ -1444,268 +2301,7 @@ function InsforgeCallback({
   ] }) });
   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
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "form",
-          {
-            onSubmit,
-            noValidate: true,
-            className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
-            children: [
-              /* @__PURE__ */ jsx(
-                AuthFormField,
-                {
-                  id: "email",
-                  type: "email",
-                  label: emailLabel,
-                  placeholder: emailPlaceholder,
-                  value: email,
-                  onChange: (e) => onEmailChange(e.target.value),
-                  required: true,
-                  autoComplete: "email",
-                  appearance: {
-                    containerClassName: appearance.form?.emailField?.container,
-                    labelClassName: appearance.form?.emailField?.label,
-                    inputClassName: appearance.form?.emailField?.input
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AuthSubmitButton,
-                {
-                  isLoading: loading,
-                  disabled: loading,
-                  className: appearance.button,
-                  children: loading ? loadingButtonText : submitButtonText
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          AuthLink,
-          {
-            text: backToSignInText,
-            linkText: "Back to Sign In",
-            href: backToSignInUrl,
-            appearance: {
-              containerClassName: appearance.link?.container,
-              linkClassName: appearance.link?.link
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-function ResetPasswordForm({
-  newPassword,
-  confirmPassword,
-  onNewPasswordChange,
-  onConfirmPasswordChange,
-  onSubmit,
-  error,
-  loading = false,
-  emailAuthConfig,
-  appearance = {},
-  title = "Reset Password",
-  subtitle = "Enter your new password below.",
-  newPasswordLabel = "New Password",
-  newPasswordPlaceholder = "\u2022\u2022\u2022\u2022\u2022\u2022",
-  confirmPasswordLabel = "Confirm Password",
-  confirmPasswordPlaceholder = "\u2022\u2022\u2022\u2022\u2022\u2022",
-  submitButtonText = "Reset Password",
-  loadingButtonText = "Resetting...",
-  backToSignInText = "",
-  backToSignInUrl = "/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
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "form",
-          {
-            onSubmit,
-            noValidate: true,
-            className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
-            children: [
-              /* @__PURE__ */ jsx(
-                AuthPasswordField,
-                {
-                  id: "newPassword",
-                  label: newPasswordLabel,
-                  placeholder: newPasswordPlaceholder,
-                  value: newPassword,
-                  onChange: (e) => onNewPasswordChange(e.target.value),
-                  required: true,
-                  autoComplete: "new-password",
-                  showStrengthIndicator: true,
-                  emailAuthConfig,
-                  appearance: {
-                    containerClassName: appearance.form?.newPasswordField?.container,
-                    labelClassName: appearance.form?.newPasswordField?.label,
-                    inputClassName: appearance.form?.newPasswordField?.input
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AuthPasswordField,
-                {
-                  id: "confirmPassword",
-                  label: confirmPasswordLabel,
-                  placeholder: confirmPasswordPlaceholder,
-                  value: confirmPassword,
-                  onChange: (e) => onConfirmPasswordChange(e.target.value),
-                  required: true,
-                  autoComplete: "new-password",
-                  emailAuthConfig,
-                  appearance: {
-                    containerClassName: appearance.form?.confirmPasswordField?.container,
-                    labelClassName: appearance.form?.confirmPasswordField?.label,
-                    inputClassName: appearance.form?.confirmPasswordField?.input
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AuthSubmitButton,
-                {
-                  isLoading: loading,
-                  disabled: loading,
-                  className: appearance.button,
-                  children: loading ? loadingButtonText : submitButtonText
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("p", { className: appearance.backToSignIn || "text-center text-sm text-gray-600 dark:text-gray-400", children: [
-          backToSignInText && /* @__PURE__ */ jsxs("span", { children: [
-            backToSignInText,
-            " "
-          ] }),
-          /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "text-black dark:text-white font-medium", children: "Back to Sign In" })
-        ] })
-      ]
-    }
-  );
-}
-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 })
-  ] }) }) });
-}
 
-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