Use next.js next/navigation useRouter to route to login on missing refreshToken

Author: Leo7Deng

frontend/app/context/authContext.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import React, { useState, useContext, useEffect } from "react";
+import { useRouter } from "next/navigation";
 
 interface AuthContextType {
     getAccessToken: () => Promise<string>;
@@ -14,6 +17,7 @@ export function useAuth() {
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
     const [accessToken, setAccessToken] = useState("");
     const [expiryTime, setExpiryTime] = useState(0);
+    const [shouldRedirect, setShouldRedirect] = useState(false);
 
     async function getAccessToken(): Promise<string> {
         if (Date.now() >= expiryTime) {
@@ -24,28 +28,38 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     }
 
     useEffect(() => {
+        if (typeof window === "undefined") return;
         getAccessToken();
     }, []);
 
+    const router = useRouter();
     async function refreshAccessToken(): Promise<string> {
         try {
             const response = await fetch("http://localhost:8000/refresh", {
                 method: "POST",
                 credentials: "include",
             });
-
-            if (!response.ok) throw new Error("Failed to refresh token");
             const data = await response.json();
-
+            if (!response.ok) {
+                setShouldRedirect(true);
+                console.log("Failed to refresh access token");
+            }
             setAccessToken(data.access_token);
             setExpiryTime(Date.now() + 15 * 60 * 1000); // 15 minutes
             return data.access_token;
         } catch (error) {
-            console.error("Error refreshing access token:", error);
+            setShouldRedirect(true);
+            console.log("Error refreshing access token:", error);
             return "";
         }
     }
 
+    useEffect(() => {
+        if (shouldRedirect) {
+            router.push("/login");
+        }
+    }, [shouldRedirect, router]);
+
     return (
         <AuthContext.Provider value={{ getAccessToken }}>
             {children}

frontend/app/dashboard/page.tsx

@@ -6,8 +6,8 @@ import { AuthProvider } from "../context/authContext";
 
 export default function Home() {
   return (
-    <AuthProvider>
-      <Dashboard />
-    </AuthProvider>
+      <AuthProvider>
+        <Dashboard />
+      </AuthProvider>
   );
 }

frontend/app/hooks/useWebsocketDashboard.tsx

@@ -17,7 +17,7 @@ export function useWebSocketDashboard(setCircles: React.Dispatch<React.SetStateA
     useEffect(() => {
         const connectWebSocket = async () => {
             const token = await getAccessToken();
-            ws.current = new WebSocket("wss://127.0.0.1:8000/ws", [token]);
+            ws.current = new WebSocket("wss://localhost:8000/ws", [token]);
             ws.current.onopen = () => console.log("ws opened");
             ws.current.onclose = () => console.log("ws closed");
             const wsCurrent = ws.current;

frontend/app/layout.tsx

@@ -12,10 +12,9 @@ const geistMono = localFont({
   variable: "--font-geist-mono",
   weight: "100 900",
 });
-
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Chat App",
+  description: "A real time chat application designed for performance and scalability.",
 };
 
 export default function RootLayout({

frontend/app/page.tsx

@@ -2,5 +2,4 @@ import { redirect } from 'next/navigation';
 
 export default function Home() {
   redirect('/login');
-  return null;
 }