Add IsAuthenticate Hook

frontend/src/components/authentication/AuthenticationPage.jsx

@@ -69,7 +69,7 @@ export default function SignInSide() {
             localStorage.setItem('access_token', res.data.access);
             localStorage.setItem('refresh_token', res.data.refresh);
             axiosapi.axiosInstance.defaults.headers['Authorization'] = "Bearer " + res.data.access;
-            Navigate('/testAuth');
+            Navigate('/');
         }).catch(err => {
             console.log('Login failed'); // Handle login failure
             console.log(err)
@@ -86,7 +86,7 @@ export default function SignInSide() {
             localStorage.setItem('access_token', googleResponse.data.access_token);
             localStorage.setItem('refresh_token', googleResponse.data.refresh_token);
             axiosapi.axiosInstance.defaults.headers['Authorization'] = "Bearer " + googleResponse.data.access_token;
-            Navigate('/testAuth');
+            Navigate('/');
         }
     }
 
@@ -103,6 +103,7 @@ export default function SignInSide() {
             // Save the tokens in localStorage
             localStorage.setItem('access_token', access_token);
             localStorage.setItem('refresh_token', refresh_token);
+            Navigate('/');
               }
         } catch (error) {
           console.error('Error with the POST request:', error);

frontend/src/components/authentication/IsAuthenticated.jsx

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import axiosapi from './axiosapi';
+
+function IsAuthenticated() {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+  useEffect(() => {
+    const checkAuthentication = async () => {
+      const access_token = localStorage.getItem('access_token');
+      const refresh_token = localStorage.getItem('refresh_token');
+
+      if (access_token && refresh_token) {
+        const isAccessTokenExpired = checkIfAccessTokenExpired(access_token);
+
+        if (!isAccessTokenExpired) {
+          setIsAuthenticated(true);
+        } else {
+          try {
+            // Attempt to refresh the access token using the refresh token
+            const response = await axiosapi.refreshAccessToken(refresh_token);
+            if (response.status === 200) {
+              const newAccessToken = response.data.access_token;
+              localStorage.setItem('access_token', newAccessToken);
+              setIsAuthenticated(true);
+            } else {
+              setIsAuthenticated(false);
+            }
+          } catch (error) {
+            setIsAuthenticated(false);
+          }
+        }
+      } else {
+        setIsAuthenticated(false);
+      }
+    };
+
+    checkAuthentication();
+  }, []);
+
+  const checkIfAccessTokenExpired = (accessToken) => {
+    // Need to change logic again!
+    return !accessToken;
+  };
+
+  return isAuthenticated;
+}
+
+export default IsAuthenticated;

frontend/src/components/authentication/SignUpPage.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import axiosapi from '../../api/axiosapi';
 
 import Avatar from '@mui/material/Avatar';
@@ -32,6 +33,9 @@ function Copyright(props) {
 const defaultTheme = createTheme();
 
 export default function SignUp() {
+
+    const Navigate = useNavigate();
+
     const [formData, setFormData] = useState({
       email: '',
       username: '',
@@ -53,6 +57,7 @@ export default function SignUp() {
       } finally {
           setIsSubmitting(false);
       }
+      Navigate('/login');
     };
   
     const handleChange = (e) => {

frontend/src/components/testAuth.jsx

@@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button';
 import { useNavigate } from 'react-router-dom';
 
 function TestAuth() {
-    let history = useNavigate();
+    let Navigate = useNavigate();
 
     const [message, setMessage] = useState("");
 
@@ -22,19 +22,19 @@ function TestAuth() {
     const logout = () => {
         // Log out the user, clear tokens, and navigate to the "/testAuth" route
         axiosapi.apiUserLogout();
-        history('/testAuth');
+        Navigate('/testAuth');
     }
 
     return (
         <div>
             {message !== "" && (
                 <div>
-                    <h1>Hello!</h1>
+                    <h1 class="text-xl font-bold">Login! Hello!</h1>
                     <h2>{message}</h2>
                     <Button variant="contained" onClick={logout}>Logout</Button>
                 </div>
             )}
-            {message === "" && <h1>Need to sign in</h1>}
+            {message === "" && <h1 class="text-xl font-bold">Need to sign in, No authentication found</h1>}
         </div>
     );
 }