feat(auth): improve otp delivery and verification flow

src/api/users.ts

@@ -1,29 +1,44 @@
 import { authFetch, buildApiError, buildApiUrl } from './client';
-
+
-// --- Auth Endpoints ---
+const normalizeDigits = (value: string) =>
-
+  value
+    .replace(/[۰-۹]/g, (digit) => String("۰۱۲۳۴۵۶۷۸۹".indexOf(digit)))
+    .replace(/[٠-٩]/g, (digit) => String("٠١٢٣٤٥٦٧٨٩".indexOf(digit)))
+
+// --- Auth Endpoints ---
+
 export const loginWithPassword = async (mobile: string, password: string) => {
+  const normalizedMobile = normalizeDigits(mobile)
   const response = await authFetch('/api/users/login/', {
     method: 'POST',
-    body: JSON.stringify({ mobile, password })
+    body: JSON.stringify({ mobile: normalizedMobile, password })
   });
   if (!response.ok) throw await buildApiError(response);
   return response.json();
 };
 
-export const sendOtp = async (mobile: string, mode: string) => {
+export interface SendOtpResponse {
+  detail: string
+  expires_in_seconds: number
+  expires_at?: string | null
+}
+
+export const sendOtp = async (mobile: string, mode: string): Promise<SendOtpResponse> => {
+  const normalizedMobile = normalizeDigits(mobile)
   const response = await authFetch('/api/users/otp/send/', {
     method: 'POST',
-    body: JSON.stringify({ mobile, mode })
+    body: JSON.stringify({ mobile: normalizedMobile, mode })
   });
   if (!response.ok) throw await buildApiError(response);
   return response.json();
 };
 
 export const loginWithOtp = async (mobile: string, otp: string) => {
+  const normalizedMobile = normalizeDigits(mobile)
+  const normalizedOtp = normalizeDigits(otp)
   const response = await authFetch('/api/users/otp/login/', {
     method: 'POST',
-    body: JSON.stringify({ mobile, code: otp })
+    body: JSON.stringify({ mobile: normalizedMobile, code: normalizedOtp })
   });
   if (!response.ok) throw await buildApiError(response);
   return response.json();
@@ -37,9 +52,18 @@ export const registerWithOtp = async (
   first_name = "",
   last_name = "",
 ) => {
+  const normalizedMobile = normalizeDigits(mobile)
+  const normalizedCode = normalizeDigits(code)
   const response = await authFetch("/api/users/register/", {
     method: "POST",
-    body: JSON.stringify({ mobile, code, password, re_password, first_name, last_name }),
+    body: JSON.stringify({
+      mobile: normalizedMobile,
+      code: normalizedCode,
+      password,
+      re_password,
+      first_name,
+      last_name,
+    }),
   })
   if (!response.ok) throw await buildApiError(response)
   return response.json()
@@ -51,9 +75,16 @@ export const resetPasswordWithOtp = async (
   password: string,
   re_password: string,
 ) => {
+  const normalizedMobile = normalizeDigits(mobile)
+  const normalizedCode = normalizeDigits(code)
   const response = await authFetch("/api/users/password/reset/", {
     method: "POST",
-    body: JSON.stringify({ mobile, code, password, re_password }),
+    body: JSON.stringify({
+      mobile: normalizedMobile,
+      code: normalizedCode,
+      password,
+      re_password,
+    }),
   })
   if (!response.ok) throw await buildApiError(response)
   return response.json()
@@ -107,9 +138,10 @@ export const completeGoogleOAuthSignup = async (
   flow: string,
   mobile: string,
 ): Promise<GoogleOAuthFlowResponse> => {
+  const normalizedMobile = normalizeDigits(mobile)
   const response = await authFetch("/api/users/oauth/google/complete/", {
     method: "POST",
-    body: JSON.stringify({ flow, mobile }),
+    body: JSON.stringify({ flow, mobile: normalizedMobile }),
   });
   if (!response.ok) throw await buildApiError(response);
   return response.json();
@@ -128,9 +160,10 @@ export const verifyGoogleOAuthClaim = async (
   flow: string,
   code: string,
 ): Promise<GoogleOAuthFlowResponse> => {
+  const normalizedCode = normalizeDigits(code)
   const response = await authFetch("/api/users/oauth/google/claim/verify/", {
     method: "POST",
-    body: JSON.stringify({ flow, code }),
+    body: JSON.stringify({ flow, code: normalizedCode }),
   });
   if (!response.ok) throw await buildApiError(response);
   return response.json();
@@ -193,9 +226,9 @@ export interface SearchedUser {
   profile_picture: string | null;
 }
 
-export const searchUserByExactMobile = async (mobile: string): Promise<SearchedUser | null> => {
+export const searchUserByExactMobile = async (mobile: string): Promise<SearchedUser | null> => {
-  try {
+  try {
-    const response = await authFetch(`/api/users/search/?mobile=${encodeURIComponent(mobile)}`);
+    const response = await authFetch(`/api/users/search/?mobile=${encodeURIComponent(normalizeDigits(mobile))}`);
     if (!response.ok) return null; // Returns null on 404 or other errors
     return await response.json();
   } catch (error) {

src/context/AuthFlowContext.tsx

@@ -11,6 +11,8 @@ export type CooldownKey =
 interface FlowBranchState {
   mobile: string
   code: string
+  otpExpiresAt: number | null
+  pendingOtpSend: boolean
 }
 
 interface CooldownState {
@@ -32,25 +34,34 @@ interface AuthFlowContextValue {
   state: AuthFlowState
   setMobile: (flow: FlowName, mobile: string) => void
   setCode: (flow: FlowName, code: string) => void
+  markOtpSendPending: (flow: FlowName) => void
+  setOtpDelivery: (flow: FlowName, expiresInSeconds: number) => void
+  clearOtpDelivery: (flow: FlowName) => void
   setCooldown: (key: CooldownKey, seconds: number) => void
   clearCooldown: (key: CooldownKey) => void
   resetFlow: (flow: FlowName) => void
 }
 
-const STORAGE_KEY = "auth_flow_state:v1"
+const STORAGE_KEY = "auth_flow_state:v2"
 
 const defaultState: AuthFlowState = {
   login: {
     mobile: "",
     code: "",
+    otpExpiresAt: null,
+    pendingOtpSend: false,
   },
   signup: {
     mobile: "",
     code: "",
+    otpExpiresAt: null,
+    pendingOtpSend: false,
   },
   forgotPassword: {
     mobile: "",
     code: "",
+    otpExpiresAt: null,
+    pendingOtpSend: false,
   },
   cooldowns: {
     loginOtpSend: 0,
@@ -80,14 +91,20 @@ const parseStoredState = (): AuthFlowState => {
       login: {
         mobile: parsed.login?.mobile ?? "",
         code: parsed.login?.code ?? "",
+        otpExpiresAt: parsed.login?.otpExpiresAt ?? null,
+        pendingOtpSend: parsed.login?.pendingOtpSend ?? false,
       },
       signup: {
         mobile: parsed.signup?.mobile ?? "",
         code: parsed.signup?.code ?? "",
+        otpExpiresAt: parsed.signup?.otpExpiresAt ?? null,
+        pendingOtpSend: parsed.signup?.pendingOtpSend ?? false,
       },
       forgotPassword: {
         mobile: parsed.forgotPassword?.mobile ?? "",
         code: parsed.forgotPassword?.code ?? "",
+        otpExpiresAt: parsed.forgotPassword?.otpExpiresAt ?? null,
+        pendingOtpSend: parsed.forgotPassword?.pendingOtpSend ?? false,
       },
       cooldowns: {
         loginOtpSend: parsed.cooldowns?.loginOtpSend ?? 0,
@@ -151,6 +168,36 @@ export function AuthFlowProvider({ children }: { children: ReactNode }) {
           },
         }))
       },
+      markOtpSendPending: (flow) => {
+        setState((current) => ({
+          ...current,
+          [flow]: {
+            ...current[flow],
+            code: "",
+            pendingOtpSend: true,
+          },
+        }))
+      },
+      setOtpDelivery: (flow, expiresInSeconds) => {
+        setState((current) => ({
+          ...current,
+          [flow]: {
+            ...current[flow],
+            pendingOtpSend: false,
+            otpExpiresAt: Date.now() + Math.max(0, expiresInSeconds) * 1000,
+          },
+        }))
+      },
+      clearOtpDelivery: (flow) => {
+        setState((current) => ({
+          ...current,
+          [flow]: {
+            ...current[flow],
+            pendingOtpSend: false,
+            otpExpiresAt: null,
+          },
+        }))
+      },
       setCooldown: (key, seconds) => {
         setState((current) => ({
           ...current,
@@ -175,6 +222,8 @@ export function AuthFlowProvider({ children }: { children: ReactNode }) {
           [flow]: {
             mobile: "",
             code: "",
+            otpExpiresAt: null,
+            pendingOtpSend: false,
           },
         }))
       },

src/locales/en.ts

@@ -77,9 +77,14 @@ export const en = {
     passwordPlaceholder: "Password",
     signIn: "Sign In",
     back: "Back",
-    otpPlaceholder: "5-digit code",
+    otpPlaceholder: "5-digit code",
-    verifyAndContinue: "Verify & Continue",
+    verifyAndContinue: "Verify & Continue",
-    terms: "By clicking continue, you agree to our Terms of Service and Privacy Policy.",
+    sendingOtp: "Sending code...",
+    verifyingOtp: "Verifying code...",
+    resendOtp: "Resend code",
+    otpExpiresIn: (time: string) => `Code expires in ${time}`,
+    otpExpired: "This code has expired. Request a new code to continue.",
+    terms: "By clicking continue, you agree to our Terms of Service and Privacy Policy.",
     brandingQuote: "Manage your time and workspaces efficiently with our minimal, fast, and secure platform.",
     toasts: {
       enterMobile: "Please enter your mobile number",

src/locales/fa.ts

@@ -75,11 +75,16 @@ export const fa = {
     otpLogin: "ورود با کد یکبار مصرف",
     register: "ثبت نام",
     passwordPlaceholder: "رمز عبور",
-    signIn: "ورود",
+    signIn: "ورود",
-    back: "بازگشت",
+    back: "بازگشت",
-    otpPlaceholder: "کد ۵ رقمی",
+    otpPlaceholder: "کد ۵ رقمی",
-    verifyAndContinue: "تایید و ادامه",
+    verifyAndContinue: "تایید و ادامه",
-    terms: "با کلیک روی ادامه، شما با قوانین و مقررات و حریم خصوصی ما موافقت می‌کنید.",
+    sendingOtp: "در حال ارسال کد...",
+    verifyingOtp: "در حال تأیید کد...",
+    resendOtp: "ارسال دوباره کد",
+    otpExpiresIn: (time: string) => `اعتبار کد تا ${time} دیگر است`,
+    otpExpired: "اعتبار این کد به پایان رسیده است. برای ادامه کد جدید بگیرید.",
+    terms: "با کلیک روی ادامه، شما با قوانین و مقررات و حریم خصوصی ما موافقت می‌کنید.",
     brandingQuote: "زمان و ورک‌اسپیس‌ها خود را با پلتفرم مینیمال، سریع و امن ما بهینه مدیریت کنید.",
     toasts: {
       enterMobile: "لطفا شماره موبایل خود را وارد کنید",

src/pages/auth/AuthOtpInput.tsx

@@ -0,0 +1,132 @@
+import { useEffect, useMemo, useRef } from "react"
+
+const OTP_LENGTH = 5
+
+const normalizeDigits = (value: string) =>
+  value
+    .replace(/[۰-۹]/g, (digit) => String("۰۱۲۳۴۵۶۷۸۹".indexOf(digit)))
+    .replace(/[٠-٩]/g, (digit) => String("٠١٢٣٤٥٦٧٨٩".indexOf(digit)))
+
+const sanitizeOtp = (value: string) => normalizeDigits(value).replace(/\D/g, "").slice(0, OTP_LENGTH)
+
+export function AuthOtpInput({
+  id,
+  value,
+  disabled,
+  onChange,
+  onComplete,
+}: {
+  id: string
+  value: string
+  disabled?: boolean
+  onChange: (value: string) => void
+  onComplete?: (value: string) => void
+}) {
+  const inputRefs = useRef<Array<HTMLInputElement | null>>([])
+  const lastCompletedValueRef = useRef("")
+  const normalizedValue = useMemo(() => sanitizeOtp(value), [value])
+  const digits = useMemo(
+    () => Array.from({ length: OTP_LENGTH }, (_, index) => normalizedValue[index] ?? ""),
+    [normalizedValue],
+  )
+
+  useEffect(() => {
+    if (normalizedValue.length !== OTP_LENGTH) {
+      lastCompletedValueRef.current = ""
+      return
+    }
+
+    if (normalizedValue !== lastCompletedValueRef.current) {
+      lastCompletedValueRef.current = normalizedValue
+      onComplete?.(normalizedValue)
+    }
+  }, [normalizedValue, onComplete])
+
+  const focusIndex = (index: number) => {
+    inputRefs.current[index]?.focus()
+    inputRefs.current[index]?.select()
+  }
+
+  const handleSlotChange = (index: number, nextRawValue: string) => {
+    const nextValue = sanitizeOtp(nextRawValue)
+    if (!nextValue) {
+      const updated = digits.slice()
+      updated[index] = ""
+      onChange(updated.join(""))
+      return
+    }
+
+    if (nextValue.length > 1) {
+      onChange(nextValue)
+      const focusTarget = Math.min(nextValue.length, OTP_LENGTH - 1)
+      focusIndex(focusTarget)
+      return
+    }
+
+    const updated = digits.slice()
+    updated[index] = nextValue
+    const combined = updated.join("")
+    onChange(combined)
+
+    if (index < OTP_LENGTH - 1) {
+      focusIndex(index + 1)
+    }
+  }
+
+  const handleKeyDown = (index: number, event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Backspace" && !digits[index] && index > 0) {
+      const updated = digits.slice()
+      updated[index - 1] = ""
+      onChange(updated.join(""))
+      focusIndex(index - 1)
+      event.preventDefault()
+      return
+    }
+
+    if (event.key === "ArrowLeft" && index > 0) {
+      focusIndex(index - 1)
+      event.preventDefault()
+      return
+    }
+
+    if (event.key === "ArrowRight" && index < OTP_LENGTH - 1) {
+      focusIndex(index + 1)
+      event.preventDefault()
+    }
+  }
+
+  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
+    event.preventDefault()
+    const pasted = sanitizeOtp(event.clipboardData.getData("text"))
+    if (!pasted) {
+      return
+    }
+    onChange(pasted)
+    focusIndex(Math.min(pasted.length, OTP_LENGTH - 1))
+  }
+
+  return (
+    <div className="flex items-center justify-center gap-2 sm:gap-3" dir="ltr">
+      {digits.map((digit, index) => (
+        <input
+          key={`${id}-${index}`}
+          ref={(element) => {
+            inputRefs.current[index] = element
+          }}
+          id={index === 0 ? id : undefined}
+          type="text"
+          inputMode="numeric"
+          autoComplete="one-time-code"
+          pattern="[0-9]*"
+          maxLength={OTP_LENGTH}
+          disabled={disabled}
+          value={digit}
+          onChange={(event) => handleSlotChange(index, event.target.value)}
+          onKeyDown={(event) => handleKeyDown(index, event)}
+          onPaste={handlePaste}
+          className="h-12 w-12 rounded-2xl border border-slate-200 bg-white text-center text-lg font-semibold tracking-[0.18em] text-slate-900 outline-none transition focus:border-sky-500 focus:ring-2 focus:ring-sky-200 dark:border-slate-700 dark:bg-slate-900 dark:text-white dark:focus:ring-sky-500/20 sm:h-14 sm:w-14"
+        />
+      ))}
+    </div>
+  )
+}

src/pages/auth/ForgotPasswordMobilePage.tsx

@@ -1,22 +1,19 @@
-import { Loader2 } from "lucide-react"
+import { useMemo } from "react"
-import { useMemo, useState } from "react"
 import { Link, useNavigate } from "react-router-dom"
 import { toast } from "sonner"
 
-import { sendOtp } from "../../api/users"
 import { Button } from "../../components/ui/button"
 import { Input } from "../../components/ui/input"
 import { useAuthFlow } from "../../context/AuthFlowContext"
 import { useTranslation } from "../../hooks/useTranslation"
 import { AuthPanel } from "./AuthPanel"
-import { formatCooldown, getApiErrorMessage, handleThrottleError } from "./utils"
+import { formatCooldown } from "./utils"
 
 export function ForgotPasswordMobilePage() {
   const navigate = useNavigate()
   const { t, lang } = useTranslation()
-  const { state, setMobile, setCode, setCooldown, clearCooldown } = useAuthFlow()
+  const { state, setMobile, markOtpSendPending, clearOtpDelivery } = useAuthFlow()
   const isRtl = lang === "fa"
-  const [loading, setLoading] = useState(false)
 
   const alert = useMemo(() => {
     if (state.cooldowns.forgotPasswordOtpSend <= 0) {
@@ -41,28 +38,9 @@ export function ForgotPasswordMobilePage() {
       return
     }
 
-    setLoading(true)
+    clearOtpDelivery("forgotPassword")
-    try {
+    markOtpSendPending("forgotPassword")
-      await sendOtp(state.forgotPassword.mobile, "forget_password")
+    navigate("/auth/forgot-password/verify")
-      clearCooldown("forgotPasswordOtpSend")
-      setCode("forgotPassword", "")
-      navigate("/auth/forgot-password/verify")
-      toast.success(t.login.toasts.verifySent)
-    } catch (error) {
-      if (
-        !handleThrottleError({
-          error,
-          cooldownKey: "forgotPasswordOtpSend",
-          setCooldown,
-          formatTime: (seconds) => formatCooldown(seconds, isRtl),
-          throttleCopy: t.login.throttle,
-        })
-      ) {
-        toast.error(getApiErrorMessage(error, t.login.toasts.failedOtp))
-      }
-    } finally {
-      setLoading(false)
-    }
   }
 
   return (
@@ -78,7 +56,6 @@ export function ForgotPasswordMobilePage() {
           type="tel"
           dir="ltr"
           maxLength={11}
-          disabled={loading}
           value={state.forgotPassword.mobile}
           onChange={(event) => setMobile("forgotPassword", event.target.value)}
           className={`h-11 ${isRtl ? "text-end" : "text-start"}`}
@@ -86,10 +63,9 @@ export function ForgotPasswordMobilePage() {
 
         <Button
           onClick={handleContinue}
-          disabled={loading || state.cooldowns.forgotPasswordOtpSend > 0}
+          disabled={state.cooldowns.forgotPasswordOtpSend > 0}
           className="h-11 w-full"
         >
-          {loading && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
           {cooldownLabel || t.login.sendResetCode}
         </Button>
 

src/pages/auth/ForgotPasswordOtpPage.tsx

@@ -1,55 +1,161 @@
-import { useState } from "react"
+import { Loader2 } from "lucide-react"
-import { Link, Navigate, useNavigate } from "react-router-dom"
+import { useEffect, useMemo, useRef, useState } from "react"
+import { Navigate, useNavigate } from "react-router-dom"
 import { toast } from "sonner"
 
+import { sendOtp } from "../../api/users"
 import { Button } from "../../components/ui/button"
-import { Input } from "../../components/ui/input"
 import { useAuthFlow } from "../../context/AuthFlowContext"
 import { useTranslation } from "../../hooks/useTranslation"
+import { AuthOtpInput } from "./AuthOtpInput"
 import { AuthPanel } from "./AuthPanel"
+import { formatCooldown, getApiErrorMessage, getOtpRemainingSeconds, handleThrottleError } from "./utils"
 
 export function ForgotPasswordOtpPage() {
   const navigate = useNavigate()
-  const { t } = useTranslation()
+  const { t, lang } = useTranslation()
-  const { state, setCode } = useAuthFlow()
+  const {
-  const [loading, setLoading] = useState(false)
+    state,
+    setCode,
+    setCooldown,
+    clearCooldown,
+    setOtpDelivery,
+    clearOtpDelivery,
+  } = useAuthFlow()
+  const isRtl = lang === "fa"
+  const autoSendStartedRef = useRef(false)
+  const [isSendingOtp, setIsSendingOtp] = useState(false)
+  const [isContinuing, setIsContinuing] = useState(false)
+  const [now, setNow] = useState(Date.now())
 
   if (!state.forgotPassword.mobile) {
     return <Navigate to="/auth/forgot-password" replace />
   }
 
-  const handleContinue = async (event: React.FormEvent) => {
+  useEffect(() => {
-    event.preventDefault()
+    if (!state.forgotPassword.otpExpiresAt || getOtpRemainingSeconds(state.forgotPassword.otpExpiresAt) <= 0) {
+      return
+    }
 
-    if (!state.forgotPassword.code) {
+    const timer = window.setInterval(() => {
+      setNow(Date.now())
+    }, 1000)
+
+    return () => window.clearInterval(timer)
+  }, [state.forgotPassword.otpExpiresAt])
+
+  const sendForgotPasswordOtp = async () => {
+    setIsSendingOtp(true)
+    try {
+      const response = await sendOtp(state.forgotPassword.mobile, "forget_password")
+      clearCooldown("forgotPasswordOtpSend")
+      setCode("forgotPassword", "")
+      setOtpDelivery("forgotPassword", response.expires_in_seconds)
+      setNow(Date.now())
+      toast.success(t.login.toasts.verifySent)
+    } catch (error) {
+      clearOtpDelivery("forgotPassword")
+      if (
+        !handleThrottleError({
+          error,
+          cooldownKey: "forgotPasswordOtpSend",
+          setCooldown,
+          formatTime: (seconds) => formatCooldown(seconds, isRtl),
+          throttleCopy: t.login.throttle,
+        })
+      ) {
+        toast.error(getApiErrorMessage(error, t.login.toasts.failedOtp))
+      }
+    } finally {
+      setIsSendingOtp(false)
+    }
+  }
+
+  useEffect(() => {
+    if (!state.forgotPassword.pendingOtpSend || autoSendStartedRef.current) {
+      return
+    }
+
+    autoSendStartedRef.current = true
+    void sendForgotPasswordOtp()
+  }, [state.forgotPassword.pendingOtpSend])
+
+  const otpRemainingSeconds = state.forgotPassword.otpExpiresAt
+    ? Math.max(0, Math.ceil((state.forgotPassword.otpExpiresAt - now) / 1000))
+    : 0
+
+  const alert = useMemo(() => {
+    if (state.cooldowns.forgotPasswordOtpSend <= 0) {
+      return null
+    }
+
+    const formatted = formatCooldown(state.cooldowns.forgotPasswordOtpSend, isRtl)
+    return {
+      title: t.login.throttle.title,
+      description: t.login.throttle.otpSendMessage(formatted),
+    }
+  }, [isRtl, state.cooldowns.forgotPasswordOtpSend, t.login.throttle])
+
+  const expiryMessage =
+    otpRemainingSeconds > 0
+      ? t.login.otpExpiresIn(formatCooldown(otpRemainingSeconds, isRtl))
+      : state.forgotPassword.otpExpiresAt
+        ? t.login.otpExpired
+        : null
+
+  const continueToReset = async (code: string) => {
+    if (code.length !== 5) {
       toast.error(t.login.toasts.enterOtp)
       return
     }
 
-    setLoading(true)
+    setIsContinuing(true)
+    setCode("forgotPassword", code)
     navigate("/auth/forgot-password/password")
   }
 
+  const isBusy = isSendingOtp || isContinuing
+
   return (
     <AuthPanel
       title={t.login.forgotPasswordVerifyTitle}
       description={t.login.sentCodeDesc(state.forgotPassword.mobile)}
+      alert={alert}
     >
-      <form onSubmit={handleContinue} className="grid gap-4">
+      <form
-        <Input
+        onSubmit={(event) => {
+          event.preventDefault()
+          void continueToReset(state.forgotPassword.code)
+        }}
+        className="grid gap-4"
+      >
+        <AuthOtpInput
           id="forgot-password-otp"
-          placeholder={t.login.otpPlaceholder}
-          type="text"
-          dir="ltr"
-          maxLength={6}
-          disabled={loading}
           value={state.forgotPassword.code}
-          onChange={(event) => setCode("forgotPassword", event.target.value)}
+          disabled={isBusy}
-          className="h-11 text-center text-lg tracking-widest"
+          onChange={(value) => setCode("forgotPassword", value)}
+          onComplete={(value) => void continueToReset(value)}
         />
 
-        <Button type="submit" className="h-11 w-full" disabled={loading}>
+        {expiryMessage ? (
-          {t.login.continueToResetPassword}
+          <p className="text-center text-sm text-slate-500 dark:text-slate-400">{expiryMessage}</p>
+        ) : null}
+
+        <Button type="submit" className="h-11 w-full" disabled={isBusy}>
+          {(isSendingOtp || isContinuing) && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
+          {isSendingOtp ? t.login.sendingOtp : t.login.continueToResetPassword}
+        </Button>
+
+        <Button
+          type="button"
+          variant="outline"
+          className="h-11 w-full"
+          disabled={isBusy || otpRemainingSeconds > 0 || state.cooldowns.forgotPasswordOtpSend > 0}
+          onClick={() => void sendForgotPasswordOtp()}
+        >
+          {state.cooldowns.forgotPasswordOtpSend > 0
+            ? t.login.throttle.countdownLabel(formatCooldown(state.cooldowns.forgotPasswordOtpSend, isRtl))
+            : t.login.resendOtp}
         </Button>
       </form>
     </AuthPanel>

src/pages/auth/LoginMobilePage.tsx

@@ -1,15 +1,14 @@
-import { Loader2 } from "lucide-react"
+import { useMemo } from "react"
-import { useMemo, useState } from "react"
 import { Link, useNavigate } from "react-router-dom"
 import { toast } from "sonner"
 
-import { sendOtp, startGoogleLogin } from "../../api/users"
+import { startGoogleLogin } from "../../api/users"
 import { Button } from "../../components/ui/button"
 import { Input } from "../../components/ui/input"
 import { useAuthFlow } from "../../context/AuthFlowContext"
 import { useTranslation } from "../../hooks/useTranslation"
 import { AuthPanel } from "./AuthPanel"
-import { formatCooldown, getApiErrorMessage, handleThrottleError } from "./utils"
+import { formatCooldown } from "./utils"
 
 const GoogleIcon = () => (
   <svg aria-hidden="true" className="h-5 w-5" viewBox="0 0 24 24">
@@ -35,10 +34,8 @@ const GoogleIcon = () => (
 export function LoginMobilePage() {
   const navigate = useNavigate()
   const { t, lang } = useTranslation()
-  const { state, setMobile, setCooldown, clearCooldown, resetFlow } = useAuthFlow()
+  const { state, setMobile, markOtpSendPending, clearOtpDelivery, resetFlow } = useAuthFlow()
   const isRtl = lang === "fa"
-  const [loading, setLoading] = useState(false)
-
   const alert = useMemo(() => {
     if (state.cooldowns.loginOtpSend <= 0) {
       return null
@@ -62,28 +59,10 @@ export function LoginMobilePage() {
       return
     }
 
-    setLoading(true)
+    resetFlow("forgotPassword")
-    try {
+    clearOtpDelivery("login")
-      await sendOtp(state.login.mobile, "login")
+    markOtpSendPending("login")
-      clearCooldown("loginOtpSend")
+    navigate("/auth/login/verify")
-      resetFlow("forgotPassword")
-      navigate("/auth/login/verify")
-      toast.success(t.login.toasts.verifySent)
-    } catch (error) {
-      if (
-        !handleThrottleError({
-          error,
-          cooldownKey: "loginOtpSend",
-          setCooldown,
-          formatTime: (seconds) => formatCooldown(seconds, isRtl),
-          throttleCopy: t.login.throttle,
-        })
-      ) {
-        toast.error(getApiErrorMessage(error, t.login.toasts.failedOtp))
-      }
-    } finally {
-      setLoading(false)
-    }
   }
 
   return (
@@ -99,7 +78,6 @@ export function LoginMobilePage() {
           type="tel"
           dir="ltr"
           maxLength={11}
-          disabled={loading}
           value={state.login.mobile}
           onChange={(event) => setMobile("login", event.target.value)}
           className={`h-11 ${isRtl ? "text-end" : "text-start"}`}
@@ -107,10 +85,9 @@ export function LoginMobilePage() {
 
         <Button
           onClick={handleLogin}
-          disabled={loading || state.cooldowns.loginOtpSend > 0}
+          disabled={state.cooldowns.loginOtpSend > 0}
           className="h-11 w-full"
         >
-          {loading && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
           {cooldownLabel || t.login.loginCta}
         </Button>
 
@@ -129,7 +106,6 @@ export function LoginMobilePage() {
           type="button"
           variant="outline"
           onClick={startGoogleLogin}
-          disabled={loading}
           className="h-11 w-full"
         >
           <GoogleIcon />

src/pages/auth/LoginOtpPage.tsx

@@ -1,56 +1,148 @@
 import { Loader2 } from "lucide-react"
-import { useMemo, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import { Link, Navigate, useNavigate } from "react-router-dom"
 import { toast } from "sonner"
 
-import { loginWithOtp } from "../../api/users"
+import { loginWithOtp, sendOtp } from "../../api/users"
 import { Button } from "../../components/ui/button"
-import { Input } from "../../components/ui/input"
 import { useAuthFlow } from "../../context/AuthFlowContext"
 import { useTranslation } from "../../hooks/useTranslation"
+import { AuthOtpInput } from "./AuthOtpInput"
 import { AuthPanel } from "./AuthPanel"
-import { completeAuthentication, formatCooldown, getApiErrorMessage, handleThrottleError } from "./utils"
+import {
+  completeAuthentication,
+  formatCooldown,
+  getApiErrorMessage,
+  getOtpRemainingSeconds,
+  handleThrottleError,
+} from "./utils"
 
 export function LoginOtpPage() {
   const navigate = useNavigate()
   const { t, lang } = useTranslation()
-  const { state, setCode, setCooldown, clearCooldown } = useAuthFlow()
+  const {
+    state,
+    setCode,
+    setCooldown,
+    clearCooldown,
+    setOtpDelivery,
+    clearOtpDelivery,
+  } = useAuthFlow()
   const isRtl = lang === "fa"
-  const [loading, setLoading] = useState(false)
+  const autoSendStartedRef = useRef(false)
+  const activeSubmitCodeRef = useRef("")
+  const lastFailedCodeRef = useRef("")
+  const [isSendingOtp, setIsSendingOtp] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [now, setNow] = useState(Date.now())
 
   if (!state.login.mobile) {
     return <Navigate to="/auth/login" replace />
   }
 
-  const alert = useMemo(() => {
+  useEffect(() => {
-    if (state.cooldowns.loginOtpVerify <= 0) {
+    if (!state.login.otpExpiresAt || getOtpRemainingSeconds(state.login.otpExpiresAt) <= 0) {
-      return null
+      return
     }
 
-    const formatted = formatCooldown(state.cooldowns.loginOtpVerify, isRtl)
+    const timer = window.setInterval(() => {
-    return {
+      setNow(Date.now())
-      title: t.login.throttle.title,
+    }, 1000)
-      description: t.login.throttle.otpLoginMessage(formatted),
+
+    return () => window.clearInterval(timer)
+  }, [state.login.otpExpiresAt])
+
+  const sendLoginOtp = async () => {
+    setIsSendingOtp(true)
+    try {
+      const response = await sendOtp(state.login.mobile, "login")
+      clearCooldown("loginOtpSend")
+      clearCooldown("loginOtpVerify")
+      lastFailedCodeRef.current = ""
+      setCode("login", "")
+      setOtpDelivery("login", response.expires_in_seconds)
+      setNow(Date.now())
+      toast.success(t.login.toasts.verifySent)
+    } catch (error) {
+      clearOtpDelivery("login")
+      if (
+        !handleThrottleError({
+          error,
+          cooldownKey: "loginOtpSend",
+          setCooldown,
+          formatTime: (seconds) => formatCooldown(seconds, isRtl),
+          throttleCopy: t.login.throttle,
+        })
+      ) {
+        toast.error(getApiErrorMessage(error, t.login.toasts.failedOtp))
+      }
+    } finally {
+      setIsSendingOtp(false)
     }
-  }, [isRtl, state.cooldowns.loginOtpVerify, t.login.throttle])
+  }
 
-  const cooldownLabel =
+  useEffect(() => {
-    state.cooldowns.loginOtpVerify > 0
+    if (!state.login.pendingOtpSend || autoSendStartedRef.current) {
-      ? t.login.throttle.countdownLabel(formatCooldown(state.cooldowns.loginOtpVerify, isRtl))
+      return
-      : null
+    }
 
-  const handleVerify = async (event: React.FormEvent) => {
+    autoSendStartedRef.current = true
-    event.preventDefault()
+    void sendLoginOtp()
+  }, [state.login.pendingOtpSend])
 
-    if (!state.login.code) {
+  const otpRemainingSeconds = state.login.otpExpiresAt
+    ? Math.max(0, Math.ceil((state.login.otpExpiresAt - now) / 1000))
+    : 0
+
+  const throttleAlert = useMemo(() => {
+    if (state.cooldowns.loginOtpVerify > 0) {
+      const formatted = formatCooldown(state.cooldowns.loginOtpVerify, isRtl)
+      return {
+        title: t.login.throttle.title,
+        description: t.login.throttle.otpLoginMessage(formatted),
+      }
+    }
+
+    if (state.cooldowns.loginOtpSend > 0) {
+      const formatted = formatCooldown(state.cooldowns.loginOtpSend, isRtl)
+      return {
+        title: t.login.throttle.title,
+        description: t.login.throttle.otpSendMessage(formatted),
+      }
+    }
+
+    return null
+  }, [isRtl, state.cooldowns.loginOtpSend, state.cooldowns.loginOtpVerify, t.login.throttle])
+
+  const expiryMessage =
+    otpRemainingSeconds > 0
+      ? t.login.otpExpiresIn(formatCooldown(otpRemainingSeconds, isRtl))
+      : state.login.otpExpiresAt
+        ? t.login.otpExpired
+        : null
+
+  const submitCode = async (code: string) => {
+    if (code.length !== 5) {
       toast.error(t.login.toasts.enterOtp)
       return
     }
 
-    setLoading(true)
+    if (isSendingOtp || isSubmitting || code === activeSubmitCodeRef.current) {
+      return
+    }
+
+    if (code === lastFailedCodeRef.current) {
+      toast.error(t.login.toasts.invalidOtp)
+      return
+    }
+
+    activeSubmitCodeRef.current = code
+    setIsSubmitting(true)
     try {
-      const data = await loginWithOtp(state.login.mobile, state.login.code)
+      const data = await loginWithOtp(state.login.mobile, code)
       clearCooldown("loginOtpVerify")
+      activeSubmitCodeRef.current = ""
+      lastFailedCodeRef.current = ""
       completeAuthentication({
         access: data.access,
         refresh: data.refresh,
@@ -68,35 +160,67 @@ export function LoginOtpPage() {
           throttleCopy: t.login.throttle,
         })
       ) {
+        lastFailedCodeRef.current = code
         toast.error(getApiErrorMessage(error, t.login.toasts.invalidOtp))
       }
     } finally {
-      setLoading(false)
+      activeSubmitCodeRef.current = ""
+      setIsSubmitting(false)
     }
   }
 
+  const handleResend = async () => {
+    autoSendStartedRef.current = false
+    await sendLoginOtp()
+  }
+
+  const isBusy = isSendingOtp || isSubmitting
+  const isRepeatedInvalidCode = state.login.code.length === 5 && state.login.code === lastFailedCodeRef.current
+
   return (
     <AuthPanel
       title={t.login.loginOtpTitle}
       description={t.login.sentCodeDesc(state.login.mobile)}
-      alert={alert}
+      alert={throttleAlert}
     >
-      <form onSubmit={handleVerify} className="grid gap-4">
+      <form
-        <Input
+        onSubmit={(event) => {
+          event.preventDefault()
+          void submitCode(state.login.code)
+        }}
+        className="grid gap-4"
+      >
+        <AuthOtpInput
           id="login-otp"
-          placeholder={t.login.otpPlaceholder}
-          type="text"
-          dir="ltr"
-          maxLength={5}
-          disabled={loading}
           value={state.login.code}
-          onChange={(event) => setCode("login", event.target.value)}
+          disabled={isBusy}
-          className="h-11 text-center text-lg tracking-widest"
+          onChange={(value) => setCode("login", value)}
+          onComplete={(value) => void submitCode(value)}
         />
 
-        <Button type="submit" className="h-11 w-full" disabled={loading || state.cooldowns.loginOtpVerify > 0}>
+        {expiryMessage ? (
-          {loading && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
+          <p className="text-center text-sm text-slate-500 dark:text-slate-400">{expiryMessage}</p>
-          {cooldownLabel || t.login.verifyAndContinue}
+        ) : null}
+
+        <Button
+          type="submit"
+          className="h-11 w-full"
+          disabled={isBusy || isRepeatedInvalidCode || state.cooldowns.loginOtpVerify > 0}
+        >
+          {(isSubmitting || isSendingOtp) && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
+          {isSubmitting ? t.login.verifyingOtp : isSendingOtp ? t.login.sendingOtp : t.login.verifyAndContinue}
+        </Button>
+
+        <Button
+          type="button"
+          variant="outline"
+          className="h-11 w-full"
+          disabled={isBusy || otpRemainingSeconds > 0 || state.cooldowns.loginOtpSend > 0}
+          onClick={() => void handleResend()}
+        >
+          {state.cooldowns.loginOtpSend > 0
+            ? t.login.throttle.countdownLabel(formatCooldown(state.cooldowns.loginOtpSend, isRtl))
+            : t.login.resendOtp}
         </Button>
 
         <div className="text-center text-sm text-slate-500 dark:text-slate-400 underline">

src/pages/auth/SignupMobilePage.tsx

@@ -1,22 +1,19 @@
-import { Loader2 } from "lucide-react"
+import { useMemo } from "react"
-import { useMemo, useState } from "react"
 import { Link, useNavigate } from "react-router-dom"
 import { toast } from "sonner"
 
-import { sendOtp } from "../../api/users"
 import { Button } from "../../components/ui/button"
 import { Input } from "../../components/ui/input"
 import { useAuthFlow } from "../../context/AuthFlowContext"
 import { useTranslation } from "../../hooks/useTranslation"
 import { AuthPanel } from "./AuthPanel"
-import { formatCooldown, getApiErrorMessage, handleThrottleError } from "./utils"
+import { formatCooldown } from "./utils"
 
 export function SignupMobilePage() {
   const navigate = useNavigate()
   const { t, lang } = useTranslation()
-  const { state, setMobile, setCode, setCooldown, clearCooldown } = useAuthFlow()
+  const { state, setMobile, markOtpSendPending, clearOtpDelivery } = useAuthFlow()
   const isRtl = lang === "fa"
-  const [loading, setLoading] = useState(false)
 
   const alert = useMemo(() => {
     if (state.cooldowns.signupOtpSend <= 0) {
@@ -41,28 +38,9 @@ export function SignupMobilePage() {
       return
     }
 
-    setLoading(true)
+    clearOtpDelivery("signup")
-    try {
+    markOtpSendPending("signup")
-      await sendOtp(state.signup.mobile, "register")
+    navigate("/auth/signup/verify")
-      clearCooldown("signupOtpSend")
-      setCode("signup", "")
-      navigate("/auth/signup/verify")
-      toast.success(t.login.toasts.verifySent)
-    } catch (error) {
-      if (
-        !handleThrottleError({
-          error,
-          cooldownKey: "signupOtpSend",
-          setCooldown,
-          formatTime: (seconds) => formatCooldown(seconds, isRtl),
-          throttleCopy: t.login.throttle,
-        })
-      ) {
-        toast.error(getApiErrorMessage(error, t.login.toasts.failedOtp))
-      }
-    } finally {
-      setLoading(false)
-    }
   }
 
   return (
@@ -78,7 +56,6 @@ export function SignupMobilePage() {
           type="tel"
           dir="ltr"
           maxLength={11}
-          disabled={loading}
           value={state.signup.mobile}
           onChange={(event) => setMobile("signup", event.target.value)}
           className={`h-11 ${isRtl ? "text-end" : "text-start"}`}
@@ -86,10 +63,9 @@ export function SignupMobilePage() {
 
         <Button
           onClick={handleContinue}
-          disabled={loading || state.cooldowns.signupOtpSend > 0}
+          disabled={state.cooldowns.signupOtpSend > 0}
           className="h-11 w-full"
         >
-          {loading && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
           {cooldownLabel || t.login.sendSignupCode}
         </Button>
 

src/pages/auth/SignupOtpPage.tsx

@@ -1,55 +1,161 @@
-import { useState } from "react"
+import { Loader2 } from "lucide-react"
-import { Link, Navigate, useNavigate } from "react-router-dom"
+import { useEffect, useMemo, useRef, useState } from "react"
+import { Navigate, useNavigate } from "react-router-dom"
 import { toast } from "sonner"
 
+import { sendOtp } from "../../api/users"
 import { Button } from "../../components/ui/button"
-import { Input } from "../../components/ui/input"
 import { useAuthFlow } from "../../context/AuthFlowContext"
 import { useTranslation } from "../../hooks/useTranslation"
+import { AuthOtpInput } from "./AuthOtpInput"
 import { AuthPanel } from "./AuthPanel"
+import { formatCooldown, getApiErrorMessage, getOtpRemainingSeconds, handleThrottleError } from "./utils"
 
 export function SignupOtpPage() {
   const navigate = useNavigate()
-  const { t } = useTranslation()
+  const { t, lang } = useTranslation()
-  const { state, setCode } = useAuthFlow()
+  const {
-  const [loading, setLoading] = useState(false)
+    state,
+    setCode,
+    setCooldown,
+    clearCooldown,
+    setOtpDelivery,
+    clearOtpDelivery,
+  } = useAuthFlow()
+  const isRtl = lang === "fa"
+  const autoSendStartedRef = useRef(false)
+  const [isSendingOtp, setIsSendingOtp] = useState(false)
+  const [isContinuing, setIsContinuing] = useState(false)
+  const [now, setNow] = useState(Date.now())
 
   if (!state.signup.mobile) {
     return <Navigate to="/auth/signup" replace />
   }
 
-  const handleContinue = async (event: React.FormEvent) => {
+  useEffect(() => {
-    event.preventDefault()
+    if (!state.signup.otpExpiresAt || getOtpRemainingSeconds(state.signup.otpExpiresAt) <= 0) {
+      return
+    }
 
-    if (!state.signup.code) {
+    const timer = window.setInterval(() => {
+      setNow(Date.now())
+    }, 1000)
+
+    return () => window.clearInterval(timer)
+  }, [state.signup.otpExpiresAt])
+
+  const sendSignupOtp = async () => {
+    setIsSendingOtp(true)
+    try {
+      const response = await sendOtp(state.signup.mobile, "register")
+      clearCooldown("signupOtpSend")
+      setCode("signup", "")
+      setOtpDelivery("signup", response.expires_in_seconds)
+      setNow(Date.now())
+      toast.success(t.login.toasts.verifySent)
+    } catch (error) {
+      clearOtpDelivery("signup")
+      if (
+        !handleThrottleError({
+          error,
+          cooldownKey: "signupOtpSend",
+          setCooldown,
+          formatTime: (seconds) => formatCooldown(seconds, isRtl),
+          throttleCopy: t.login.throttle,
+        })
+      ) {
+        toast.error(getApiErrorMessage(error, t.login.toasts.failedOtp))
+      }
+    } finally {
+      setIsSendingOtp(false)
+    }
+  }
+
+  useEffect(() => {
+    if (!state.signup.pendingOtpSend || autoSendStartedRef.current) {
+      return
+    }
+
+    autoSendStartedRef.current = true
+    void sendSignupOtp()
+  }, [state.signup.pendingOtpSend])
+
+  const otpRemainingSeconds = state.signup.otpExpiresAt
+    ? Math.max(0, Math.ceil((state.signup.otpExpiresAt - now) / 1000))
+    : 0
+
+  const alert = useMemo(() => {
+    if (state.cooldowns.signupOtpSend <= 0) {
+      return null
+    }
+
+    const formatted = formatCooldown(state.cooldowns.signupOtpSend, isRtl)
+    return {
+      title: t.login.throttle.title,
+      description: t.login.throttle.otpSendMessage(formatted),
+    }
+  }, [isRtl, state.cooldowns.signupOtpSend, t.login.throttle])
+
+  const expiryMessage =
+    otpRemainingSeconds > 0
+      ? t.login.otpExpiresIn(formatCooldown(otpRemainingSeconds, isRtl))
+      : state.signup.otpExpiresAt
+        ? t.login.otpExpired
+        : null
+
+  const continueToPassword = async (code: string) => {
+    if (code.length !== 5) {
       toast.error(t.login.toasts.enterOtp)
       return
     }
 
-    setLoading(true)
+    setIsContinuing(true)
+    setCode("signup", code)
     navigate("/auth/signup/password")
   }
 
+  const isBusy = isSendingOtp || isContinuing
+
   return (
     <AuthPanel
       title={t.login.signupVerifyTitle}
       description={t.login.sentCodeDesc(state.signup.mobile)}
+      alert={alert}
     >
-      <form onSubmit={handleContinue} className="grid gap-4">
+      <form
-        <Input
+        onSubmit={(event) => {
+          event.preventDefault()
+          void continueToPassword(state.signup.code)
+        }}
+        className="grid gap-4"
+      >
+        <AuthOtpInput
           id="signup-otp"
-          placeholder={t.login.otpPlaceholder}
-          type="text"
-          dir="ltr"
-          maxLength={6}
-          disabled={loading}
           value={state.signup.code}
-          onChange={(event) => setCode("signup", event.target.value)}
+          disabled={isBusy}
-          className="h-11 text-center text-lg tracking-widest"
+          onChange={(value) => setCode("signup", value)}
+          onComplete={(value) => void continueToPassword(value)}
         />
 
-        <Button type="submit" className="h-11 w-full" disabled={loading}>
+        {expiryMessage ? (
-          {t.login.continueToPassword}
+          <p className="text-center text-sm text-slate-500 dark:text-slate-400">{expiryMessage}</p>
+        ) : null}
+
+        <Button type="submit" className="h-11 w-full" disabled={isBusy}>
+          {(isSendingOtp || isContinuing) && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
+          {isSendingOtp ? t.login.sendingOtp : t.login.continueToPassword}
+        </Button>
+
+        <Button
+          type="button"
+          variant="outline"
+          className="h-11 w-full"
+          disabled={isBusy || otpRemainingSeconds > 0 || state.cooldowns.signupOtpSend > 0}
+          onClick={() => void sendSignupOtp()}
+        >
+          {state.cooldowns.signupOtpSend > 0
+            ? t.login.throttle.countdownLabel(formatCooldown(state.cooldowns.signupOtpSend, isRtl))
+            : t.login.resendOtp}
         </Button>
       </form>
     </AuthPanel>

src/pages/auth/utils.ts

@@ -17,6 +17,14 @@ export const formatCooldown = (seconds: number, isRtl: boolean) => {
   return localizeDigits(base, isRtl)
 }
 
+export const getOtpRemainingSeconds = (expiresAt: number | null) => {
+  if (!expiresAt) {
+    return 0
+  }
+
+  return Math.max(0, Math.ceil((expiresAt - Date.now()) / 1000))
+}
+
 export const getApiErrorMessage = (error: unknown, fallbackMessage: string) => {
   if (error instanceof ApiError) {
     return error.message