change JWT from local storage to session storage

Author: pengyu

frontend/src/app/hooks/useAuth.ts

@@ -45,7 +45,7 @@ export const useAuth = () => {
   );
 
   const validateToken = async () => {
-    const token = localStorage.getItem(LocalStore.accessToken);
+    const token = sessionStorage.getItem(LocalStore.accessToken);
     if (!token) {
       setIsAuthenticated(false);
       setUser(null);
@@ -85,7 +85,7 @@ export const useAuth = () => {
       });
 
       if (data?.login.accessToken) {
-        localStorage.setItem(LocalStore.accessToken, data.login.accessToken);
+        sessionStorage.setItem(LocalStore.accessToken, data.login.accessToken);
         setIsAuthenticated(true);
         await refetchUser();
         toast.success('Login successful');
@@ -125,7 +125,7 @@ export const useAuth = () => {
   };
 
   const handleLogout = () => {
-    localStorage.removeItem(LocalStore.accessToken);
+    sessionStorage.removeItem(LocalStore.accessToken);
     localStorage.removeItem('user');
     setIsAuthenticated(false);
     setUser(null);

frontend/src/app/providers/AuthProvider.tsx

@@ -1,37 +1,48 @@
+// auth-context.tsx
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import React, { createContext, useContext, useEffect, useRef, useState } from "react";
 import { useLazyQuery } from "@apollo/client";
 import { CHECK_TOKEN_QUERY } from "@/graphql/request";
-import { LocalStore } from "@/lib/storage";
 import { LoadingPage } from "@/components/global-loading";
 
-interface AuthProviderProps {
-  children: React.ReactNode;
+interface AuthContextValue {
+  isAuthorized: boolean;
+  isChecking: boolean;
+  setIsAuthorized: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-export const AuthProvider = ({ children }: AuthProviderProps) => {
+const AuthContext = createContext<AuthContextValue>({
+  isAuthorized: false,
+  isChecking: false,
+  setIsAuthorized: () => {},
+});
+
+export const useAuthContext = () => useContext(AuthContext);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
   const [isAuthorized, setIsAuthorized] = useState(false);
   const [isChecking, setIsChecking] = useState(true);
-  const [showSignInModal, setShowSignInModal] = useState(false);
 
   const [checkToken] = useLazyQuery(CHECK_TOKEN_QUERY);
-  const timeoutRef = useRef<NodeJS.Timeout>();
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
     let isMounted = true;
 
     async function validateToken() {
       setIsChecking(true);
 
-      const token = localStorage.getItem(LocalStore.accessToken);
+      // If you want to store the token in sessionStorage, do:
+      // const token = sessionStorage.getItem("accessToken");
+      // Otherwise, if you still prefer localStorage:
+      const token = sessionStorage.getItem("accessToken");
+
       if (!token) {
-        // No token => not authorized, but don't block the page
+        // No token => user is not authorized
         if (isMounted) {
           setIsAuthorized(false);
           setIsChecking(false);
-          // Optionally show sign-in modal:
-          setShowSignInModal(true);
         }
         return;
       }
@@ -40,20 +51,18 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
       timeoutRef.current = setTimeout(() => {
         if (isMounted) {
           console.error("Token validation timeout");
-          localStorage.removeItem(LocalStore.accessToken);
+          sessionStorage.removeItem("accessToken");
           setIsAuthorized(false);
           setIsChecking(false);
-          setShowSignInModal(true);
         }
       }, 5000);
 
       try {
         const { data } = await checkToken({ variables: { input: { token } } });
         if (isMounted) {
           if (!data?.checkToken) {
-            localStorage.removeItem(LocalStore.accessToken);
+            sessionStorage.removeItem("accessToken");
             setIsAuthorized(false);
-            setShowSignInModal(true);
           } else {
             console.log("Token valid");
             setIsAuthorized(true);
@@ -62,9 +71,8 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
       } catch (error) {
         if (isMounted) {
           console.error("Token validation error:", error);
-          localStorage.removeItem(LocalStore.accessToken);
+          sessionStorage.removeItem("accessToken");
           setIsAuthorized(false);
-          setShowSignInModal(true);
         }
       } finally {
         if (timeoutRef.current) {
@@ -86,16 +94,14 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
     };
   }, [checkToken]);
 
+  // While checking token, show loading screen
   if (isChecking) {
     return <LoadingPage />;
   }
 
-  // Always render main page, authorized or not
   return (
-    <>
+    <AuthContext.Provider value={{ isAuthorized, isChecking, setIsAuthorized }}>
       {children}
-      {/* Show sign-in modal if unauthorized */}
-      {/* <SignInModal isOpen={showSignInModal} onClose={() => setShowSignInModal(false)} /> */}
-    </>
+    </AuthContext.Provider>
   );
-};
+}

frontend/src/components/SignInModal.tsx

@@ -33,7 +33,7 @@ export function SignInModal({
   const [loginUser, { loading }] = useMutation(LOGIN_USER, {
     onCompleted: (data) => {
       if (data?.login) {
-        localStorage.setItem('accessToken', data.login.accessToken);
+        sessionStorage.setItem('accessToken', data.login.accessToken);
         localStorage.setItem('refreshToken', data.login.refreshToken);
         toast.success('Login successful!');
         setErrorMessage(null); // Clear error on success

frontend/src/contexts/AuthContext.tsx

@@ -30,13 +30,13 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
 
   const login = (accessToken: string, refreshToken: string) => {
     setToken(accessToken);
-    localStorage.setItem("accessToken", accessToken);
+    sessionStorage.setItem("accessToken", accessToken);
     localStorage.setItem("refreshToken", refreshToken);
   };
 
   const logout = () => {
     setToken(null);
-    localStorage.removeItem("accessToken");
+    sessionStorage.removeItem("accessToken");
     localStorage.removeItem("refreshToken");
   };
 
@@ -49,7 +49,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
 
       if (data?.refreshToken) {
         setToken(data.refreshToken.accessToken);
-        localStorage.setItem("accessToken", data.refreshToken.accessToken);
+        sessionStorage.setItem("accessToken", data.refreshToken.accessToken);
         return data.refreshToken.accessToken; 
       } else {
         logout();

frontend/src/lib/client.ts

@@ -22,7 +22,7 @@ const authLink = setContext((_, { headers }) => {
   if (typeof window === "undefined") {
     return { headers };
   }
-  const accessToken = localStorage.getItem("accessToken");
+  const accessToken = sessionStorage.getItem("accessToken");
   const refreshToken = localStorage.getItem("refreshToken");
   return {
     headers: {
@@ -56,21 +56,7 @@ const requestLoggingMiddleware = new ApolloLink((operation, forward) => {
   });
 });
 
-// 5. Auth Middleware (reads tokens from localStorage for each request)
-const authMiddleware = new ApolloLink((operation, forward) => {
-  if (typeof window === "undefined") {
-    return forward(operation);
-  }
-  const token = localStorage.getItem(LocalStore.accessToken);
-  if (token) {
-    operation.setContext({
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
-  }
-  return forward(operation);
-});
+
 
 // 6. Define the Refresh Token Mutation (as a string or gql tag)
 const REFRESH_TOKEN_MUTATION = gql`
@@ -107,8 +93,8 @@ const errorLink = onError(({ graphQLErrors, networkError, operation, forward })
             if (!data || !data.refreshToken) {
               throw new Error("Refresh token failed");
             }
-            // Update localStorage with new tokens
-            localStorage.setItem("accessToken", data.refreshToken.accessToken);
+  
+            sessionStorage.setItem("accessToken", data.refreshToken.accessToken);
             localStorage.setItem("refreshToken", data.refreshToken.refreshToken);
 
             // Update the original operation's headers
@@ -129,7 +115,7 @@ const errorLink = onError(({ graphQLErrors, networkError, operation, forward })
           .catch((err) => {
             console.error("Refresh token error:", err);
             // Clear tokens, redirect or show sign-in modal
-            localStorage.removeItem("accessToken");
+            sessionStorage.removeItem("accessToken");
             localStorage.removeItem("refreshToken");
             window.location.href = "/login"; // or open a modal
             reject(err);
@@ -156,9 +142,9 @@ const splitLink = wsLink
         );
       },
       wsLink,
-      from([errorLink, requestLoggingMiddleware, authMiddleware, authLink, httpLink])
+      from([errorLink, requestLoggingMiddleware,  authLink, httpLink])
     )
-  : from([errorLink, requestLoggingMiddleware, authMiddleware, authLink, httpLink]);
+  : from([errorLink, requestLoggingMiddleware, authLink, httpLink]);
 
 // 9. Create the Unified Apollo Client
 export const client = new ApolloClient({