Merge pull request #22 from CS3219-AY2425S1/login-frontend

Fix access without token issue

Author: RingoftheKing

Frontend/src/App.js

@@ -1,11 +1,10 @@
 import './App.css';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import CreateQn from './components/question/CreateQn';
-import EditQn from './components/question/EditQn';
 import Home from './components/Home';
 import Login from './components/auth/Login';
 import SignUp from './components/auth/SignUp';
+import ProtectedRoute from './components/routes/ProtectedRoute';
 
 function App() {
   return (
@@ -22,7 +21,7 @@ function App() {
           <Route path='/signup' element={<SignUp />} />
 
           {/* Home page route */}
-          <Route path='/home' element={<Home />} />
+          <Route path='/home' element={<ProtectedRoute><Home /></ProtectedRoute>} />
         </Routes>
       </BrowserRouter>
     </div>

Frontend/src/components/auth/Login.jsx

@@ -23,7 +23,15 @@ const Login = () => {
     .then(result => {
       // navigate to home page if successful
       console.log(result);
-      navigate('/home')
+      const jwt_token = result.data.data.accessToken;
+
+      if (jwt_token) {
+        sessionStorage.setItem('jwt_token', jwt_token);
+        navigate('/home');
+      } else {
+        setError('Token not found, authentication failed.');
+      }
+      
     })
     .catch(e => {
       // handle errors here 

Frontend/src/components/routes/ProtectedRoute.jsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react';
+import {Navigate} from 'react-router-dom';
+import userService from '../../services/users';
+
+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}`,
+            },
+        };
+
+        // 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/>; 
+    }
+
+    return isAuthenticated ? children : <Navigate to="/login"/>
+}
+
+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 };