Fix logout bug

Author: jq1836

frontend/app/auth/auth-context.tsx

@@ -11,18 +11,20 @@ import {
 } from "react";
 
 interface AuthContextType {
-  user: User | null;
-  token: string | null;
+  user: User | null | undefined;
+  token: string | null | undefined;
   login: (email: string, password: string) => Promise<User | undefined>;
   logout: () => Promise<void>;
+  isLoading: boolean;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const tokenKey = "jwtToken";
-  const [user, setUser] = useState<User | null>(null);
-  const [token, setToken] = useState<string | null>(null);
+  const [user, setUser] = useState<User | null>();
+  const [token, setToken] = useState<string | null>();
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const router = useRouter();
 
   useEffect(() => {
@@ -31,7 +33,11 @@ const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
 
   // Login using locally stored JWT token
   useEffect(() => {
+    if (token !== undefined) {
+      setIsLoading(false);
+    }
     if (token) {
+      setIsLoading(true);
       fetch("http://localhost:3001/auth/verify-token", {
         method: "GET",
         headers: {
@@ -41,10 +47,12 @@ const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
         .then((res) => {
           res.json().then((result) => {
             setUser(result.data);
+            setIsLoading(false);
           });
         })
         .catch((err) => {
           console.error(err);
+          setIsLoading(false);
         });
     }
   }, [token]);
@@ -88,7 +96,7 @@ const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   };
 
   return (
-    <AuthContext.Provider value={{ user, token, login, logout }}>
+    <AuthContext.Provider value={{ user, token, login, logout, isLoading }}>
       {children}
     </AuthContext.Provider>
   );

frontend/components/auth/auth-page-wrapper.tsx

@@ -5,6 +5,7 @@ import { ReactNode } from "react";
 import { useAuth } from "@/app/auth/auth-context";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
+import LoadingScreen from "../common/loading-screen";
 
 type AuthCheck = (
   user: { id: string; isAdmin: boolean } | undefined | null
@@ -49,7 +50,9 @@ const AuthPageWrapper: React.FC<AuthPageWrapperProps> = ({
 
   return (
     <div>
-      {authCheck(auth?.user) ? (
+      {auth?.isLoading ? (
+        <LoadingScreen />
+      ) : authCheck(auth?.user) ? (
         children
       ) : (
         <div className="flex items-start justify-center h-2/6">