@mesob/auth-react 0.0.3 → 0.0.4

package/dist/index.js

@@ -145,6 +145,12 @@ var AuthClient = class {
       body: JSON.stringify(data)
     });
   }
+  verifyPassword(data) {
+    return this.request("/password/verify", {
+      method: "POST",
+      body: JSON.stringify(data)
+    });
+  }
   changePassword(data) {
     return this.request("/password/change", {
       method: "POST",
@@ -156,16 +162,47 @@ var AuthClient = class {
       method: "GET"
     });
   }
+  getPendingAccountChange() {
+    return this.request(
+      "/account-change/pending",
+      {
+        method: "GET"
+      }
+    );
+  }
+  updateProfile(data) {
+    return this.request("/profile", {
+      method: "PUT",
+      body: JSON.stringify(data)
+    });
+  }
+  updateEmail(data) {
+    return this.request("/profile/email", {
+      method: "PUT",
+      body: JSON.stringify(data)
+    });
+  }
+  updatePhone(data) {
+    return this.request("/profile/phone", {
+      method: "PUT",
+      body: JSON.stringify(data)
+    });
+  }
 };
 
-// src/components/auth-card.tsx
+// src/components/auth/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 }) }) });
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-screen p-4 items-center justify-center", 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";
+// src/components/auth/auth-page-layout.tsx
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle
+} from "@mesob/ui/components/alert";
+import { IconAlertCircle } from "@tabler/icons-react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var AuthPageLayout = ({
   title,
@@ -175,6 +212,10 @@ var AuthPageLayout = ({
   footer,
   logoImage
 }) => {
+  const errorContent = error ? (
+    // biome-ignore lint/style/noNestedTernary: <explanation>
+    typeof error === "string" ? { title: "Error", description: error } : error
+  ) : null;
   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: [
@@ -182,16 +223,21 @@ var AuthPageLayout = ({
       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 }) }),
+    errorContent && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
+      /* @__PURE__ */ jsx2(IconAlertCircle, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx2(AlertTitle, { children: errorContent.title }),
+      /* @__PURE__ */ jsx2(AlertDescription, { children: errorContent.description })
+    ] }),
     /* @__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
+// src/components/auth/countdown.tsx
 import { Button } from "@mesob/ui/components/button";
+import { Spinner } from "@mesob/ui/components/spinner";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Countdown = ({
   initialSeconds = 60,
   onResend,
@@ -228,18 +274,21 @@ var Countdown = ({
   if (seconds > 0) {
     return /* @__PURE__ */ jsx3(Button, { variant: "ghost", disabled: true, children: t("resendIn", { seconds }) });
   }
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2(
     Button,
     {
       variant: "ghost",
       onClick: handleResend,
       disabled: isResending || resending,
-      children: isResending || resending ? t("resending") : t("resend")
+      children: [
+        isResending || resending && /* @__PURE__ */ jsx3(Spinner, {}),
+        t("resend")
+      ]
     }
   );
 };
 
-// src/components/forgot-password.tsx
+// src/components/auth/forgot-password.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button as Button2 } from "@mesob/ui/components/button";
 import {
@@ -251,15 +300,15 @@ import {
   FormMessage
 } from "@mesob/ui/components/form";
 import { Input } from "@mesob/ui/components/input";
+import { Spinner as Spinner2 } from "@mesob/ui/components/spinner";
 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";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var ForgotPassword = ({
   onSubmit,
-  isLoading = false,
-  onBack
+  isLoading = false
 }) => {
   const t = useTranslations2("Auth.forgotPassword");
   const forgotPasswordSchema = useMemo(
@@ -277,13 +326,13 @@ var ForgotPassword = ({
   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: [
+  return /* @__PURE__ */ jsx4(Form, { ...form, children: /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className: "space-y-5", children: [
     /* @__PURE__ */ jsx4(
       FormField,
       {
         control: form.control,
         name: "account",
-        render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
+        render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem, { children: [
           /* @__PURE__ */ jsx4(FormLabel, { children: t("form.accountLabel") }),
           /* @__PURE__ */ jsx4(FormControl, { children: /* @__PURE__ */ jsx4(
             Input,
@@ -297,11 +346,14 @@ var ForgotPassword = ({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx4(Button2, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("form.submitting") : t("form.submit") })
+    /* @__PURE__ */ jsxs3(Button2, { type: "submit", className: "w-full", disabled: isLoading, children: [
+      isLoading && /* @__PURE__ */ jsx4(Spinner2, {}),
+      isLoading ? t("form.submitting") : t("form.submit")
+    ] })
   ] }) });
 };
 
-// src/components/pages/forgot-password-page.tsx
+// src/components/auth/pages/forgot-password-page.tsx
 import { useTranslations as useTranslations3 } from "next-intl";
 import { useState as useState3 } from "react";
 
@@ -371,39 +423,89 @@ var AuthProvider = ({ client, 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"
-];
+var AUTH_ERROR_MAPPING = {
+  USER_NOT_FOUND: {
+    title: "Account Not Found",
+    description: "We could not find an account with that identifier. Please check your spelling or sign up."
+  },
+  INVALID_PASSWORD: {
+    title: "Invalid Password",
+    description: "The password you entered is incorrect. Please try again."
+  },
+  USER_EXISTS: {
+    title: "Account Already Exists",
+    description: "An account with this identifier already exists. Please sign in instead."
+  },
+  VERIFICATION_EXPIRED: {
+    title: "Verification Expired",
+    description: "The verification code or link has expired. Please request a new one."
+  },
+  VERIFICATION_MISMATCH: {
+    title: "Invalid Code",
+    description: "The verification code you entered is invalid. Please double-check and try again."
+  },
+  VERIFICATION_NOT_FOUND: {
+    title: "Verification Not Found",
+    description: "We could not find a pending verification request. Please restart the process."
+  },
+  TOO_MANY_ATTEMPTS: {
+    title: "Too Many Attempts",
+    description: "You have made too many requests recently. Please wait a moment before trying again."
+  },
+  REQUIRES_VERIFICATION: {
+    title: "Verification Required",
+    description: "You need to verify your account before you can continue. Please check your email or phone."
+  },
+  UNAUTHORIZED: {
+    title: "Unauthorized",
+    description: "You are not authorized to perform this action. Please sign in again."
+  },
+  ACCESS_DENIED: {
+    title: "Access Denied",
+    description: "You do not have permission to access this resource. Please contact support if you believe this is an error."
+  },
+  HAS_NO_PASSWORD: {
+    title: "No Password Set",
+    description: "Your account does not have a password set (e.g. social login). Please sign in with your provider or reset your password."
+  }
+};
+var validCodes = Object.keys(AUTH_ERROR_MAPPING);
 
 // 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()}`;
+    let errorCode = "";
+    if (err.code && validCodes.includes(err.code)) {
+      errorCode = err.code;
     } else if (err.message) {
       const messageUpper = err.message.toUpperCase().trim();
       if (validCodes.includes(messageUpper)) {
-        errorKey = `errors.${messageUpper.toLowerCase()}`;
+        errorCode = messageUpper;
       }
     }
-    setError(t(errorKey, { defaultValue: err.message }));
+    if (errorCode && AUTH_ERROR_MAPPING[errorCode]) {
+      const mapping = AUTH_ERROR_MAPPING[errorCode];
+      setError({
+        title: mapping.title,
+        description: mapping.description
+      });
+      return;
+    }
+    setError({
+      title: t("errors.fallback"),
+      // or 'Error'
+      description: err.message || t("errors.fallback")
+    });
   } else {
-    setError(err instanceof Error ? err.message : t("errors.fallback"));
+    const message = err instanceof Error ? err.message : t("errors.fallback");
+    setError({
+      title: "Error",
+      description: message
+    });
   }
 };
 
-// src/components/pages/forgot-password-page.tsx
+// src/components/auth/pages/forgot-password-page.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
 var ForgotPasswordPage = ({
   onNavigate,
@@ -468,11 +570,11 @@ var ForgotPasswordPage = ({
   );
 };
 
-// src/components/pages/reset-password-page.tsx
+// src/components/auth/pages/reset-password-page.tsx
 import { useTranslations as useTranslations5 } from "next-intl";
 import { useState as useState5 } from "react";
 
-// src/components/reset-password-form.tsx
+// src/components/auth/reset-password-form.tsx
 import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
 import { Button as Button3 } from "@mesob/ui/components/button";
 import {
@@ -489,17 +591,16 @@ import {
   InputOTPGroup,
   InputOTPSlot
 } from "@mesob/ui/components/input-otp";
-import { Eye, EyeOff } from "lucide-react";
+import { Spinner as Spinner3 } from "@mesob/ui/components/spinner";
+import { IconEye, IconEyeOff } from "@tabler/icons-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";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var ResetPasswordForm = ({
-  verificationId,
   onSubmit,
-  isLoading = false,
-  error
+  isLoading = false
 }) => {
   const t = useTranslations4("Auth.resetPassword");
   const [showPassword, setShowPassword] = useState4(false);
@@ -525,21 +626,21 @@ var ResetPasswordForm = ({
   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: [
+  return /* @__PURE__ */ jsx7(Form2, { ...form, children: /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
     /* @__PURE__ */ jsx7(
       FormField2,
       {
         control: form.control,
         name: "code",
-        render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+        render: ({ field }) => /* @__PURE__ */ jsxs4(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(FormControl2, { children: /* @__PURE__ */ jsx7("div", { className: "flex mt-2 justify-center", children: /* @__PURE__ */ jsx7(InputOTP, { maxLength: 6, ...field, containerClassName: "gap-4", children: /* @__PURE__ */ jsxs4(InputOTPGroup, { className: "gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl", children: [
+            /* @__PURE__ */ jsx7(InputOTPSlot, { className: "h-12", index: 0 }),
+            /* @__PURE__ */ jsx7(InputOTPSlot, { className: "h-12", index: 1 }),
+            /* @__PURE__ */ jsx7(InputOTPSlot, { className: "h-12", index: 2 }),
+            /* @__PURE__ */ jsx7(InputOTPSlot, { className: "h-12", index: 3 }),
+            /* @__PURE__ */ jsx7(InputOTPSlot, { className: "h-12", index: 4 }),
+            /* @__PURE__ */ jsx7(InputOTPSlot, { className: "h-12", index: 5 })
           ] }) }) }) }),
           /* @__PURE__ */ jsx7(FormMessage2, {})
         ] })
@@ -550,9 +651,9 @@ var ResetPasswordForm = ({
       {
         control: form.control,
         name: "password",
-        render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+        render: ({ field }) => /* @__PURE__ */ jsxs4(FormItem2, { children: [
           /* @__PURE__ */ jsx7(FormLabel2, { children: t("form.passwordLabel") }),
-          /* @__PURE__ */ jsx7(FormControl2, { children: /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx7(FormControl2, { children: /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
             /* @__PURE__ */ jsx7(
               Input2,
               {
@@ -567,7 +668,7 @@ var ResetPasswordForm = ({
                 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" })
+                children: showPassword ? /* @__PURE__ */ jsx7(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx7(IconEye, { className: "h-4 w-4" })
               }
             )
           ] }) }),
@@ -580,9 +681,9 @@ var ResetPasswordForm = ({
       {
         control: form.control,
         name: "confirmPassword",
-        render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem2, { children: [
+        render: ({ field }) => /* @__PURE__ */ jsxs4(FormItem2, { children: [
           /* @__PURE__ */ jsx7(FormLabel2, { children: t("form.confirmPasswordLabel") }),
-          /* @__PURE__ */ jsx7(FormControl2, { children: /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx7(FormControl2, { children: /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
             /* @__PURE__ */ jsx7(
               Input2,
               {
@@ -597,7 +698,7 @@ var ResetPasswordForm = ({
                 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" })
+                children: showPassword ? /* @__PURE__ */ jsx7(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx7(IconEye, { className: "h-4 w-4" })
               }
             )
           ] }) }),
@@ -605,18 +706,22 @@ var ResetPasswordForm = ({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx7(Button3, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("form.submitting") : t("form.submit") })
+    /* @__PURE__ */ jsxs4(Button3, { type: "submit", className: "w-full", disabled: isLoading, children: [
+      isLoading && /* @__PURE__ */ jsx7(Spinner3, {}),
+      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";
+// src/components/auth/pages/reset-password-page.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var ResetPasswordPage = ({
   verificationId,
   onNavigate,
   linkComponent: Link,
   links,
-  logoImage
+  logoImage,
+  redirectUrl
 }) => {
   const t = useTranslations5("Auth.resetPassword");
   const common = useTranslations5("Common");
@@ -627,7 +732,10 @@ var ResetPasswordPage = ({
   const forgotPasswordLink = links?.forgotPassword || "/auth/forgot-password";
   const handleSubmit = async (values) => {
     if (!verificationId) {
-      setError(t("errors.missingVerificationId"));
+      setError({
+        title: t("errors.fallback"),
+        description: t("errors.missingVerificationId")
+      });
       return;
     }
     setIsLoading(true);
@@ -639,7 +747,7 @@ var ResetPasswordPage = ({
         password: values.password
       });
       await refresh();
-      onNavigate("/dashboard");
+      onNavigate(redirectUrl || "/");
     } catch (err) {
       handleError(err, setError, t);
     } finally {
@@ -683,7 +791,7 @@ var ResetPasswordPage = ({
       description: t("description"),
       error,
       logoImage,
-      footer: Link ? /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between w-full gap-2", children: [
+      footer: Link ? /* @__PURE__ */ jsxs5("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,
@@ -693,7 +801,7 @@ var ResetPasswordPage = ({
             children: t("footer.changeAccount")
           }
         )
-      ] }) : /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between w-full gap-2", children: [
+      ] }) : /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between w-full gap-2", children: [
         /* @__PURE__ */ jsx8(
           "a",
           {
@@ -732,11 +840,11 @@ var ResetPasswordPage = ({
   );
 };
 
-// src/components/pages/sign-in-page.tsx
+// src/components/auth/pages/sign-in-page.tsx
 import { useTranslations as useTranslations7 } from "next-intl";
 import { useState as useState7 } from "react";
 
-// src/components/sign-in.tsx
+// src/components/auth/sign-in.tsx
 import { zodResolver as zodResolver3 } from "@hookform/resolvers/zod";
 import { Button as Button4 } from "@mesob/ui/components/button";
 import {
@@ -748,12 +856,33 @@ import {
   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 { Spinner as Spinner4 } from "@mesob/ui/components/spinner";
+import { IconEye as IconEye2, IconEyeOff as IconEyeOff2 } from "@tabler/icons-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";
+
+// src/utils/normalize-phone.ts
+function normalizePhone(phone) {
+  const cleaned = phone.trim().replace(/\s/g, "");
+  if (cleaned.startsWith("+2519")) {
+    return cleaned;
+  }
+  if (cleaned.startsWith("2519")) {
+    return `+${cleaned}`;
+  }
+  if (cleaned.startsWith("09")) {
+    return `+251${cleaned.slice(1)}`;
+  }
+  if (cleaned.startsWith("9") && cleaned.length === 9) {
+    return `+251${cleaned}`;
+  }
+  return cleaned;
+}
+
+// src/components/auth/sign-in.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var SignIn = ({
   onSubmit,
   isLoading = false,
@@ -765,7 +894,17 @@ var SignIn = ({
   const [showPassword, setShowPassword] = useState6(false);
   const identifierSchema = useMemo3(
     () => z3.object({
-      account: z3.string().min(1, t("errors.accountRequired")).email(t("errors.invalidEmail"))
+      account: z3.string().trim().min(1, { message: t("errors.requiredField") }).refine(
+        (val) => {
+          const isEmail = z3.string().email().safeParse(val).success;
+          const phoneRegex = /^(\+2519|2519|09)\d{8}$/;
+          const isPhone4 = phoneRegex.test(val);
+          return isEmail || isPhone4;
+        },
+        {
+          message: t("errors.invalidEmailOrPhone")
+        }
+      )
     }),
     [t]
   );
@@ -788,7 +927,9 @@ var SignIn = ({
     }
   });
   const handleIdentifierSubmit = identifierForm.handleSubmit(async (values) => {
-    await onSubmit({ account: values.account, password: "" }, "identifier");
+    const phoneRegex = /^(\+2519|2519|09)\d{8}$/;
+    const normalizedAccount = phoneRegex.test(values.account) ? normalizePhone(values.account) : values.account;
+    await onSubmit({ account: normalizedAccount, password: "" }, "identifier");
   });
   const handlePasswordSubmit = passwordForm.handleSubmit(async (values) => {
     await onSubmit(
@@ -797,8 +938,8 @@ var SignIn = ({
     );
   });
   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: [
+    return /* @__PURE__ */ jsx9(Form3, { ...passwordForm, children: /* @__PURE__ */ jsxs6("form", { onSubmit: handlePasswordSubmit, className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs6("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 })
       ] }),
@@ -807,14 +948,15 @@ var SignIn = ({
         {
           control: passwordForm.control,
           name: "password",
-          render: ({ field }) => /* @__PURE__ */ jsxs5(FormItem3, { children: [
+          render: ({ field }) => /* @__PURE__ */ jsxs6(FormItem3, { children: [
             /* @__PURE__ */ jsx9(FormLabel3, { children: t("form.passwordLabel") }),
-            /* @__PURE__ */ jsx9(FormControl3, { children: /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx9(FormControl3, { children: /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
               /* @__PURE__ */ jsx9(
                 Input3,
                 {
                   type: showPassword ? "text" : "password",
                   placeholder: t("form.passwordPlaceholder"),
+                  autoComplete: "current-password",
                   ...field
                 }
               ),
@@ -824,7 +966,7 @@ var SignIn = ({
                   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" })
+                  children: showPassword ? /* @__PURE__ */ jsx9(IconEyeOff2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx9(IconEye2, { className: "h-4 w-4" })
                 }
               )
             ] }) }),
@@ -835,13 +977,13 @@ var SignIn = ({
       /* @__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: [
+  return /* @__PURE__ */ jsx9(Form3, { ...identifierForm, children: /* @__PURE__ */ jsxs6("form", { onSubmit: handleIdentifierSubmit, className: "space-y-4", children: [
     /* @__PURE__ */ jsx9(
       FormField3,
       {
         control: identifierForm.control,
         name: "account",
-        render: ({ field }) => /* @__PURE__ */ jsxs5(FormItem3, { children: [
+        render: ({ field }) => /* @__PURE__ */ jsxs6(FormItem3, { children: [
           /* @__PURE__ */ jsx9(FormLabel3, { children: t("form.accountLabel") }),
           /* @__PURE__ */ jsx9(FormControl3, { children: /* @__PURE__ */ jsx9(
             Input3,
@@ -855,12 +997,15 @@ var SignIn = ({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx9(Button4, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("form.submitting") : t("form.continue") })
+    /* @__PURE__ */ jsxs6(Button4, { type: "submit", className: "w-full", disabled: isLoading, children: [
+      isLoading && /* @__PURE__ */ jsx9(Spinner4, {}),
+      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";
+// src/components/auth/pages/sign-in-page.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var isPhone = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
 var SignInPage = ({
   redirectUrl,
@@ -934,7 +1079,7 @@ var SignInPage = ({
       description: isStepPassword ? void 0 : t("description"),
       error,
       logoImage,
-      footer: /* @__PURE__ */ jsxs6(
+      footer: /* @__PURE__ */ jsxs7(
         "div",
         {
           className: "flex items-center justify-center w-full gap-2",
@@ -982,11 +1127,11 @@ var SignInPage = ({
   ) });
 };
 
-// src/components/pages/sign-up-page.tsx
+// src/components/auth/pages/sign-up-page.tsx
 import { useTranslations as useTranslations9 } from "next-intl";
 import { useState as useState9 } from "react";
 
-// src/components/sign-up.tsx
+// src/components/auth/sign-up.tsx
 import { zodResolver as zodResolver4 } from "@hookform/resolvers/zod";
 import { Button as Button5 } from "@mesob/ui/components/button";
 import {
@@ -998,12 +1143,12 @@ import {
   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 { IconEye as IconEye3, IconEyeOff as IconEyeOff3 } from "@tabler/icons-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";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var isPhone2 = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
 var SignUp = ({
   onSubmit,
@@ -1063,13 +1208,13 @@ var SignUp = ({
     return t("form.phoneLabel");
   };
   const identifierLabel = getIdentifierLabel();
-  return /* @__PURE__ */ jsx11(Form4, { ...form, children: /* @__PURE__ */ jsxs7("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+  return /* @__PURE__ */ jsx11(Form4, { ...form, children: /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
     /* @__PURE__ */ jsx11(
       FormField4,
       {
         control: form.control,
         name: "fullName",
-        render: ({ field }) => /* @__PURE__ */ jsxs7(FormItem4, { children: [
+        render: ({ field }) => /* @__PURE__ */ jsxs8(FormItem4, { children: [
           /* @__PURE__ */ jsx11(FormLabel4, { children: t("form.fullNameLabel") }),
           /* @__PURE__ */ jsx11(FormControl4, { children: /* @__PURE__ */ jsx11(Input4, { placeholder: t("form.fullNamePlaceholder"), ...field }) }),
           /* @__PURE__ */ jsx11(FormMessage4, {})
@@ -1081,7 +1226,7 @@ var SignUp = ({
       {
         control: form.control,
         name: "identifier",
-        render: ({ field }) => /* @__PURE__ */ jsxs7(FormItem4, { children: [
+        render: ({ field }) => /* @__PURE__ */ jsxs8(FormItem4, { children: [
           /* @__PURE__ */ jsx11(FormLabel4, { className: hasInitialIdentifier ? "block" : void 0, children: identifierLabel }),
           /* @__PURE__ */ jsx11(FormControl4, { children: /* @__PURE__ */ jsx11(
             Input4,
@@ -1101,9 +1246,9 @@ var SignUp = ({
       {
         control: form.control,
         name: "password",
-        render: ({ field }) => /* @__PURE__ */ jsxs7(FormItem4, { children: [
+        render: ({ field }) => /* @__PURE__ */ jsxs8(FormItem4, { children: [
           /* @__PURE__ */ jsx11(FormLabel4, { children: t("form.passwordLabel") }),
-          /* @__PURE__ */ jsx11(FormControl4, { children: /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx11(FormControl4, { children: /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
             /* @__PURE__ */ jsx11(
               Input4,
               {
@@ -1118,7 +1263,7 @@ var SignUp = ({
                 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" })
+                children: showPassword ? /* @__PURE__ */ jsx11(IconEyeOff3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx11(IconEye3, { className: "h-4 w-4" })
               }
             )
           ] }) }),
@@ -1131,9 +1276,9 @@ var SignUp = ({
       {
         control: form.control,
         name: "confirmPassword",
-        render: ({ field }) => /* @__PURE__ */ jsxs7(FormItem4, { children: [
+        render: ({ field }) => /* @__PURE__ */ jsxs8(FormItem4, { children: [
           /* @__PURE__ */ jsx11(FormLabel4, { children: t("form.confirmPasswordLabel") }),
-          /* @__PURE__ */ jsx11(FormControl4, { children: /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx11(FormControl4, { children: /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
             /* @__PURE__ */ jsx11(
               Input4,
               {
@@ -1148,7 +1293,7 @@ var SignUp = ({
                 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" })
+                children: showConfirmPassword ? /* @__PURE__ */ jsx11(IconEyeOff3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx11(IconEye3, { className: "h-4 w-4" })
               }
             )
           ] }) }),
@@ -1160,10 +1305,11 @@ var SignUp = ({
   ] }) });
 };
 
-// src/components/pages/sign-up-page.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+// src/components/auth/pages/sign-up-page.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var isPhone3 = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
 var SignUpPage = ({
+  redirectUrl,
   onNavigate,
   linkComponent: Link,
   links,
@@ -1207,7 +1353,7 @@ var SignUpPage = ({
       if ("user" in res && "session" in res) {
         setAuth(res);
       }
-      onNavigate("/dashboard");
+      onNavigate(redirectUrl || "/");
     } catch (err) {
       handleError(err, setError, t);
     } finally {
@@ -1221,7 +1367,7 @@ var SignUpPage = ({
       description: t("description"),
       error,
       logoImage,
-      footer: /* @__PURE__ */ jsxs8("p", { children: [
+      footer: /* @__PURE__ */ jsxs9("p", { children: [
         t("footer.hasAccount"),
         " ",
         Link ? /* @__PURE__ */ jsx12(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.signInCta") }) : /* @__PURE__ */ jsx12(
@@ -1249,11 +1395,11 @@ var SignUpPage = ({
   );
 };
 
-// src/components/pages/verify-email-page.tsx
+// src/components/auth/pages/verify-email-page.tsx
 import { useTranslations as useTranslations11 } from "next-intl";
 import { useState as useState10 } from "react";
 
-// src/components/verification-form.tsx
+// src/components/auth/verification-form.tsx
 import { zodResolver as zodResolver5 } from "@hookform/resolvers/zod";
 import { Button as Button6 } from "@mesob/ui/components/button";
 import {
@@ -1268,11 +1414,12 @@ import {
   InputOTPGroup as InputOTPGroup2,
   InputOTPSlot as InputOTPSlot2
 } from "@mesob/ui/components/input-otp";
+import { Spinner as Spinner5 } from "@mesob/ui/components/spinner";
 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";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var VerificationForm = ({
   onSubmit,
   onResend,
@@ -1291,38 +1438,30 @@ var VerificationForm = ({
       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: [
+  return /* @__PURE__ */ jsx13(Form5, { ...form, children: /* @__PURE__ */ jsxs10("form", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx13(
       FormField5,
       {
         control: form.control,
         name: "code",
-        render: ({ field }) => /* @__PURE__ */ jsxs9(FormItem5, { children: [
+        render: ({ field }) => /* @__PURE__ */ jsxs10(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 })
+              id: "otp",
+              required: true,
+              value: field.value ?? "",
+              onChange: field.onChange,
+              onBlur: field.onBlur,
+              containerClassName: "gap-4 justify-center mb-2 flex items-center",
+              children: /* @__PURE__ */ jsxs10(InputOTPGroup2, { className: "gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl", children: [
+                /* @__PURE__ */ jsx13(InputOTPSlot2, { className: "h-12", index: 0 }),
+                /* @__PURE__ */ jsx13(InputOTPSlot2, { className: "h-12", index: 1 }),
+                /* @__PURE__ */ jsx13(InputOTPSlot2, { className: "h-12", index: 2 }),
+                /* @__PURE__ */ jsx13(InputOTPSlot2, { className: "h-12", index: 3 }),
+                /* @__PURE__ */ jsx13(InputOTPSlot2, { className: "h-12", index: 4 }),
+                /* @__PURE__ */ jsx13(InputOTPSlot2, { className: "h-12", index: 5 })
               ] })
             }
           ) }) }),
@@ -1330,9 +1469,9 @@ var VerificationForm = ({
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs9("div", { className: "flex justify-between items-center", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex justify-between items-center", children: [
       /* @__PURE__ */ jsx13(Countdown, { onResend, resending: isLoading }),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsxs10(
         Button6,
         {
           type: "button",
@@ -1342,14 +1481,17 @@ var VerificationForm = ({
             })();
           },
           disabled: isLoading || form.watch("code").length !== 6,
-          children: t("form.confirm")
+          children: [
+            isLoading && /* @__PURE__ */ jsx13(Spinner5, {}),
+            t("form.confirm")
+          ]
         }
       )
     ] })
   ] }) });
 };
 
-// src/components/pages/verify-email-page.tsx
+// src/components/auth/pages/verify-email-page.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
 var VerifyEmailPage = ({
   verificationId,
@@ -1357,7 +1499,8 @@ var VerifyEmailPage = ({
   linkComponent: Link,
   links,
   email,
-  logoImage
+  logoImage,
+  redirectUrl
 }) => {
   const t = useTranslations11("Auth.verification");
   const common = useTranslations11("Common");
@@ -1368,7 +1511,10 @@ var VerifyEmailPage = ({
   const signInLink = links?.signIn || "/auth/sign-in";
   const handleSubmit = async (values) => {
     if (!verificationId) {
-      setError(t("errors.missingVerificationId"));
+      setError({
+        title: t("errors.fallback"),
+        description: t("errors.missingVerificationId")
+      });
       return;
     }
     setIsLoading(true);
@@ -1381,7 +1527,7 @@ var VerifyEmailPage = ({
       if ("user" in res && "session" in res) {
         setAuth(res);
       }
-      onNavigate("/dashboard");
+      onNavigate(redirectUrl || "/");
     } catch (err) {
       handleError(err, setError, t);
     } finally {
@@ -1397,7 +1543,10 @@ var VerifyEmailPage = ({
           `/auth/verify-email?verificationId=${res.verificationId}&email=${encodeURIComponent(email)}`
         );
       } else {
-        setError(t("errors.resendFailed"));
+        setError({
+          title: t("errors.fallback"),
+          description: t("errors.resendFailed")
+        });
       }
     } catch (err) {
       handleError(err, setError, t);
@@ -1458,7 +1607,7 @@ var VerifyEmailPage = ({
   );
 };
 
-// src/components/pages/verify-phone-page.tsx
+// src/components/auth/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";
@@ -1469,7 +1618,8 @@ var VerifyPhonePage = ({
   onNavigate,
   linkComponent: Link,
   links,
-  logoImage
+  logoImage,
+  redirectUrl
 }) => {
   const t = useTranslations12("Auth.verification");
   const common = useTranslations12("Common");
@@ -1480,7 +1630,10 @@ var VerifyPhonePage = ({
   const signInLink = links?.signIn || "/auth/sign-in";
   const handleSubmit = async (values) => {
     if (!verificationId) {
-      setError(t("errors.fallback"));
+      setError({
+        title: t("errors.fallback"),
+        description: t("errors.fallback")
+      });
       return;
     }
     setIsLoading(true);
@@ -1493,11 +1646,11 @@ var VerifyPhonePage = ({
       });
       if (res && "user" in res && "session" in res && res.session) {
         setAuth(res);
-        onNavigate("/dashboard");
+        onNavigate(redirectUrl || "/");
         return;
       }
       await refresh();
-      onNavigate("/dashboard");
+      onNavigate(redirectUrl || "/");
     } catch (err) {
       handleError(err, setError, t);
     } finally {
@@ -1509,7 +1662,10 @@ var VerifyPhonePage = ({
     try {
       const targetPhone = context === "sign-up" ? phone : null;
       if (!targetPhone) {
-        setError(t("phone.missingPhone"));
+        setError({
+          title: t("errors.fallback"),
+          description: t("phone.missingPhone")
+        });
         return;
       }
       const res = await client.requestPhoneOtp({ phone: targetPhone, context });
@@ -1519,7 +1675,10 @@ var VerifyPhonePage = ({
         );
         return;
       }
-      setError(t("phone.resendFailed"));
+      setError({
+        title: t("errors.fallback"),
+        description: t("phone.resendFailed")
+      });
     } catch (err) {
       handleError(err, setError, t);
     }
@@ -1634,6 +1793,7 @@ export {
   VerifyEmailPage,
   VerifyPhonePage,
   createAuthClient,
+  normalizePhone,
   useAuth,
   useSession
 };