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();
@@ -18,24 +19,32 @@ const App = () => {
   const isLoginPageOrSignUpPage = prevention.some(_ => location.pathname.includes(_));
 
   return (
-      <div className={isLoginPageOrSignUpPage ? "" : "display: flex"}>
+    <div className={isLoginPageOrSignUpPage ? "" : "display: flex"}>
-        {!isLoginPageOrSignUpPage && <IconSideNav />}
+      {!isLoginPageOrSignUpPage && <IconSideNav />}
-        <div className={isLoginPageOrSignUpPage ? "" : "flex-1"}>
+      <div className={isLoginPageOrSignUpPage ? "" : "flex-1"}>
-          <NavBar />
+        <NavBar />
-          <div className={isLoginPageOrSignUpPage ? "" : "flex items-center justify-center"}>
+        <div className={isLoginPageOrSignUpPage ? "" : "flex items-center justify-center"}>
-            <Routes>
+          <Routes>
-              <Route path="/" element={<Home />} />
+            <Route path="/" element={<Home />} />
-              <Route path="/tasks" element={<KanbanBoard />} />
+            <Route exact path="/tasks" element={<PrivateRoute />}>
-              <Route path="/testAuth" element={<TestAuth />} />
+              <Route exact path="/tasks" element={<KanbanBoard />} />
-              <Route path="/update_profile" element={<ProfileUpdate />} />
+            </Route>
-              <Route path="/calendar" element={<Calendar />} />
+            <Route path="/testAuth" element={<TestAuth />} />
-              <Route path="/priority" element={<Eisenhower />} />
+            <Route exact path="/update_profile" element={<PrivateRoute />}>
-              <Route path="/login" element={<LoginPage />} />
+              <Route exact path="/update_profile" element={<ProfileUpdate />} />
-              <Route path="/signup" element={<SignUpPage />} />
+            </Route>
-            </Routes>
+            <Route exact path="/calendar" element={<PrivateRoute />}>
-          </div>
+              <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>
         </div>
       </div>
+    </div>
   );
 };
 

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/',
@@ -16,7 +17,7 @@ axiosInstance.interceptors.response.use(
     error => {
         const originalRequest = error.config;
         const refresh_token = localStorage.getItem('refresh_token');
-
+        
         // Check if the error is due to 401 and a refresh token is available
         if (error.response.status === 401 && error.response.statusText === "Unauthorized" && refresh_token !== "undefined") {
             return axiosInstance

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 { GoogleOAuthProvider } from "@react-oauth/google";
-import { BrowserRouter } from 'react-router-dom';
+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>
-      <App />
+      <Fragment>
+        <App />
+      </Fragment>
     </BrowserRouter>
   </GoogleOAuthProvider>
-);
+);