Add Redirect Router if not authen

frontend/src/App.jsx

@@ -11,6 +11,7 @@ import Calendar from "./components/calendar/calendar";
 import KanbanBoard from "./components/kanbanBoard/kanbanBoard";
 import IconSideNav from "./components/navigations/IconSideNav";
 import Eisenhower from "./components/eisenhowerMatrix/Eisenhower";
+import PrivateRoute from "./PrivateRoute";
 
 const App = () => {
   const location = useLocation();
@@ -25,11 +26,19 @@ const App = () => {
         <div className={isLoginPageOrSignUpPage ? "" : "flex items-center justify-center"}>
           <Routes>
             <Route path="/" element={<Home />} />
-              <Route path="/tasks" element={<KanbanBoard />} />
+            <Route exact path="/tasks" element={<PrivateRoute />}>
+              <Route exact path="/tasks" element={<KanbanBoard />} />
+            </Route>
             <Route path="/testAuth" element={<TestAuth />} />
-              <Route path="/update_profile" element={<ProfileUpdate />} />
-              <Route path="/calendar" element={<Calendar />} />
-              <Route path="/priority" element={<Eisenhower />} />
+            <Route exact path="/update_profile" element={<PrivateRoute />}>
+              <Route exact path="/update_profile" element={<ProfileUpdate />} />
+            </Route>
+            <Route exact path="/calendar" element={<PrivateRoute />}>
+              <Route exact path="/calendar" element={<Calendar />} />
+            </Route>
+            <Route exact path="/priority" element={<PrivateRoute />}>
+              <Route exact path="/priority" element={<Eisenhower />} />
+            </Route>
             <Route path="/login" element={<LoginPage />} />
             <Route path="/signup" element={<SignUpPage />} />
           </Routes>

frontend/src/PrivateRoute.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import IsAuthenticated from './hooks/authentication/IsAuthenticated';
+
+const PrivateRoute = () => {
+    const auth = IsAuthenticated();
+    return auth ? <Outlet /> : <Navigate to="/login" />;
+}
+
+export default PrivateRoute;

frontend/src/api/configs/AxiosConfig.jsx

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { redirect } from 'react-router-dom';
 
 const axiosInstance = axios.create({
     baseURL: 'http://127.0.0.1:8000/api/',

frontend/src/components/authentication/IsAuthenticated.jsx

@@ -1,19 +0,0 @@
-import { useState, useEffect } from 'react';
-
-function IsAuthenticated() {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-
-  useEffect(() => {
-    const access_token = localStorage.getItem('access_token');
-
-    if (access_token) {
-      setIsAuthenticated(true);
-    } else {
-      setIsAuthenticated(false);
-    }
-  }, []);
-
-  return isAuthenticated;
-}
-
-export default IsAuthenticated;

frontend/src/components/navigations/Navbar.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useNavigate } from "react-router-dom";
-import IsAuthenticated from "../authentication/IsAuthenticated";
+import IsAuthenticated from "../../hooks/authentication/IsAuthenticated";
 import axiosapi from "../../api/AuthenticationApi";
 
 const settings = {

frontend/src/hooks/authentication/IsAuthenticated.jsx

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+
+function IsAuthenticated() {
+  const [isAuthenticated, setIsAuthenticated] = useState(() => {
+    const access_token = localStorage.getItem('access_token');
+    return !!access_token;
+  });
+
+  useEffect(() => {
+    const handleTokenChange = () => {
+      const newAccessToken = localStorage.getItem('access_token');
+      setIsAuthenticated(!!newAccessToken);
+    };
+
+    window.addEventListener('storage', handleTokenChange);
+
+    return () => {
+      window.removeEventListener('storage', handleTokenChange);
+    };
+  }, []);
+
+  return isAuthenticated;
+}
+
+export default IsAuthenticated;

frontend/src/main.jsx

@@ -1,15 +1,17 @@
-import React from "react";
+import React, { Fragment } from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
-import { GoogleOAuthProvider} from '@react-oauth/google';
-import { BrowserRouter } from 'react-router-dom';
+import { GoogleOAuthProvider } from "@react-oauth/google";
+import { BrowserRouter } from "react-router-dom";
 
-const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID
+const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
     <BrowserRouter>
+      <Fragment>
         <App />
+      </Fragment>
     </BrowserRouter>
   </GoogleOAuthProvider>
 );