auth fix

Author: TenzDelek

src/App.tsx

@@ -1,11 +1,85 @@
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route, useNavigate } from "react-router-dom";
 import Login from "./routes/Login/Login.tsx";
 import { AuthenticationGuard } from "./providers/AuthGuard.tsx";
-import { lazy, Suspense } from "react";
+import { lazy, Suspense, useEffect, useState } from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+import { ACCESS_TOKEN, REFRESH_TOKEN } from "./lib/constants.ts";
+import { useMutation } from "@tanstack/react-query";
+import axiosInstance from "./config/axios-config.ts";
 const Text = lazy(() => import("./routes/Text/Text.tsx"));
 const Instance = lazy(() => import("./routes/Instance/Instance.tsx"));
 
+type Auth0UserType = {
+  getIdTokenClaims: () => Promise<any>;
+  isAuthenticated: boolean;
+  logout: (options?: { logoutParams?: { returnTo: string } }) => Promise<void>;
+};
+
 function App() {
+  const navigate = useNavigate();
+  const tokenRefreshIntervalMs = Number(60000) || 0;
+
+  const [intervalId, setIntervalId] = useState<ReturnType<
+    typeof setInterval
+  > | null>(null);
+  const { getIdTokenClaims, isAuthenticated, logout }: Auth0UserType =
+    useAuth0() as Auth0UserType;
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      const getToken = async () => {
+        try {
+          const claims = await getIdTokenClaims();
+          const idToken = claims.__raw;
+          if (Date.now() >= claims.exp * 1000) {
+            sessionStorage.removeItem(ACCESS_TOKEN);
+            localStorage.removeItem(REFRESH_TOKEN);
+            isAuthenticated &&
+              (await logout({
+                logoutParams: {
+                  returnTo: globalThis.location.origin,
+                },
+              }));
+          } else {
+            sessionStorage.setItem(ACCESS_TOKEN, idToken);
+          }
+        } catch (error) {
+          console.error("Error fetching token:", error);
+        }
+      };
+      getToken().then();
+    }
+  }, [isAuthenticated]);
+
+  const loginMutation = useMutation({
+    mutationFn: async (refreshToken: string) => {
+      const response = await axiosInstance.post("/api/v1/auth/refresh-token", {
+        token: refreshToken,
+      });
+      return response.data;
+    },
+    onSuccess: (data: { access_token: string }) => {
+      sessionStorage.setItem(ACCESS_TOKEN, data.access_token);
+      if (!intervalId) {
+        startTokenRefreshCounter();
+      }
+    },
+    onError: () => {
+      sessionStorage.removeItem(ACCESS_TOKEN);
+      localStorage.removeItem(REFRESH_TOKEN);
+      navigate("/login");
+    },
+  });
+
+  const startTokenRefreshCounter = () => {
+    const interval = setInterval(() => {
+      const refreshToken = localStorage.getItem(REFRESH_TOKEN);
+      if (refreshToken) {
+        loginMutation.mutate(refreshToken);
+      }
+    }, tokenRefreshIntervalMs);
+    setIntervalId(interval);
+  };
   return (
     <div className="flex w-full">
       <div className="flex-1 overflow-auto">

src/components/ui/molecules/user-profile/UserProfile.tsx

@@ -1,6 +1,5 @@
 import { useAuth0 } from "@auth0/auth0-react";
 import { LogOut } from "lucide-react";
-import { clearAccessToken } from "@/lib/auth-utils";
 
 import {
   DropdownMenu,
@@ -10,12 +9,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/atoms/dropdown-menu";
+import { ACCESS_TOKEN } from "@/lib/constants";
 
 const UserProfile = () => {
   const { user, logout } = useAuth0();
 
   const handleLogout = () => {
-    clearAccessToken();
+    sessionStorage.removeItem(ACCESS_TOKEN);
     logout({
       logoutParams: {
         returnTo: window.location.origin + "/login",

src/lib/auth-utils.ts

@@ -1,4 +1,5 @@
 export const ACCESS_TOKEN = "accessToken";
+export const REFRESH_TOKEN = "refreshToken";
 
 export const LanguageMap = {
   bo: "Tibetan",

src/lib/constants.ts

@@ -1,7 +1,6 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { useAuth0 } from "@auth0/auth0-react";
 import { Navigate } from "react-router-dom";
-import { syncAuth0TokenToSessionStorage } from "@/lib/auth-utils";
 
 export const AuthenticationGuard = ({
   component: Component,
@@ -10,12 +9,6 @@ export const AuthenticationGuard = ({
 }) => {
   const { isAuthenticated, isLoading } = useAuth0();
 
-  useEffect(() => {
-    if (isAuthenticated) {
-      syncAuth0TokenToSessionStorage();
-    }
-  }, [isAuthenticated]);
-
   if (isLoading) {
     return (
       <div className="flex flex-col items-center justify-center h-screen">