From 4424fc8e873f6e9aab8e1ecb1fc8c5575117e4de Mon Sep 17 00:00:00 2001
From: Mohammad Sajad Pourajam <prj.sajad85@gmail.com>
Date: Fri, 20 Feb 2026 14:09:09 +0330
Subject: [PATCH] Refactor AuthRedirect component to use useEffect for
 redirection logic and update Login component to handle OTP submission more
 flexibly. Adjusted OTP input handling to trigger submission on reaching the
 required length, improving user experience during login.

---
 src/components/AuthRedirect.tsx | 18 +++++++++++++-----
 src/views/Login.tsx             | 16 ++++++++++------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/AuthRedirect.tsx b/src/components/AuthRedirect.tsx
index ab99ad9..e4ff1f1 100644
--- a/src/components/AuthRedirect.tsx
+++ b/src/components/AuthRedirect.tsx
@@ -1,19 +1,27 @@
 'use client'
 
+// React Imports
+import { useEffect } from 'react'
+
 // Next Imports
-import { redirect, usePathname } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
 
 // Config Imports
 import themeConfig from '@configs/themeConfig'
 
 const AuthRedirect = () => {
   const pathname = usePathname()
+  const router = useRouter()
 
-  const redirectUrl = `/login?redirectTo=${pathname}`
-  const login = `/login`
-  const homePage = themeConfig.homePageUrl
+  useEffect(() => {
+    const login = '/login'
+    const homePage = themeConfig.homePageUrl
+    const redirectUrl =
+      pathname === login ? login : pathname === homePage ? login : `/login?redirectTo=${pathname}`
+    router.replace(redirectUrl)
+  }, [pathname, router])
 
-  return redirect(pathname === login ? login : pathname === homePage ? login : redirectUrl)
+  return null
 }
 
 export default AuthRedirect
diff --git a/src/views/Login.tsx b/src/views/Login.tsx
index c11ffae..0942482 100644
--- a/src/views/Login.tsx
+++ b/src/views/Login.tsx
@@ -155,8 +155,9 @@ const Login = ({ mode }: { mode: SystemMode }) => {
     }
   }
 
-  const onOtpSubmit = async () => {
-    if (otp.length !== 6) {
+  const onOtpSubmit = async (otpValue?: string) => {
+    const code = otpValue ?? otp
+    if (code.length !== 6) {
       setErrorState({ message: t('errors.incompleteOtp') })
       return
     }
@@ -166,7 +167,7 @@ const Login = ({ mode }: { mode: SystemMode }) => {
 
     try {
       const phoneNumber = getValues('phone_number')
-      await login(phoneNumber, otp, tempToken)
+      await login(phoneNumber, code, tempToken)
       
       // Redirect on successful login
       const redirectURL = searchParams.get('redirectTo') ?? '/'
@@ -265,9 +266,12 @@ const Login = ({ mode }: { mode: SystemMode }) => {
                 <OtpContainer>
                   <OTPInput
                     value={otp}
-                    onChange={setOtp}
+                    onChange={(value) => {
+                      setOtp(value)
+                      if (value.length === 6) onOtpSubmit(value)
+                    }}
                     maxLength={6}
-                    containerClassName='flex gap-2'
+                    containerClassName='flex gap-2 ltr:flex-row rtl:flex-row-reverse'
                     render={({ slots }) => (
                       <>
                         {slots.map((slot, idx) => (
@@ -290,7 +294,7 @@ const Login = ({ mode }: { mode: SystemMode }) => {
                   />
                 </OtpContainer>
               </div>
-              <Button fullWidth variant='contained' onClick={onOtpSubmit} disabled={isLoading || otp.length !== 6}>
+              <Button fullWidth variant='contained' onClick={() => onOtpSubmit()} disabled={isLoading || otp.length !== 6}>
                 {isLoading ? <CircularProgress size={24} /> : t('verifyOtp')}
               </Button>
               <Button fullWidth variant='text' onClick={handleBackToPhone} disabled={isLoading}>