Use token verification to protect home page instead

Author: qiaoen17

Frontend/src/components/routes/ProtectedRoute.jsx

@@ -1,18 +1,46 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {Navigate} from 'react-router-dom';
+import userService from '../../services/users';
 
-// Authenticate user only if they log in once, token is available until they close the tab/browser for now
-const isAuthenticated = () => {
-    const token = sessionStorage.getItem('jwt_token'); // Get token stored in session storage
-    if (!token) {
-        return false;
-    }
+const Loading = () => {
+    return (
+        <div className="d-flex flex-column justify-content-center align-items-center" style={{ minHeight: '100vh' }}>
+            <div className="spinner-border text-primary" role="status" style={{ width: '3rem', height: '3rem' }}>
+            </div>
+            <p className="mt-3">Loading, please wait...</p>
+        </div>
+    )
+}
+
+const ProtectedRoute = ({ children }) => {
+    const [isAuthenticated, setIsAuthenticated] = useState(null);
+
+    useEffect(() => {
+        const token = sessionStorage.getItem('jwt_token');
+        const authHeader = {
+            headers: {
+                'Authorization': `Bearer ${token}`,
+            },
+        };
 
-    return true;
-};
+        // verify token asynchronously, set auth status only after request completes
+        userService.verifyToken(authHeader)
+        .then(response => {
+            console.log(response);
+            setIsAuthenticated(true);
+        })
+        .catch(e => {
+            console.log('Error:', e);
+            setIsAuthenticated(false);
+        });
+    }, []);
+
+    // To wait for isAuth to generate, render loading spinner 
+    if (isAuthenticated == null) {
+        return <Loading/>; 
+    }
 
-const ProtectedRoute = ({children}) => {
-    return isAuthenticated() ? children : <Navigate to='/login'/>;
-};
+    return isAuthenticated ? children : <Navigate to="/login"/>
+}
 
-export default ProtectedRoute;
+export default ProtectedRoute;

Frontend/src/services/users.js

@@ -19,4 +19,9 @@ const loginUser = async (userCredentials) => {
     return response;
 }
 
-export default { createUser, getUser, loginUser };
+const verifyToken = async (authHeader) => {
+    const response = await axios.get(`${baseUrl}/${auth}/verify-token`, authHeader);
+    return response;
+}
+
+export default { createUser, getUser, loginUser, verifyToken };