auth in lottery fix on refresh

app/(main)/lottery/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useLotteryAuth } from '@/store/useLotteryAuth';
 import ProtectedRoute from '@/components/lottery/auth/ProtectedRoute';
 import LotteryHeader from '@/components/lottery/LotteryHeader';
@@ -10,11 +10,28 @@ import LotteryRulesSection from '@/components/lottery/rules/LotteryRulesSection'
 import LotteryCountDown from '@/components/lottery/countDown/LotteryCountDown';
 import LotteryCountDownAllert from '@/components/lottery/countDown/countDownAllert/LotteryCountDownAllert';
 import { LotteryWinnerDataSimplified } from '@/typings/lottery/lottery.types';
+import { Queries } from '@/api/queries';
 
 const LotteryPage = () => {
-  const { lotteryData } = useLotteryAuth();
+  const { lotteryData, setAuth } = useLotteryAuth();
   const [status, setStatus] = useState<'not-started' | 'started' | 'ended'>('not-started');
 
+  // ✅ Fetch fresh data on page load
+  useEffect(() => {
+    const phone = localStorage.getItem('lotteryPhone');
+    const code = localStorage.getItem('lotteryCode');
+
+    if (phone && code) {
+      Queries.authenticateLottery(phone, code)
+        .then((response) => {
+          setAuth(response, phone, code);
+        })
+        .catch((err) => {
+          console.error('Failed to fetch lottery data:', err);
+        });
+    }
+  }, [setAuth]);
+
   return (
     <ProtectedRoute>
       <div className="flex flex-col md:gap-[128px] gap-[80px] font-roboto md:pt-[64px] sm:pt-[48px] pt-[40px] ms:pb-[128px] pb-[80px] text-lightOnSurface">

components/lottery/auth/LotteryAuthForm.tsx

@@ -15,18 +15,30 @@ const LotteryAuthForm = () => {
 
   const validatePhone = (value: string) => {
     const phoneRegex = /^993\d{8}$/;
-    return phoneRegex.test(value);
+    const isValid = phoneRegex.test(value);
+
+    console.log('Phone Input:', value);
+    console.log('Regex Check Result:', isValid);
+
+    return isValid;
   };
 
   const validateCode = (value: string) => {
     const codeRegex = /^\d-\d{10}$/;
-    return codeRegex.test(value);
+    const isValid = codeRegex.test(value);
+
+    console.log('Code Input:', value);
+    console.log('Regex Check Result:', isValid);
+
+    return isValid;
   };
 
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     setError(null);
 
+    console.log('Submitting Phone:', phone);
+
     if (!validatePhone(phone)) {
       setError('Telefon belgisi nädogry');
       return;
@@ -41,10 +53,14 @@ const LotteryAuthForm = () => {
 
     try {
       const response = await Queries.authenticateLottery(phone, code);
-      setAuth(response, phone, code);
+
-      if (response.errorMessage?.length) {
+      if (response.errorMessage) {
         setError('Telefon belgisi ýa-da açar nädogry');
       } else {
+        localStorage.setItem('lotteryPhone', phone);
+        localStorage.setItem('lotteryCode', code);
+
+        setAuth(response, phone, code);
         router.replace('/lottery');
       }
     } catch (err) {
@@ -56,9 +72,8 @@ const LotteryAuthForm = () => {
   };
 
   const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value.replace(/\D/g, ''); // Remove non-digits
+    const value = e.target.value.replace(/\\D/g, '');
     if (value.length <= 11) {
-      // Limit to 11 digits (993 + 8 digits)
       setPhone(value);
     }
   };
@@ -66,7 +81,6 @@ const LotteryAuthForm = () => {
   const handleCodeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     if (value.length <= 12) {
-      // Limit to 12 characters (X-XXXXXXXXXX)
       setCode(value);
     }
   };

components/lottery/auth/ProtectedRoute.tsx

@@ -7,37 +7,40 @@ import { Queries } from '@/api/queries';
 
 const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
   const router = useRouter();
-  const { isAuthenticated, phone, code, setAuth } = useLotteryAuth();
+  const { isAuthenticated, setAuth } = useLotteryAuth();
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     const checkAuth = async () => {
-      // First, check if we have credentials in localStorage
+      // ✅ Check credentials from localStorage
+      const phone = localStorage.getItem('lotteryPhone');
+      const code = localStorage.getItem('lotteryCode');
+
       if (phone && code) {
         try {
-          // Try to authenticate with stored credentials
+          // ✅ Authenticate using stored credentials
           const response = await Queries.authenticateLottery(phone, code);
 
           if (response.errorMessage) {
+            // If authentication fails, redirect to the auth page
             router.replace('/lottery/auth');
           } else {
+            // ✅ Set the authenticated state
             setAuth(response, phone, code);
             setIsLoading(false);
           }
-          return; // Exit early if authentication successful
         } catch (err) {
           console.error('Authentication failed:', err);
-          // Only redirect if API request fails
           router.replace('/lottery/auth');
         }
       } else {
-        // Only redirect if no credentials found
+        // Redirect to the auth page if no credentials are found
         router.replace('/lottery/auth');
       }
     };
 
     checkAuth();
-  }, []);
+  }, [router, setAuth]);
 
   // Show nothing while checking auth
   if (isLoading) {