fix:protected.jsx

GDGVIT · Aug 18, 2024 · 0f9a186 · 0f9a186
1 parent 4959609
commit 0f9a186
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 51 deletions.
diff --git a/ao3 webpages/components/Login.jsx b/ao3 webpages/components/Login.jsx
@@ -14,42 +14,51 @@ export default function Login() {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-  
+
     try {
-      const response = await fetch('https://ao3-chrome-extension-backend.onrender.com/auth/login', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        body: new URLSearchParams({
-          email: email,
-          password: password
-        }),
-      });
-
-      const data = await response.json();
-
-      if (response.ok) {
-        document.cookie = `accessToken=${data.accessToken}; path=/; secure; samesite=strict; max-age=31536000`;
-        document.cookie = `refreshToken=${data.refreshToken}; path=/; secure; samesite=strict; max-age=31536000`;
+        const response = await fetch('https://ao3-chrome-extension-backend.onrender.com/auth/login', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+            },
+            body: new URLSearchParams({
+                email: email,
+                password: password
+            }),
+        });
 
-
-        setMessage('Login successful');
-        setMessageType('success');
-
-        setTimeout(() => {
-          window.location.href = '/dashboard';
-        }, 1500);
-      } else {
-        setMessage(data.message || 'Login failed');
-        setMessageType('error');
-      }
+        const data = await response.json();
+        console.log('Response data:', data);
+
+        if (response.ok) {
+            // Ensure tokens are set correctly in localStorage
+            localStorage.setItem('accessToken', data.accessToken);
+            localStorage.setItem('refreshToken', data.refreshToken);
+
+            // console.log('Tokens set in localStorage:', {
+            //     accessToken: localStorage.getItem('accessToken'),
+            //     refreshToken: localStorage.getItem('refreshToken'),
+            // });
+
+
+            setMessage('Login successful');
+            setMessageType('success');
+
+            setTimeout(() => {
+                window.location.href = '/dashboard';
+            }, 1500);
+        } else {
+            setMessage(data.message || 'Login failed');
+            setMessageType('error');
+        }
     } catch (error) {
-      console.error('Error:', error);
-      setMessage('An error occurred. Please try again.');
-      setMessageType('error');
+        console.error('Error:', error);
+        setMessage('An error occurred. Please try again.');
+        setMessageType('error');
     }
-  };
+};
+
+
 
   return (
     <div className="login-container">

diff --git a/ao3 webpages/src/utils/Protected.jsx b/ao3 webpages/src/utils/Protected.jsx
@@ -1,21 +1,21 @@
 import { useEffect, useState } from "react";
 import { Outlet, Navigate } from "react-router-dom";
 
-export default function Protect() {
+export default function ProtectedRoute() {
     const [isAuth, setAuth] = useState(false);
+    const [loading, setLoading] = useState(true); // Added loading state to handle async checks
 
     useEffect(() => {
         const checkAuth = async () => {
-            // Correctly parse cookies
-            const cookies = document.cookie.split('; ').reduce((prev, current) => {
-                const [name, value] = current.split('=');
-                prev[name] = value;
-                return prev;
-            }, {});
+            const accessToken = localStorage.getItem('accessToken');
+            const refreshToken = localStorage.getItem('refreshToken');
+            console.log('Checking tokens:', { accessToken, refreshToken });
 
-            const accessToken = cookies.accessToken;
-            const refreshToken = cookies.refreshToken;
-            console.log(accessToken, refreshToken);
+            if (!accessToken || !refreshToken) {
+                setAuth(false);
+                setLoading(false);
+                return;
+            }
 
             try {
                 const response = await fetch('https://ao3-chrome-extension-backend.onrender.com/auth/validate', {
@@ -27,25 +27,27 @@ export default function Protect() {
                 });
 
                 if (response.ok) {
-                    const data = await response.json();
-
-                    // Store new tokens in cookies
-                    document.cookie = `accessToken=${data.accessToken}; path=/; secure; samesite=strict`;
-                    document.cookie = `refreshToken=${data.refreshToken}; path=/; secure; samesite=strict`;
-
+                    // Tokens are valid
                     setAuth(true);
                 } else {
-                    console.log("Error: " + response.status);
+                    // Tokens are invalid
+                    console.log('Token validation failed:', response.status);
                     setAuth(false);
                 }
             } catch (error) {
-                console.log(error);
+                console.error('Error during token validation:', error);
                 setAuth(false);
+            } finally {
+                setLoading(false); // Update loading state
             }
         };
 
         checkAuth();
     }, []);
 
+    if (loading) {
+        return <div>Loading...</div>; // Show a loading state while checking
+    }
+
     return isAuth ? <Outlet /> : <Navigate to="/login" />;
-}
+}