Merge pull request #169 from CS3219-AY2425S1/fix/bug/logging-out-bug

Fix logout bug

Author: SelwynAng

frontend/app/auth/auth-context.tsx

@@ -12,18 +12,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(() => {
@@ -32,7 +34,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(`${userServiceUri(window.location.hostname)}/auth/verify-token`, {
         method: "GET",
         headers: {
@@ -42,10 +48,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]);
@@ -85,14 +93,15 @@ const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   };
 
   const logout = async () => {
-    setUser(null);
-    setToken(null);
-    localStorage.removeItem("jwtToken");
     router.push("/");
+    localStorage.removeItem("jwtToken");
+    setUser(undefined);
+    setToken(undefined);
+    setIsLoading(true);
   };
 
   return (
-    <AuthContext.Provider value={{ user, token, login, logout }}>
+    <AuthContext.Provider value={{ user, token, login, logout, isLoading }}>
       {children}
     </AuthContext.Provider>
   );

frontend/app/layout.tsx

@@ -4,7 +4,6 @@ import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/toaster";
 import AuthProvider from "@/app/auth/auth-context";
-import AuthPageWrapper from "@/components/auth/auth-page-wrapper";
 import { Navbar } from "@/components/navbar";
 
 const geistSans = localFont({
@@ -41,7 +40,7 @@ export default function RootLayout({
         >
           <AuthProvider>
             <Navbar />
-            <AuthPageWrapper>{children}</AuthPageWrapper>
+            {children}
           </AuthProvider>
           <Toaster />
         </ThemeProvider>

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">