@mesob/auth-react 0.0.3

package/dist/index.js

@@ -0,0 +1,1640 @@
+// src/client.ts
+var validErrorCodes = [
+  "USER_NOT_FOUND",
+  "INVALID_PASSWORD",
+  "USER_EXISTS",
+  "VERIFICATION_EXPIRED",
+  "VERIFICATION_MISMATCH",
+  "VERIFICATION_NOT_FOUND",
+  "TOO_MANY_ATTEMPTS",
+  "REQUIRES_VERIFICATION",
+  "UNAUTHORIZED",
+  "ACCESS_DENIED",
+  "HAS_NO_PASSWORD"
+];
+var AuthError = class extends Error {
+  code;
+  status;
+  details;
+  constructor(message, code, status, details) {
+    super(message);
+    this.name = "AuthError";
+    this.code = code;
+    this.status = status;
+    this.details = details;
+  }
+};
+var AuthClient = class {
+  baseURL;
+  constructor(config) {
+    this.baseURL = config.baseURL.replace(/\/$/, "");
+  }
+  async request(endpoint, options = {}) {
+    const url = `${this.baseURL}${endpoint}`;
+    const response = await fetch(url, {
+      ...options,
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        ...options.headers
+      }
+    });
+    if (!response.ok) {
+      const text = await response.text();
+      let errorData;
+      try {
+        errorData = JSON.parse(text);
+      } catch {
+        errorData = { error: "Unknown error", message: text };
+      }
+      const potentialCode = errorData.code || (typeof errorData.error === "string" ? errorData.error : null) || (typeof errorData.message === "string" ? errorData.message : null);
+      const upperCode = potentialCode?.toUpperCase().trim();
+      const errorCode = upperCode && validErrorCodes.includes(upperCode) ? upperCode : void 0;
+      const errorMessage = errorData.message || errorData.error || "Request failed";
+      throw new AuthError(
+        errorMessage,
+        errorCode,
+        response.status,
+        errorData.details
+      );
+    }
+    const data = await response.json();
+    return data;
+  }
+  signUpWithEmail(data) {
+    return this.request("/sign-up", {
+      method: "POST",
+      body: JSON.stringify({
+        email: data.email,
+        password: data.password,
+        fullName: data.fullName,
+        handle: data.handle
+      })
+    });
+  }
+  signUpWithPhone(data) {
+    return this.request("/sign-up", {
+      method: "POST",
+      body: JSON.stringify({
+        phone: data.phone,
+        password: data.password,
+        fullName: data.fullName,
+        handle: data.handle
+      })
+    });
+  }
+  checkUser(data) {
+    return this.request("/check-user", {
+      method: "POST",
+      body: JSON.stringify(data)
+    });
+  }
+  signInWithPassword(data) {
+    return this.request("/sign-in", {
+      method: "POST",
+      body: JSON.stringify(data)
+    });
+  }
+  signOut() {
+    return this.request("/sign-out", {
+      method: "POST"
+    });
+  }
+  requestEmailVerification(data) {
+    return this.request(
+      "/email/verification/request",
+      {
+        method: "POST",
+        body: JSON.stringify(data || {})
+      }
+    );
+  }
+  verifyEmail(data) {
+    return this.request("/email/verification/confirm", {
+      method: "POST",
+      body: JSON.stringify(data)
+    });
+  }
+  resendVerification(_verificationId) {
+    return this.requestEmailVerification();
+  }
+  requestPhoneOtp(data) {
+    return this.request(
+      "/phone/verification/request",
+      {
+        method: "POST",
+        body: JSON.stringify(data)
+      }
+    );
+  }
+  verifyPhoneOtp(data) {
+    return this.request("/phone/verification/confirm", {
+      method: "POST",
+      body: JSON.stringify(data)
+    });
+  }
+  forgotPassword(data) {
+    return this.request("/password/forgot", {
+      method: "POST",
+      body: JSON.stringify(data)
+    });
+  }
+  resetPassword(data) {
+    return this.request("/password/reset", {
+      method: "POST",
+      body: JSON.stringify(data)
+    });
+  }
+  changePassword(data) {
+    return this.request("/password/change", {
+      method: "POST",
+      body: JSON.stringify(data)
+    });
+  }
+  getSession() {
+    return this.request("/session", {
+      method: "GET"
+    });
+  }
+};
+
+// src/components/auth-card.tsx
+import { jsx } from "react/jsx-runtime";
+var AuthCard = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4 dark:from-slate-900 dark:to-slate-800", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx("div", { className: "rounded-xl border bg-card p-8 shadow-lg", children }) }) });
+};
+
+// src/components/auth-page-layout.tsx
+import { Alert, AlertDescription } from "@mesob/ui/components/alert";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var AuthPageLayout = ({
+  title,
+  description,
+  children,
+  error,
+  footer,
+  logoImage
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx2("div", { className: "flex size-8 mb-6 w-full items-center justify-center rounded-md", children: /* @__PURE__ */ jsx2("img", { src: logoImage || "", alt: "Jiret", width: 42, height: 42 }) }),
+    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
+      description && /* @__PURE__ */ jsx2("p", { className: "mt-2 text-sm text-muted-foreground", children: description })
+    ] }),
+    children,
+    error && /* @__PURE__ */ jsx2(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx2(AlertDescription, { children: error }) }),
+    /* @__PURE__ */ jsx2("div", { className: "mt-2 w-full", children: footer && /* @__PURE__ */ jsx2("div", { className: "w-full text-center text-sm text-muted-foreground", children: footer }) })
+  ] });
+};
+
+// src/components/countdown.tsx
+import { Button } from "@mesob/ui/components/button";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Countdown = ({
+  initialSeconds = 60,
+  onResend,
+  resending = false
+}) => {
+  const t = useTranslations("Common");
+  const [seconds, setSeconds] = useState(initialSeconds);
+  const [isResending, setIsResending] = useState(false);
+  useEffect(() => {
+    if (seconds <= 0) {
+      return;
+    }
+    const timer = setInterval(() => {
+      setSeconds((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [seconds]);
+  const handleResend = async () => {
+    setIsResending(true);
+    try {
+      await onResend();
+      setSeconds(initialSeconds);
+    } catch (_error) {
+    } finally {
+      setIsResending(false);
+    }
+  };
+  if (seconds > 0) {
+    return /* @__PURE__ */ jsx3(Button, { variant: "ghost", disabled: true, children: t("resendIn", { seconds }) });
+  }
+  return /* @__PURE__ */ jsx3(
+    Button,
+    {
+      variant: "ghost",
+      onClick: handleResend,
+      disabled: isResending || resending,
+      children: isResending || resending ? t("resending") : t("resend")
+    }
+  );
+};
+
+// src/components/forgot-password.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button as Button2 } from "@mesob/ui/components/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from "@mesob/ui/components/form";
+import { Input } from "@mesob/ui/components/input";
+import { useTranslations as useTranslations2 } from "next-intl";
+import { useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var ForgotPassword = ({
+  onSubmit,
+  isLoading = false,
+  onBack
+}) => {
+  const t = useTranslations2("Auth.forgotPassword");
+  const forgotPasswordSchema = useMemo(
+    () => z.object({
+      account: z.string().min(1, t("errors.accountRequired"))
+    }),
+    [t]
+  );
+  const form = useForm({
+    resolver: zodResolver(forgotPasswordSchema),
+    defaultValues: {
+      account: ""
+    }
+  });
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await onSubmit(values);
+  });
+  return /* @__PURE__ */ jsx4(Form, { ...form, children: /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "space-y-5", children: [
+    /* @__PURE__ */ jsx4(
+      FormField,
+      {
+        control: form.control,
+        name: "account",
+        render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
+          /* @__PURE__ */ jsx4(FormLabel, { children: t("form.accountLabel") }),
+          /* @__PURE__ */ jsx4(FormControl, { children: /* @__PURE__ */ jsx4(
+            Input,
+            {
+              type: "text",
+              placeholder: t("form.accountPlaceholder"),
+              ...field
+            }
+          ) }),
+          /* @__PURE__ */ jsx4(FormMessage, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx4(Button2, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("form.submitting") : t("form.submit") })
+  ] }) });
+};
+
+// src/components/pages/forgot-password-page.tsx
+import { useTranslations as useTranslations3 } from "next-intl";
+import { useState as useState3 } from "react";
+
+// src/context/auth-provider.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect as useEffect2,
+  useState as useState2
+} from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var AuthContext = createContext(null);
+var useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within AuthProvider");
+  }
+  return context;
+};
+var AuthProvider = ({ client, children }) => {
+  const [user, setUser] = useState2(null);
+  const [session, setSession] = useState2(null);
+  const [loading, setLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  const refresh = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await client.getSession();
+      setUser(data.user);
+      setSession(data.session);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch session")
+      );
+      setUser(null);
+      setSession(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [client]);
+  const setAuth = useCallback((data) => {
+    setUser(data.user);
+    setSession(data.session);
+    setError(null);
+    setLoading(false);
+  }, []);
+  useEffect2(() => {
+    refresh();
+  }, [refresh]);
+  return /* @__PURE__ */ jsx5(
+    AuthContext.Provider,
+    {
+      value: {
+        user,
+        session,
+        loading,
+        error,
+        client,
+        refresh,
+        setAuth
+      },
+      children
+    }
+  );
+};
+
+// src/constants/auth.error.codes.ts
+var validCodes = [
+  "USER_NOT_FOUND",
+  "INVALID_PASSWORD",
+  "USER_EXISTS",
+  "VERIFICATION_EXPIRED",
+  "VERIFICATION_MISMATCH",
+  "VERIFICATION_NOT_FOUND",
+  "TOO_MANY_ATTEMPTS",
+  "REQUIRES_VERIFICATION",
+  "UNAUTHORIZED",
+  "ACCESS_DENIED",
+  "HAS_NO_PASSWORD"
+];
+
+// src/utils/handle-error.ts
+var handleError = (err, setError, t) => {
+  if (err instanceof AuthError) {
+    let errorKey = "errors.fallback";
+    if (err.code) {
+      errorKey = `errors.${err.code.toLowerCase()}`;
+    } else if (err.message) {
+      const messageUpper = err.message.toUpperCase().trim();
+      if (validCodes.includes(messageUpper)) {
+        errorKey = `errors.${messageUpper.toLowerCase()}`;
+      }
+    }
+    setError(t(errorKey, { defaultValue: err.message }));
+  } else {
+    setError(err instanceof Error ? err.message : t("errors.fallback"));
+  }
+};
+
+// src/components/pages/forgot-password-page.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ForgotPasswordPage = ({
+  onNavigate,
+  linkComponent: Link,
+  links,
+  logoImage
+}) => {
+  const t = useTranslations3("Auth.forgotPassword");
+  const { client } = useAuth();
+  const [isLoading, setIsLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  const signInLink = links?.signIn || "/auth/sign-in";
+  const handleSubmit = async (values) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await client.forgotPassword({ identifier: values.account });
+      if ("verificationId" in res && res.verificationId) {
+        onNavigate(`/auth/reset-password?verificationId=${res.verificationId}`);
+      } else {
+        onNavigate(
+          `/auth/reset-password?identifier=${encodeURIComponent(values.account)}`
+        );
+      }
+    } catch (err) {
+      handleError(err, setError, t);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleBack = () => {
+    onNavigate(signInLink);
+  };
+  return /* @__PURE__ */ jsx6(
+    AuthPageLayout,
+    {
+      title: t("title"),
+      description: t("description"),
+      error,
+      logoImage,
+      footer: Link ? /* @__PURE__ */ jsx6(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.backToSignIn") }) : /* @__PURE__ */ jsx6(
+        "a",
+        {
+          href: signInLink,
+          onClick: (e) => {
+            e.preventDefault();
+            onNavigate(signInLink);
+          },
+          className: "text-primary hover:underline",
+          children: t("footer.backToSignIn")
+        }
+      ),
+      children: /* @__PURE__ */ jsx6(
+        ForgotPassword,
+        {
+          onSubmit: handleSubmit,
+          isLoading,
+          onBack: handleBack
+        }
+      )
+    }
+  );
+};
+
+// src/components/pages/reset-password-page.tsx
+import { useTranslations as useTranslations5 } from "next-intl";
+import { useState as useState5 } from "react";
+
+// src/components/reset-password-form.tsx
+import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
+import { Button as Button3 } from "@mesob/ui/components/button";
+import {
+  Form as Form2,
+  FormControl as FormControl2,
+  FormField as FormField2,
+  FormItem as FormItem2,
+  FormLabel as FormLabel2,
+  FormMessage as FormMessage2
+} from "@mesob/ui/components/form";
+import { Input as Input2 } from "@mesob/ui/components/input";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot
+} from "@mesob/ui/components/input-otp";
+import { Eye, EyeOff } from "lucide-react";
+import { useTranslations as useTranslations4 } from "next-intl";
+import { useMemo as useMemo2, useState as useState4 } from "react";
+import { useForm as useForm2 } from "react-hook-form";
+import { z as z2 } from "zod";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var ResetPasswordForm = ({
+  verificationId,
+  onSubmit,
+  isLoading = false,
+  error
+}) => {
+  const t = useTranslations4("Auth.resetPassword");
+  const [showPassword, setShowPassword] = useState4(false);
+  const resetPasswordSchema = useMemo2(
+    () => z2.object({
+      code: z2.string().length(6, t("errors.codeLength")),
+      password: z2.string().min(8, t("errors.passwordLength")),
+      confirmPassword: z2.string()
+    }).refine((data) => data.password === data.confirmPassword, {
+      message: t("errors.passwordsMismatch"),
+      path: ["confirmPassword"]
+    }),
+    [t]
+  );
+  const form = useForm2({
+    resolver: zodResolver2(resetPasswordSchema),
+    defaultValues: {
+      code: "",
+      password: "",
+      confirmPassword: ""
+    }
+  });
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await onSubmit(values);
+  });
+  return /* @__PURE__ */ jsx7(Form2, { ...form, children: /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+    /* @__PURE__ */ jsx7(
+      FormField2,
+      {
+        control: form.control,
+        name: "code",
+        render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+          /* @__PURE__ */ jsx7("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx7(FormLabel2, { children: t("form.codeLabel") }) }),
+          /* @__PURE__ */ jsx7(FormControl2, { children: /* @__PURE__ */ jsx7("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx7(InputOTP, { maxLength: 6, ...field, children: /* @__PURE__ */ jsxs3(InputOTPGroup, { children: [
+            /* @__PURE__ */ jsx7(InputOTPSlot, { index: 0 }),
+            /* @__PURE__ */ jsx7(InputOTPSlot, { index: 1 }),
+            /* @__PURE__ */ jsx7(InputOTPSlot, { index: 2 }),
+            /* @__PURE__ */ jsx7(InputOTPSlot, { index: 3 }),
+            /* @__PURE__ */ jsx7(InputOTPSlot, { index: 4 }),
+            /* @__PURE__ */ jsx7(InputOTPSlot, { index: 5 })
+          ] }) }) }) }),
+          /* @__PURE__ */ jsx7(FormMessage2, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      FormField2,
+      {
+        control: form.control,
+        name: "password",
+        render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+          /* @__PURE__ */ jsx7(FormLabel2, { children: t("form.passwordLabel") }),
+          /* @__PURE__ */ jsx7(FormControl2, { children: /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx7(
+              Input2,
+              {
+                type: showPassword ? "text" : "password",
+                placeholder: t("form.passwordPlaceholder"),
+                ...field
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowPassword(!showPassword),
+                className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                children: showPassword ? /* @__PURE__ */ jsx7(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx7(Eye, { className: "h-4 w-4" })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx7(FormMessage2, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      FormField2,
+      {
+        control: form.control,
+        name: "confirmPassword",
+        render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+          /* @__PURE__ */ jsx7(FormLabel2, { children: t("form.confirmPasswordLabel") }),
+          /* @__PURE__ */ jsx7(FormControl2, { children: /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx7(
+              Input2,
+              {
+                type: showPassword ? "text" : "password",
+                placeholder: t("form.passwordPlaceholder"),
+                ...field
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowPassword(!showPassword),
+                className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                children: showPassword ? /* @__PURE__ */ jsx7(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx7(Eye, { className: "h-4 w-4" })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx7(FormMessage2, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx7(Button3, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("form.submitting") : t("form.submit") })
+  ] }) });
+};
+
+// src/components/pages/reset-password-page.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var ResetPasswordPage = ({
+  verificationId,
+  onNavigate,
+  linkComponent: Link,
+  links,
+  logoImage
+}) => {
+  const t = useTranslations5("Auth.resetPassword");
+  const common = useTranslations5("Common");
+  const { client, refresh } = useAuth();
+  const [isLoading, setIsLoading] = useState5(false);
+  const [error, setError] = useState5(null);
+  const signInLink = links?.signIn || "/auth/sign-in";
+  const forgotPasswordLink = links?.forgotPassword || "/auth/forgot-password";
+  const handleSubmit = async (values) => {
+    if (!verificationId) {
+      setError(t("errors.missingVerificationId"));
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      await client.resetPassword({
+        verificationId,
+        code: values.code,
+        password: values.password
+      });
+      await refresh();
+      onNavigate("/dashboard");
+    } catch (err) {
+      handleError(err, setError, t);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  if (!verificationId) {
+    return /* @__PURE__ */ jsx8(
+      AuthPageLayout,
+      {
+        title: common("invalidLinkTitle"),
+        description: common("invalidLinkDescription"),
+        logoImage,
+        footer: Link ? /* @__PURE__ */ jsx8(
+          Link,
+          {
+            href: forgotPasswordLink,
+            className: "text-primary hover:underline",
+            children: t("footer.requestNew")
+          }
+        ) : /* @__PURE__ */ jsx8(
+          "a",
+          {
+            href: forgotPasswordLink,
+            onClick: (e) => {
+              e.preventDefault();
+              onNavigate(forgotPasswordLink);
+            },
+            className: "text-primary hover:underline",
+            children: t("footer.requestNew")
+          }
+        ),
+        children: /* @__PURE__ */ jsx8("div", {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx8(
+    AuthPageLayout,
+    {
+      title: t("title"),
+      description: t("description"),
+      error,
+      logoImage,
+      footer: Link ? /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between w-full gap-2", children: [
+        /* @__PURE__ */ jsx8(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.backToSignIn") }),
+        /* @__PURE__ */ jsx8(
+          Link,
+          {
+            href: forgotPasswordLink,
+            className: "text-primary hover:underline",
+            children: t("footer.changeAccount")
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between w-full gap-2", children: [
+        /* @__PURE__ */ jsx8(
+          "a",
+          {
+            href: forgotPasswordLink,
+            onClick: (e) => {
+              e.preventDefault();
+              onNavigate(forgotPasswordLink);
+            },
+            className: "text-primary hover:underline",
+            children: t("footer.backToSignIn")
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "a",
+          {
+            href: forgotPasswordLink,
+            onClick: (e) => {
+              e.preventDefault();
+              onNavigate(forgotPasswordLink);
+            },
+            className: "text-primary hover:underline",
+            children: t("footer.changeAccount")
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsx8(
+        ResetPasswordForm,
+        {
+          verificationId,
+          onSubmit: handleSubmit,
+          isLoading,
+          error
+        }
+      )
+    }
+  );
+};
+
+// src/components/pages/sign-in-page.tsx
+import { useTranslations as useTranslations7 } from "next-intl";
+import { useState as useState7 } from "react";
+
+// src/components/sign-in.tsx
+import { zodResolver as zodResolver3 } from "@hookform/resolvers/zod";
+import { Button as Button4 } from "@mesob/ui/components/button";
+import {
+  Form as Form3,
+  FormControl as FormControl3,
+  FormField as FormField3,
+  FormItem as FormItem3,
+  FormLabel as FormLabel3,
+  FormMessage as FormMessage3
+} from "@mesob/ui/components/form";
+import { Input as Input3 } from "@mesob/ui/components/input";
+import { Eye as Eye2, EyeOff as EyeOff2 } from "lucide-react";
+import { useTranslations as useTranslations6 } from "next-intl";
+import { useMemo as useMemo3, useState as useState6 } from "react";
+import { useForm as useForm3 } from "react-hook-form";
+import { z as z3 } from "zod";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var SignIn = ({
+  onSubmit,
+  isLoading = false,
+  identifier = "",
+  step = "identifier",
+  onBack: _onBack
+}) => {
+  const t = useTranslations6("Auth.signIn");
+  const [showPassword, setShowPassword] = useState6(false);
+  const identifierSchema = useMemo3(
+    () => z3.object({
+      account: z3.string().min(1, t("errors.accountRequired")).email(t("errors.invalidEmail"))
+    }),
+    [t]
+  );
+  const passwordSchema = useMemo3(
+    () => z3.object({
+      password: z3.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError"))
+    }),
+    [t]
+  );
+  const identifierForm = useForm3({
+    resolver: zodResolver3(identifierSchema),
+    defaultValues: {
+      account: identifier
+    }
+  });
+  const passwordForm = useForm3({
+    resolver: zodResolver3(passwordSchema),
+    defaultValues: {
+      password: ""
+    }
+  });
+  const handleIdentifierSubmit = identifierForm.handleSubmit(async (values) => {
+    await onSubmit({ account: values.account, password: "" }, "identifier");
+  });
+  const handlePasswordSubmit = passwordForm.handleSubmit(async (values) => {
+    await onSubmit(
+      { account: identifier, password: values.password },
+      "password"
+    );
+  });
+  if (step === "password") {
+    return /* @__PURE__ */ jsx9(Form3, { ...passwordForm, children: /* @__PURE__ */ jsxs5("form", { onSubmit: handlePasswordSubmit, className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx9("p", { className: "text-sm text-muted-foreground mb-2", children: t("form.enterPasswordFor") }),
+        /* @__PURE__ */ jsx9("p", { className: "font-bold", children: identifier })
+      ] }),
+      /* @__PURE__ */ jsx9(
+        FormField3,
+        {
+          control: passwordForm.control,
+          name: "password",
+          render: ({ field }) => /* @__PURE__ */ jsxs5(FormItem3, { children: [
+            /* @__PURE__ */ jsx9(FormLabel3, { children: t("form.passwordLabel") }),
+            /* @__PURE__ */ jsx9(FormControl3, { children: /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx9(
+                Input3,
+                {
+                  type: showPassword ? "text" : "password",
+                  placeholder: t("form.passwordPlaceholder"),
+                  ...field
+                }
+              ),
+              /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowPassword(!showPassword),
+                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                  children: showPassword ? /* @__PURE__ */ jsx9(EyeOff2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx9(Eye2, { className: "h-4 w-4" })
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx9(FormMessage3, {})
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx9(Button4, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("form.submitting") : t("form.submit") })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx9(Form3, { ...identifierForm, children: /* @__PURE__ */ jsxs5("form", { onSubmit: handleIdentifierSubmit, className: "space-y-4", children: [
+    /* @__PURE__ */ jsx9(
+      FormField3,
+      {
+        control: identifierForm.control,
+        name: "account",
+        render: ({ field }) => /* @__PURE__ */ jsxs5(FormItem3, { children: [
+          /* @__PURE__ */ jsx9(FormLabel3, { children: t("form.accountLabel") }),
+          /* @__PURE__ */ jsx9(FormControl3, { children: /* @__PURE__ */ jsx9(
+            Input3,
+            {
+              type: "text",
+              placeholder: t("form.accountPlaceholder"),
+              ...field
+            }
+          ) }),
+          /* @__PURE__ */ jsx9(FormMessage3, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx9(Button4, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("form.submitting") : t("form.continue") })
+  ] }) });
+};
+
+// src/components/pages/sign-in-page.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var isPhone = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
+var SignInPage = ({
+  redirectUrl,
+  onNavigate,
+  linkComponent: Link,
+  links,
+  logoImage
+}) => {
+  const t = useTranslations7("Auth.signIn");
+  const { client, setAuth } = useAuth();
+  const [isLoading, setIsLoading] = useState7(false);
+  const [error, setError] = useState7(null);
+  const [step, setStep] = useState7("identifier");
+  const [identifier, setIdentifier] = useState7("");
+  const defaultRedirect = redirectUrl || "/dashboard";
+  const forgotPasswordLink = links?.forgotPassword || "/auth/forgot-password";
+  const signUpLink = links?.signUp || "/auth/sign-up";
+  const handleSubmit = async (values, currentStep) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      if (currentStep === "identifier") {
+        const checkResult = await client.checkUser({
+          identifier: values.account
+        });
+        if (checkResult.exists) {
+          setIdentifier(values.account);
+          setStep("password");
+        } else {
+          const email = isPhone(values.account) ? "" : values.account;
+          if (email) {
+            onNavigate(`${signUpLink}?email=${encodeURIComponent(email)}`);
+          } else {
+            onNavigate(
+              `${signUpLink}?phone=${encodeURIComponent(values.account)}`
+            );
+          }
+          return;
+        }
+      } else {
+        const res = await client.signInWithPassword({
+          identifier,
+          password: values.password
+        });
+        if ("verificationId" in res && res.verificationId) {
+          const verifyPath = isPhone(identifier) ? `/auth/verify-phone?context=sign-in&verificationId=${res.verificationId}&identifier=${encodeURIComponent(identifier)}` : `/auth/verify-email?verificationId=${res.verificationId}`;
+          onNavigate(verifyPath);
+          return;
+        }
+        if ("user" in res && "session" in res) {
+          setAuth(res);
+        }
+        onNavigate(defaultRedirect);
+      }
+    } catch (err) {
+      handleError(err, setError, t);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleBack = () => {
+    setStep("identifier");
+    setIdentifier("");
+    setError(null);
+  };
+  const isStepPassword = step === "password";
+  return /* @__PURE__ */ jsx10("div", { className: "space-y-4", children: /* @__PURE__ */ jsx10(
+    AuthPageLayout,
+    {
+      title: t("title"),
+      description: isStepPassword ? void 0 : t("description"),
+      error,
+      logoImage,
+      footer: /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          className: "flex items-center justify-center w-full gap-2",
+          style: {
+            justifyContent: isStepPassword ? "space-between" : "center"
+          },
+          children: [
+            isStepPassword && // biome-ignore lint/a11y/useKeyWithClickEvents: change account
+            /* @__PURE__ */ jsx10(
+              "p",
+              {
+                className: "text-primary inline-block cursor-pointer hover:underline",
+                onClick: handleBack,
+                children: t("changeAccount")
+              }
+            ),
+            Link ? /* @__PURE__ */ jsx10(
+              Link,
+              {
+                href: forgotPasswordLink,
+                className: "text-primary inline-block hover:underline",
+                children: t("footer.forgotPassword")
+              }
+            ) : /* @__PURE__ */ jsx10(
+              "a",
+              {
+                href: forgotPasswordLink,
+                className: "text-primary inline-block hover:underline",
+                children: t("footer.forgotPassword")
+              }
+            )
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ jsx10(
+        SignIn,
+        {
+          onSubmit: handleSubmit,
+          isLoading,
+          identifier,
+          step
+        }
+      )
+    }
+  ) });
+};
+
+// src/components/pages/sign-up-page.tsx
+import { useTranslations as useTranslations9 } from "next-intl";
+import { useState as useState9 } from "react";
+
+// src/components/sign-up.tsx
+import { zodResolver as zodResolver4 } from "@hookform/resolvers/zod";
+import { Button as Button5 } from "@mesob/ui/components/button";
+import {
+  Form as Form4,
+  FormControl as FormControl4,
+  FormField as FormField4,
+  FormItem as FormItem4,
+  FormLabel as FormLabel4,
+  FormMessage as FormMessage4
+} from "@mesob/ui/components/form";
+import { Input as Input4 } from "@mesob/ui/components/input";
+import { Eye as Eye3, EyeOff as EyeOff3 } from "lucide-react";
+import { useTranslations as useTranslations8 } from "next-intl";
+import { useEffect as useEffect3, useMemo as useMemo4, useState as useState8 } from "react";
+import { useForm as useForm4 } from "react-hook-form";
+import { z as z4 } from "zod";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var isPhone2 = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
+var SignUp = ({
+  onSubmit,
+  isLoading = false,
+  initialIdentifier
+}) => {
+  const t = useTranslations8("Auth.signUp");
+  const hasInitialIdentifier = !!initialIdentifier;
+  const [showPassword, setShowPassword] = useState8(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState8(false);
+  const signUpSchema = useMemo4(
+    () => z4.object({
+      fullName: z4.string().min(1, t("errors.fullNameRequired")),
+      identifier: z4.string().min(1, t("errors.contactRequired")).refine(
+        (val) => {
+          if (!val) {
+            return false;
+          }
+          return val.includes("@") || isPhone2(val);
+        },
+        {
+          message: t("errors.invalidEmailOrPhone")
+        }
+      ),
+      password: z4.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError")),
+      confirmPassword: z4.string()
+    }).refine((data) => data.password === data.confirmPassword, {
+      message: t("errors.passwordsMismatch"),
+      path: ["confirmPassword"]
+    }),
+    [t]
+  );
+  const form = useForm4({
+    resolver: zodResolver4(signUpSchema),
+    defaultValues: {
+      fullName: "",
+      identifier: initialIdentifier || "",
+      password: "",
+      confirmPassword: ""
+    }
+  });
+  useEffect3(() => {
+    if (initialIdentifier) {
+      form.setValue("identifier", initialIdentifier);
+    }
+  }, [initialIdentifier, form]);
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await onSubmit(values);
+  });
+  const getIdentifierLabel = () => {
+    if (!hasInitialIdentifier) {
+      return t("form.accountLabel") || "Email/Phone";
+    }
+    if (initialIdentifier?.includes("@")) {
+      return t("form.emailLabel");
+    }
+    return t("form.phoneLabel");
+  };
+  const identifierLabel = getIdentifierLabel();
+  return /* @__PURE__ */ jsx11(Form4, { ...form, children: /* @__PURE__ */ jsxs7("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+    /* @__PURE__ */ jsx11(
+      FormField4,
+      {
+        control: form.control,
+        name: "fullName",
+        render: ({ field }) => /* @__PURE__ */ jsxs7(FormItem4, { children: [
+          /* @__PURE__ */ jsx11(FormLabel4, { children: t("form.fullNameLabel") }),
+          /* @__PURE__ */ jsx11(FormControl4, { children: /* @__PURE__ */ jsx11(Input4, { placeholder: t("form.fullNamePlaceholder"), ...field }) }),
+          /* @__PURE__ */ jsx11(FormMessage4, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      FormField4,
+      {
+        control: form.control,
+        name: "identifier",
+        render: ({ field }) => /* @__PURE__ */ jsxs7(FormItem4, { children: [
+          /* @__PURE__ */ jsx11(FormLabel4, { className: hasInitialIdentifier ? "block" : void 0, children: identifierLabel }),
+          /* @__PURE__ */ jsx11(FormControl4, { children: /* @__PURE__ */ jsx11(
+            Input4,
+            {
+              type: field.value.includes("@") ? "email" : "tel",
+              placeholder: hasInitialIdentifier ? void 0 : t("form.accountPlaceholder") || "Email or phone number",
+              ...field,
+              disabled: hasInitialIdentifier
+            }
+          ) }),
+          /* @__PURE__ */ jsx11(FormMessage4, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      FormField4,
+      {
+        control: form.control,
+        name: "password",
+        render: ({ field }) => /* @__PURE__ */ jsxs7(FormItem4, { children: [
+          /* @__PURE__ */ jsx11(FormLabel4, { children: t("form.passwordLabel") }),
+          /* @__PURE__ */ jsx11(FormControl4, { children: /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx11(
+              Input4,
+              {
+                type: showPassword ? "text" : "password",
+                placeholder: t("form.passwordPlaceholder"),
+                ...field
+              }
+            ),
+            /* @__PURE__ */ jsx11(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowPassword(!showPassword),
+                className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                children: showPassword ? /* @__PURE__ */ jsx11(EyeOff3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx11(Eye3, { className: "h-4 w-4" })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx11(FormMessage4, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      FormField4,
+      {
+        control: form.control,
+        name: "confirmPassword",
+        render: ({ field }) => /* @__PURE__ */ jsxs7(FormItem4, { children: [
+          /* @__PURE__ */ jsx11(FormLabel4, { children: t("form.confirmPasswordLabel") }),
+          /* @__PURE__ */ jsx11(FormControl4, { children: /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx11(
+              Input4,
+              {
+                type: showConfirmPassword ? "text" : "password",
+                placeholder: t("form.passwordPlaceholder"),
+                ...field
+              }
+            ),
+            /* @__PURE__ */ jsx11(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowConfirmPassword(!showConfirmPassword),
+                className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                children: showConfirmPassword ? /* @__PURE__ */ jsx11(EyeOff3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx11(Eye3, { className: "h-4 w-4" })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx11(FormMessage4, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx11(Button5, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("form.submitting") : t("form.submit") })
+  ] }) });
+};
+
+// src/components/pages/sign-up-page.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var isPhone3 = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
+var SignUpPage = ({
+  onNavigate,
+  linkComponent: Link,
+  links,
+  initialIdentifier,
+  logoImage
+}) => {
+  const t = useTranslations9("Auth.signUp");
+  const { client, setAuth } = useAuth();
+  const [isLoading, setIsLoading] = useState9(false);
+  const [error, setError] = useState9(null);
+  const signInLink = links?.signIn || "/auth/sign-in";
+  const handleSubmit = async (values) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const identifier = values.identifier;
+      const usingPhone = isPhone3(identifier);
+      const res = usingPhone ? await client.signUpWithPhone({
+        phone: identifier,
+        password: values.password,
+        fullName: values.fullName,
+        handle: values.handle
+      }) : await client.signUpWithEmail({
+        email: identifier,
+        password: values.password,
+        fullName: values.fullName,
+        handle: values.handle
+      });
+      if ("verificationId" in res && res.verificationId) {
+        if (usingPhone) {
+          onNavigate(
+            `/auth/verify-phone?context=sign-up&verificationId=${res.verificationId}&phone=${encodeURIComponent(identifier)}`
+          );
+        } else {
+          onNavigate(
+            `/auth/verify-email?verificationId=${res.verificationId}&email=${encodeURIComponent(identifier)}`
+          );
+        }
+        return;
+      }
+      if ("user" in res && "session" in res) {
+        setAuth(res);
+      }
+      onNavigate("/dashboard");
+    } catch (err) {
+      handleError(err, setError, t);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx12(
+    AuthPageLayout,
+    {
+      title: t("title"),
+      description: t("description"),
+      error,
+      logoImage,
+      footer: /* @__PURE__ */ jsxs8("p", { children: [
+        t("footer.hasAccount"),
+        " ",
+        Link ? /* @__PURE__ */ jsx12(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.signInCta") }) : /* @__PURE__ */ jsx12(
+          "a",
+          {
+            href: signInLink,
+            onClick: (e) => {
+              e.preventDefault();
+              onNavigate(signInLink);
+            },
+            className: "text-primary hover:underline",
+            children: t("footer.signInCta")
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsx12(
+        SignUp,
+        {
+          onSubmit: handleSubmit,
+          isLoading,
+          initialIdentifier
+        }
+      )
+    }
+  );
+};
+
+// src/components/pages/verify-email-page.tsx
+import { useTranslations as useTranslations11 } from "next-intl";
+import { useState as useState10 } from "react";
+
+// src/components/verification-form.tsx
+import { zodResolver as zodResolver5 } from "@hookform/resolvers/zod";
+import { Button as Button6 } from "@mesob/ui/components/button";
+import {
+  Form as Form5,
+  FormControl as FormControl5,
+  FormField as FormField5,
+  FormItem as FormItem5,
+  FormMessage as FormMessage5
+} from "@mesob/ui/components/form";
+import {
+  InputOTP as InputOTP2,
+  InputOTPGroup as InputOTPGroup2,
+  InputOTPSlot as InputOTPSlot2
+} from "@mesob/ui/components/input-otp";
+import { useTranslations as useTranslations10 } from "next-intl";
+import { useMemo as useMemo5 } from "react";
+import { useForm as useForm5 } from "react-hook-form";
+import { z as z5 } from "zod";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var VerificationForm = ({
+  onSubmit,
+  onResend,
+  isLoading = false
+}) => {
+  const t = useTranslations10("Auth.verification");
+  const verificationSchema = useMemo5(
+    () => z5.object({
+      code: z5.string().length(6, t("form.codeLength"))
+    }),
+    [t]
+  );
+  const form = useForm5({
+    resolver: zodResolver5(verificationSchema),
+    defaultValues: {
+      code: ""
+    }
+  });
+  const handleComplete = async (value) => {
+    const valid = await form.trigger("code");
+    if (valid) {
+      await onSubmit({ code: value });
+    }
+  };
+  return /* @__PURE__ */ jsx13(Form5, { ...form, children: /* @__PURE__ */ jsxs9("form", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx13(
+      FormField5,
+      {
+        control: form.control,
+        name: "code",
+        render: ({ field }) => /* @__PURE__ */ jsxs9(FormItem5, { children: [
+          /* @__PURE__ */ jsx13(FormControl5, { children: /* @__PURE__ */ jsx13("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx13(
+            InputOTP2,
+            {
+              maxLength: 6,
+              value: field.value,
+              onChange: (value) => {
+                field.onChange(value);
+                if (value.length === 6) {
+                  handleComplete(value);
+                }
+              },
+              disabled: isLoading,
+              children: /* @__PURE__ */ jsxs9(InputOTPGroup2, { children: [
+                /* @__PURE__ */ jsx13(InputOTPSlot2, { index: 0 }),
+                /* @__PURE__ */ jsx13(InputOTPSlot2, { index: 1 }),
+                /* @__PURE__ */ jsx13(InputOTPSlot2, { index: 2 }),
+                /* @__PURE__ */ jsx13(InputOTPSlot2, { index: 3 }),
+                /* @__PURE__ */ jsx13(InputOTPSlot2, { index: 4 }),
+                /* @__PURE__ */ jsx13(InputOTPSlot2, { index: 5 })
+              ] })
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx13(FormMessage5, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs9("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx13(Countdown, { onResend, resending: isLoading }),
+      /* @__PURE__ */ jsx13(
+        Button6,
+        {
+          type: "button",
+          onClick: () => {
+            form.handleSubmit(async (values) => {
+              await onSubmit(values);
+            })();
+          },
+          disabled: isLoading || form.watch("code").length !== 6,
+          children: t("form.confirm")
+        }
+      )
+    ] })
+  ] }) });
+};
+
+// src/components/pages/verify-email-page.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var VerifyEmailPage = ({
+  verificationId,
+  onNavigate,
+  linkComponent: Link,
+  links,
+  email,
+  logoImage
+}) => {
+  const t = useTranslations11("Auth.verification");
+  const common = useTranslations11("Common");
+  const footer = useTranslations11("Auth.forgotPassword.footer");
+  const { client, setAuth } = useAuth();
+  const [isLoading, setIsLoading] = useState10(false);
+  const [error, setError] = useState10(null);
+  const signInLink = links?.signIn || "/auth/sign-in";
+  const handleSubmit = async (values) => {
+    if (!verificationId) {
+      setError(t("errors.missingVerificationId"));
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await client.verifyEmail({
+        verificationId,
+        code: values.code
+      });
+      if ("user" in res && "session" in res) {
+        setAuth(res);
+      }
+      onNavigate("/dashboard");
+    } catch (err) {
+      handleError(err, setError, t);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleResend = async () => {
+    setError(null);
+    try {
+      const res = await client.requestEmailVerification({ email });
+      if (res.verificationId) {
+        onNavigate(
+          `/auth/verify-email?verificationId=${res.verificationId}&email=${encodeURIComponent(email)}`
+        );
+      } else {
+        setError(t("errors.resendFailed"));
+      }
+    } catch (err) {
+      handleError(err, setError, t);
+    }
+  };
+  if (!verificationId) {
+    return /* @__PURE__ */ jsx14(
+      AuthPageLayout,
+      {
+        title: common("invalidLinkTitle"),
+        description: common("invalidLinkDescription"),
+        footer: Link ? /* @__PURE__ */ jsx14(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx14(
+          "a",
+          {
+            href: signInLink,
+            onClick: (e) => {
+              e.preventDefault();
+              onNavigate(signInLink);
+            },
+            className: "text-primary hover:underline",
+            children: footer("backToSignIn")
+          }
+        ),
+        children: /* @__PURE__ */ jsx14("div", {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx14(
+    AuthPageLayout,
+    {
+      title: t("email.title"),
+      description: t("email.description"),
+      error,
+      logoImage,
+      footer: Link ? /* @__PURE__ */ jsx14(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx14(
+        "a",
+        {
+          href: signInLink,
+          onClick: (e) => {
+            e.preventDefault();
+            onNavigate(signInLink);
+          },
+          className: "text-primary hover:underline",
+          children: footer("backToSignIn")
+        }
+      ),
+      children: /* @__PURE__ */ jsx14(
+        VerificationForm,
+        {
+          verificationId,
+          onSubmit: handleSubmit,
+          onResend: handleResend,
+          isLoading,
+          error
+        }
+      )
+    }
+  );
+};
+
+// src/components/pages/verify-phone-page.tsx
+import { useTranslations as useTranslations12 } from "next-intl";
+import { useState as useState11 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var VerifyPhonePage = ({
+  verificationId,
+  context,
+  phone = "",
+  onNavigate,
+  linkComponent: Link,
+  links,
+  logoImage
+}) => {
+  const t = useTranslations12("Auth.verification");
+  const common = useTranslations12("Common");
+  const footer = useTranslations12("Auth.forgotPassword.footer");
+  const { client, refresh, setAuth } = useAuth();
+  const [isLoading, setIsLoading] = useState11(false);
+  const [error, setError] = useState11(null);
+  const signInLink = links?.signIn || "/auth/sign-in";
+  const handleSubmit = async (values) => {
+    if (!verificationId) {
+      setError(t("errors.fallback"));
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await client.verifyPhoneOtp({
+        verificationId,
+        code: values.code,
+        context
+      });
+      if (res && "user" in res && "session" in res && res.session) {
+        setAuth(res);
+        onNavigate("/dashboard");
+        return;
+      }
+      await refresh();
+      onNavigate("/dashboard");
+    } catch (err) {
+      handleError(err, setError, t);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleResend = async () => {
+    setError(null);
+    try {
+      const targetPhone = context === "sign-up" ? phone : null;
+      if (!targetPhone) {
+        setError(t("phone.missingPhone"));
+        return;
+      }
+      const res = await client.requestPhoneOtp({ phone: targetPhone, context });
+      if (res && "verificationId" in res && res.verificationId) {
+        onNavigate(
+          `/auth/verify-phone?context=${context}&verificationId=${res.verificationId}&phone=${targetPhone}`
+        );
+        return;
+      }
+      setError(t("phone.resendFailed"));
+    } catch (err) {
+      handleError(err, setError, t);
+    }
+  };
+  if (!verificationId) {
+    return /* @__PURE__ */ jsx15(
+      AuthPageLayout,
+      {
+        title: common("invalidLinkTitle"),
+        description: common("invalidLinkDescription"),
+        footer: Link ? /* @__PURE__ */ jsx15(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx15(
+          "a",
+          {
+            href: signInLink,
+            onClick: (e) => {
+              e.preventDefault();
+              onNavigate(signInLink);
+            },
+            className: "text-primary hover:underline",
+            children: footer("backToSignIn")
+          }
+        ),
+        children: /* @__PURE__ */ jsx15("div", {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx15(
+    AuthPageLayout,
+    {
+      title: t("phone.title"),
+      description: t("phone.description", {
+        target: phone || t("phone.missingPhone")
+      }),
+      error,
+      logoImage,
+      footer: Link ? /* @__PURE__ */ jsx15(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx15(
+        "a",
+        {
+          href: signInLink,
+          onClick: (e) => {
+            e.preventDefault();
+            onNavigate(signInLink);
+          },
+          className: "text-primary hover:underline",
+          children: footer("backToSignIn")
+        }
+      ),
+      children: /* @__PURE__ */ jsx15(
+        VerificationForm,
+        {
+          verificationId,
+          onSubmit: handleSubmit,
+          onResend: handleResend,
+          isLoading,
+          error
+        }
+      )
+    }
+  );
+};
+
+// src/factory.ts
+var createAuthClient = (config) => {
+  const client = new AuthClient(config);
+  return {
+    signUpWithEmail: client.signUpWithEmail.bind(client),
+    signUpWithPhone: client.signUpWithPhone.bind(client),
+    signInWithPassword: client.signInWithPassword.bind(client),
+    signOut: client.signOut.bind(client),
+    requestEmailVerification: client.requestEmailVerification.bind(client),
+    verifyEmail: client.verifyEmail.bind(client),
+    resendVerification: client.resendVerification.bind(client),
+    requestPhoneOtp: client.requestPhoneOtp.bind(client),
+    verifyPhoneOtp: client.verifyPhoneOtp.bind(client),
+    forgotPassword: client.forgotPassword.bind(client),
+    resetPassword: client.resetPassword.bind(client),
+    changePassword: client.changePassword.bind(client),
+    getSession: client.getSession.bind(client),
+    useSession: () => {
+      throw new Error("useSession must be used within AuthProvider");
+    }
+  };
+};
+
+// src/hooks/use-session.ts
+var useSession = () => {
+  const { user, session, loading, error, refresh } = useAuth();
+  return {
+    user,
+    session,
+    isLoading: loading,
+    isAuthenticated: !!user && !!session,
+    error,
+    refresh
+  };
+};
+export {
+  AuthCard,
+  AuthClient,
+  AuthPageLayout,
+  AuthProvider,
+  Countdown,
+  ForgotPassword,
+  ForgotPasswordPage,
+  ResetPasswordForm,
+  ResetPasswordPage,
+  SignIn,
+  SignInPage,
+  SignUp,
+  SignUpPage,
+  VerificationForm,
+  VerifyEmailPage,
+  VerifyPhonePage,
+  createAuthClient,
+  useAuth,
+  useSession
+};
+//# sourceMappingURL=index.js.map