@insforge/react 0.2.10 → 0.3.0

package/dist/components.js

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var lucideReact = require('lucide-react');
+var zod = require('zod');
 
 var InsforgeContext = react.createContext(
   void 0
@@ -685,6 +686,7 @@ function AuthVerificationCodeInput({
   email,
   onChange,
   disabled = false,
+  onComplete,
   appearance = {}
 }) {
   const inputRefs = react.useRef([]);
@@ -698,6 +700,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") {
@@ -718,6 +723,9 @@ function AuthVerificationCodeInput({
     if (/^\d+$/.test(pastedData) && pastedData.length === length) {
       onChange(pastedData);
       inputRefs.current[length - 1]?.focus();
+      if (onComplete) {
+        onComplete(pastedData);
+      }
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
@@ -758,6 +766,126 @@ function AuthVerificationCodeInput({
     )) })
   ] });
 }
+function AuthEmailVerificationStep({
+  email,
+  title = "Verify Your Email",
+  description,
+  method = "code",
+  onVerifyCode
+}) {
+  const { baseUrl } = useInsforge();
+  const [insforge] = react.useState(() => sdk.createClient({ baseUrl }));
+  const [resendDisabled, setResendDisabled] = react.useState(true);
+  const [resendCountdown, setResendCountdown] = react.useState(60);
+  const [isSending, setIsSending] = react.useState(false);
+  const [verificationCode, setVerificationCode] = react.useState("");
+  const [isVerifying, setIsVerifying] = react.useState(false);
+  const [verificationError, setVerificationError] = react.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.";
+  react.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]);
+  react.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__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-6 items-center", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-black dark:text-white", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        part,
+        index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-black dark:text-white", children: email })
+      ] }, index)) }),
+      method === "code" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 mt-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AuthVerificationCodeInput,
+          {
+            value: verificationCode,
+            onChange: setVerificationCode,
+            email,
+            disabled: isVerifying,
+            onComplete: (code) => {
+              void handleVerifyCode(code);
+            }
+          }
+        ),
+        verificationError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 dark:text-red-400 text-center", children: verificationError }),
+        isVerifying && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full text-sm text-center text-neutral-600 dark:text-neutral-400", children: [
+      "Didn't receive the email?",
+      " ",
+      /* @__PURE__ */ jsxRuntime.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,
@@ -922,6 +1050,7 @@ function SignIn({
   const [password, setPassword] = react.useState("");
   const [error, setError] = react.useState("");
   const [loading, setLoading] = react.useState(false);
+  const [step, setStep] = react.useState("form");
   const [oauthLoading, setOauthLoading] = react.useState(
     null
   );
@@ -933,6 +1062,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;
@@ -947,6 +1081,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);
@@ -965,7 +1114,7 @@ function SignIn({
   if (!emailConfig) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return step === "form" ? /* @__PURE__ */ jsxRuntime.jsx(
     SignInForm,
     {
       email,
@@ -981,6 +1130,12 @@ function SignIn({
       emailAuthConfig: emailConfig,
       ...uiProps
     }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    AuthEmailVerificationStep,
+    {
+      email,
+      onVerifyCode: handleVerifyCode
+    }
   );
 }
 function SignUpForm({
@@ -1131,6 +1286,34 @@ function SignUpForm({
     }
   );
 }
+var emailSchema = zod.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 = zod.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,
@@ -1143,6 +1326,7 @@ function SignUp({
   const [password, setPassword] = react.useState("");
   const [error, setError] = react.useState("");
   const [loading, setLoading] = react.useState(false);
+  const [step, setStep] = react.useState("form");
   const [oauthLoading, setOauthLoading] = react.useState(
     null
   );
@@ -1151,19 +1335,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";
@@ -1173,6 +1384,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);
@@ -1191,7 +1417,7 @@ function SignUp({
   if (!emailConfig) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return step === "form" ? /* @__PURE__ */ jsxRuntime.jsx(
     SignUpForm,
     {
       email,
@@ -1207,306 +1433,75 @@ function SignUp({
       emailAuthConfig: emailConfig,
       ...uiProps
     }
+  ) : /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
-  const [imageError, setImageError] = react.useState(false);
-  const dropdownRef = react.useRef(null);
-  react.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]);
-  react.useEffect(() => {
-    function handleClickOutside(event) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
+  if (success) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AuthContainer,
+      {
+        appearance: {
+          containerClassName: appearance.container,
+          cardClassName: appearance.card
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-green-600 dark:text-green-400", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 13l4 4L19 7" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-    "div",
+    AuthContainer,
     {
-      className: cn("relative inline-block", appearance.containerClassName),
-      ref: dropdownRef,
+      appearance: {
+        containerClassName: appearance.container,
+        cardClassName: appearance.card
+      },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full", children: user.avatarUrl && !imageError ? /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
-                {
-                  src: user.avatarUrl,
-                  alt: user.email,
-                  onError: () => setImageError(true),
-                  className: "rounded-full object-cover w-full h-full"
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white font-semibold text-sm", children: initials }) }),
-              mode === "detailed" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-0.5", children: [
-                user.name && /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "text-sm font-semibold text-gray-900 leading-5 text-left",
-                      appearance.nameClassName
-                    ),
-                    children: user.name
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          "div",
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "w-5 h-5" }),
-                  "Sign out"
-                ]
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-function Protect({
-  children,
-  fallback,
-  redirectTo = "/sign-in",
-  condition,
-  onRedirect
-}) {
-  const { isSignedIn, isLoaded, user } = useInsforge();
-  react.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__ */ jsxRuntime.jsx("div", { className: "insforge-loading", children: "Loading..." });
-  }
-  if (!isSignedIn) {
-    return fallback || null;
-  }
-  if (condition && user && !condition(user)) {
-    return fallback || null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-}
-function SignedIn({ children }) {
-  const { isSignedIn, isLoaded } = useInsforge();
-  if (!isLoaded) return null;
-  if (!isSignedIn) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-}
-function SignedOut({ children }) {
-  const { isSignedIn, isLoaded } = useInsforge();
-  if (!isLoaded) return null;
-  if (isSignedIn) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-}
-function InsforgeCallback({
-  redirectTo = "/",
-  onSuccess,
-  onError,
-  loadingComponent,
-  onRedirect
-}) {
-  const isProcessingRef = react.useRef(false);
-  const { isLoaded, isSignedIn } = useInsforge();
-  react.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold mb-4", children: "Completing authentication..." }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-      AuthContainer,
-      {
-        appearance: {
-          containerClassName: appearance.container,
-          cardClassName: appearance.card
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-green-600 dark:text-green-400", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 13l4 4L19 7" }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("a", { href: backToSignInUrl, className: "mt-4 text-black dark:text-white font-medium", children: "Back to Sign In" })
-        ] })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    AuthContainer,
-    {
-      appearance: {
-        containerClassName: appearance.container,
-        cardClassName: appearance.card
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AuthHeader,
-          {
-            title,
-            subtitle,
-            appearance: {
-              containerClassName: appearance.header?.container,
-              titleClassName: appearance.header?.title,
-              subtitleClassName: appearance.header?.subtitle
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AuthErrorBanner,
-          {
-            error: error || "",
-            className: appearance.errorBanner
+            error: error || "",
+            className: appearance.errorBanner
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1677,40 +1672,620 @@ 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__ */ jsxRuntime.jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-center justify-center gap-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white", children: verifyingTitle }),
-      /* @__PURE__ */ jsxRuntime.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] = react.useState("");
+  const [confirmPassword, setConfirmPassword] = react.useState("");
+  const [error, setError] = react.useState("");
+  const [loading, setLoading] = react.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__ */ jsxRuntime.jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-col items-stretch justify-center gap-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start justify-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold text-black dark:text-white", children: errorTitle }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-col items-stretch justify-center gap-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-green-600 dark:text-green-400", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 13l4 4L19 7" }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: successMessage })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.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] = react.useState(() => sdk.createClient({ baseUrl }));
+  const [step, setStep] = react.useState("email");
+  const [email, setEmail] = react.useState("");
+  const [verificationCode, setVerificationCode] = react.useState("");
+  const [resetToken, setResetToken] = react.useState("");
+  const [error, setError] = react.useState("");
+  const [loading, setLoading] = react.useState(false);
+  const [success, setSuccess] = react.useState(false);
+  const [resendDisabled, setResendDisabled] = react.useState(true);
+  const [resendCountdown, setResendCountdown] = react.useState(60);
+  const [isSendingCode, setIsSendingCode] = react.useState(false);
+  const [isVerifyingCode, setIsVerifyingCode] = react.useState(false);
+  react.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 = react.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__ */ jsxRuntime.jsx(
+      ForgotPasswordForm,
+      {
+        email,
+        onEmailChange: setEmail,
+        onSubmit: handleEmailSubmit,
+        error,
+        loading,
+        success,
+        backToSignInUrl,
+        ...uiProps
+      }
+    );
+  }
+  if (step === "code") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      AuthContainer,
+      {
+        appearance: {
+          containerClassName: uiProps.appearance?.container,
+          cardClassName: uiProps.appearance?.card
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AuthErrorBanner, { error, className: uiProps.appearance?.errorBanner }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-6 items-center", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 mt-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AuthVerificationCodeInput,
+                {
+                  value: verificationCode,
+                  onChange: setVerificationCode,
+                  email,
+                  disabled: isVerifyingCode,
+                  onComplete: (code) => {
+                    void handleVerifyCode(code);
+                  }
+                }
+              ),
+              isVerifyingCode && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full text-sm text-center text-neutral-600 dark:text-neutral-400", children: [
+              "Didn't receive the email?",
+              " ",
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: backToSignInUrl, className: "text-black dark:text-white font-medium", children: "Back to Sign In" }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-center justify-center gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white", children: verifyingTitle }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-black dark:border-white" })
+    ] }) });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ jsxRuntime.jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-col items-stretch justify-center gap-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start justify-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold text-black dark:text-white", children: errorTitle }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AuthContainer, { appearance, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-col items-stretch justify-center gap-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-green-600 dark:text-green-400", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 13l4 4L19 7" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
+    /* @__PURE__ */ jsxRuntime.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] = react.useState("verifying");
+  const [error, setError] = react.useState("");
+  react.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__ */ jsxRuntime.jsx(VerifyEmailStatus, { status, error, ...uiProps });
+}
+function UserButton({
+  afterSignOutUrl = "/",
+  mode = "detailed",
+  appearance = {}
+}) {
+  const { user, signOut } = useInsforge();
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [imageError, setImageError] = react.useState(false);
+  const dropdownRef = react.useRef(null);
+  react.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]);
+  react.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("relative inline-block", appearance.containerClassName),
+      ref: dropdownRef,
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full", children: user.avatarUrl && !imageError ? /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: user.avatarUrl,
+                  alt: user.email,
+                  onError: () => setImageError(true),
+                  className: "rounded-full object-cover w-full h-full"
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white font-semibold text-sm", children: initials }) }),
+              mode === "detailed" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-0.5", children: [
+                user.name && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "text-sm font-semibold text-gray-900 leading-5 text-left",
+                      appearance.nameClassName
+                    ),
+                    children: user.name
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "text-xs text-gray-500 leading-4 text-left",
+                      appearance.emailClassName
+                    ),
+                    children: user.email
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "w-5 h-5" }),
+                  "Sign out"
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function Protect({
+  children,
+  fallback,
+  redirectTo = "/sign-in",
+  condition,
+  onRedirect
+}) {
+  const { isSignedIn, isLoaded, user } = useInsforge();
+  react.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__ */ jsxRuntime.jsx("div", { className: "insforge-loading", children: "Loading..." });
+  }
+  if (!isSignedIn) {
+    return fallback || null;
+  }
+  if (condition && user && !condition(user)) {
+    return fallback || null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+}
+function SignedIn({ children }) {
+  const { isSignedIn, isLoaded } = useInsforge();
+  if (!isLoaded) return null;
+  if (!isSignedIn) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+}
+function SignedOut({ children }) {
+  const { isSignedIn, isLoaded } = useInsforge();
+  if (!isLoaded) return null;
+  if (isSignedIn) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+}
+function InsforgeCallback({
+  redirectTo = "/",
+  onSuccess,
+  onError,
+  loadingComponent,
+  onRedirect
+}) {
+  const isProcessingRef = react.useRef(false);
+  const { isLoaded, isSignedIn } = useInsforge();
+  react.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold mb-4", children: "Completing authentication..." }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto" })
+  ] }) });
+  return loadingComponent || defaultLoading;
 }
 
 exports.AuthBranding = AuthBranding;
 exports.AuthContainer = AuthContainer;
 exports.AuthDivider = AuthDivider;
+exports.AuthEmailVerificationStep = AuthEmailVerificationStep;
 exports.AuthErrorBanner = AuthErrorBanner;
 exports.AuthFormField = AuthFormField;
 exports.AuthHeader = AuthHeader;
@@ -1721,9 +2296,11 @@ exports.AuthPasswordField = AuthPasswordField;
 exports.AuthPasswordStrengthIndicator = AuthPasswordStrengthIndicator;
 exports.AuthSubmitButton = AuthSubmitButton;
 exports.AuthVerificationCodeInput = AuthVerificationCodeInput;
+exports.ForgotPassword = ForgotPassword;
 exports.ForgotPasswordForm = ForgotPasswordForm;
 exports.InsforgeCallback = InsforgeCallback;
 exports.Protect = Protect;
+exports.ResetPassword = ResetPassword;
 exports.ResetPasswordForm = ResetPasswordForm;
 exports.SignIn = SignIn;
 exports.SignInForm = SignInForm;
@@ -1732,6 +2309,7 @@ exports.SignUpForm = SignUpForm;
 exports.SignedIn = SignedIn;
 exports.SignedOut = SignedOut;
 exports.UserButton = UserButton;
+exports.VerifyEmail = VerifyEmail;
 exports.VerifyEmailStatus = VerifyEmailStatus;
 exports.validatePasswordStrength = validatePasswordStrength;
 //# sourceMappingURL=components.js.map