diff --git a/src/App.tsx b/src/App.tsx index d25be6c..15f25b2 100644 --- a/src/App.tsx +++ b/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: , + element: ( + <> + + + + ), errorElement: , }, { path: "/dashboard", - element: , + element: ( + <> + + + + ), errorElement: , }, ]); diff --git a/src/Components/API/API.tsx b/src/Components/API/API.tsx index b92b7f2..93e20cc 100644 --- a/src/Components/API/API.tsx +++ b/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(() => { diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx index 424e57d..b650641 100644 --- a/src/Components/Header/Header.tsx +++ b/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 (
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 <>; +}