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

@@ -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

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}>