Added revalidation component to restore previous user sessions

src/App.tsx

@@ -8,17 +8,28 @@ import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import ErrorPage from "./Pages/ErrorPage/ErrorPage";
 import DashboardPage from "./Pages/DashboardPage/DashboardPage";
+import Revalidator from "./Components/Revalidator/Revalidator";
 
 const queryClient = new QueryClient();
 const router = createHashRouter([
   {
     path: "/",
-    element: <LandingPage />,
+    element: (
+      <>
+        <Revalidator />
+        <LandingPage />
+      </>
+    ),
     errorElement: <ErrorPage />,
   },
   {
     path: "/dashboard",
-    element: <DashboardPage />,
+    element: (
+      <>
+        <Revalidator />
+        <DashboardPage />
+      </>
+    ),
     errorElement: <ErrorPage />,
   },
 ]);

src/Components/API/API.tsx

@@ -1,10 +1,40 @@
+/* eslint-disable react-refresh/only-export-components */
 import axios from "axios";
 import { ActivationType, LoginType, RegisterType } from "../Types/Types";
 
-// Product APIs
 const instance = axios.create({
   baseURL: "http://localhost:8000/",
 });
+// Token Handling
+export async function getAccessToken() {
+  const accessToken = await localStorage.getItem("access_token");
+  return accessToken;
+}
+
+export async function getRefreshToken() {
+  const refreshToken = await localStorage.getItem("refresh_token");
+  return refreshToken;
+}
+
+export async function setAccessToken(access: string) {
+  await localStorage.setItem("access_token", access);
+  return true;
+}
+
+export async function setRefreshToken(refresh: string) {
+  await localStorage.setItem("refresh_token", refresh);
+  return true;
+}
+
+// Header Config Template for REST
+export async function GetConfig() {
+  const accessToken = await getAccessToken();
+  return {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  };
+}
 
 // User APIs
 
@@ -25,7 +55,10 @@ export function LoginAPI(user: LoginType) {
   return instance
     .post("api/v1/accounts/jwt/create/", user)
     .then(async (response) => {
-      localStorage.setItem("token", JSON.stringify(response.data.auth_token));
+      console.log(response.data);
+      setAccessToken(response.data.access);
+      setRefreshToken(response.data.refresh);
+
       console.log("Login Success ");
       return true;
     })
@@ -35,6 +68,21 @@ export function LoginAPI(user: LoginType) {
     });
 }
 
+export async function JWTRefreshAPI() {
+  const refresh = await getRefreshToken();
+  return instance
+    .post("api/v1/accounts/jwt/refresh/", {
+      refresh: refresh,
+    })
+    .then(async (response) => {
+      setAccessToken(response.data.access);
+      return true;
+    })
+    .catch(() => {
+      return false;
+    });
+}
+
 export function UserAPI() {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
   return instance
@@ -44,7 +92,6 @@ export function UserAPI() {
       },
     })
     .then((response) => {
-      console.log(response.data);
       return response.data;
     })
     .catch(() => {

src/Components/Header/Header.tsx

@@ -1,28 +1,14 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import styles, { colors } from "../../styles";
 import MenuIcon from "@mui/icons-material/Menu";
 import SidebarModal from "../SidebarModal/SidebarModal";
 import { Drawer } from "@mui/material";
-import { useSelector } from "react-redux";
-import { RootState } from "../Plugins/Redux/Store/Store";
-import { useNavigate } from "react-router-dom";
-
 export interface props {
   label: string;
 }
 
 export default function Header(props: props) {
   const [SidebarOpen, SetSidebarOpen] = useState(false);
-  const authenticated = useSelector((state: RootState) => state.auth.value);
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (!authenticated) {
-      navigate("/");
-      console.log("Not logged in. Redirecting to landing page");
-    }
-  }, [authenticated, navigate]);
-
   return (
     <div
       style={{

src/Components/Revalidator/Revalidator.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { JWTRefreshAPI, setAccessToken, setRefreshToken } from "../API/API";
+import { auth_toggle } from "../Plugins/Redux/Slices/AuthSlice/AuthSlice";
+import { RootState } from "../Plugins/Redux/Store/Store";
+
+export default function Revalidator() {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const authenticated = useSelector((state: RootState) => state.auth.value);
+  const [rechecked, setRechecked] = useState(false);
+
+  useEffect(() => {
+    if (!authenticated && rechecked) {
+      navigate("/");
+      console.log("Not logged in");
+    }
+  }, [authenticated, navigate, rechecked]);
+
+  useEffect(() => {
+    if (!authenticated) {
+      JWTRefreshAPI().then(async (response) => {
+        if (response) {
+          await dispatch(auth_toggle());
+          navigate("/dashboard");
+          console.log("User session restored");
+        } else {
+          await setRefreshToken("");
+          await setAccessToken("");
+          console.log("User session expired");
+        }
+        setRechecked(true);
+      });
+    }
+  }, []);
+
+  return <></>;
+}