bug fix [chat]: Adds authentication loading state to prevent premature redirects on protected routes.

Author: phillipnguyenn

client/src/context/AuthContext.tsx

@@ -13,20 +13,23 @@ type AuthContextType = {
   login: (access: string, refresh: string) => void;
   logout: () => void;
   isLoggedIn: boolean;
+  isLoading: boolean;
 };
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 export const AuthProvider = ({ children }: { children: ReactNode }) => {
   const [accessToken, setAccessToken] = useState<string | null>(null);
   const [refreshToken, setRefreshToken] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
   const router = useRouter();
 
   useEffect(() => {
     const storedAccess = localStorage.getItem("accessToken");
     const storedRefresh = localStorage.getItem("refreshToken");
     if (storedAccess) setAccessToken(storedAccess);
     if (storedRefresh) setRefreshToken(storedRefresh);
+    setIsLoading(false);
   }, []);
 
   const login = (access: string, refresh: string) => {
@@ -48,7 +51,14 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
 
   return (
     <AuthContext.Provider
-      value={{ accessToken, refreshToken, login, logout, isLoggedIn }}
+      value={{
+        accessToken,
+        refreshToken,
+        login,
+        logout,
+        isLoggedIn,
+        isLoading,
+      }}
     >
       {children}
     </AuthContext.Provider>

client/src/pages/chat.tsx

@@ -5,15 +5,16 @@ import Layout from "@/components/Layout";
 import { useAuth } from "@/context/AuthContext";
 
 export default function Chat() {
-  const { isLoggedIn } = useAuth();
+  const { isLoggedIn, isLoading } = useAuth();
   const router = useRouter();
 
   useEffect(() => {
-    if (!isLoggedIn) {
+    if (!isLoading && !isLoggedIn) {
       router.push("/login");
     }
-  }, [isLoggedIn, router]);
+  }, [isLoggedIn, isLoading, router]);
 
-  if (!isLoggedIn) return <p>Redirecting to login...</p>;
+  if (isLoading) return <p>Loading...</p>;
+  if (!isLoggedIn) return null;
   return <Layout>This is the chat page</Layout>;
 }