Add pending promise to prevent multiple token fetches

Author: Leo7Deng

frontend/app/context/authContext.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useContext, useEffect } from "react";
+import React, { useState, useContext, useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
 
 interface AuthContextType {
@@ -9,7 +9,6 @@ interface AuthContextType {
 
 const AuthContext = React.createContext<AuthContextType | undefined>(undefined);
 
-// Hook to use the Auth Context
 export function useAuth() {
     return useContext(AuthContext);
 }
@@ -20,38 +19,48 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     const [shouldRedirect, setShouldRedirect] = useState(false);
 
     async function getAccessToken(): Promise<string> {
-        if (Date.now() >= expiryTime) {
+        console.log(Date.now(), expiryTime);
+        if (!accessToken || Date.now() >= expiryTime) {
             const token = await refreshAccessToken();
             return token;
         }
         return accessToken;
     }
 
-    useEffect(() => {
-        if (typeof window === "undefined") return;
-        getAccessToken();
-    }, []);
-
     const router = useRouter();
+    let pendingPromise: Promise<string> | null = null;
+
     async function refreshAccessToken(): Promise<string> {
-        try {
-            const response = await fetch("http://localhost:8000/refresh", {
-                method: "POST",
-                credentials: "include",
-            });
-            const data = await response.json();
-            if (!response.ok) {
+        if (pendingPromise) {
+            return pendingPromise;
+        }
+
+        pendingPromise = new Promise(async (resolve, reject) => {
+            try {
+                const response = await fetch("http://localhost:8000/refresh", {
+                    method: "POST",
+                    credentials: "include",
+                });
+                const data = await response.json();
+                if (!response.ok) {
+                    setShouldRedirect(true);
+                    return "";
+                }
+                setAccessToken(data.access_token);
+                setExpiryTime(Date.now() + 15 * 60 * 1000); // 15 minutes
+                resolve(data.access_token);
+            }
+            catch (error) {
                 setShouldRedirect(true);
-                console.log("Failed to refresh access token");
+                console.log("Error refreshing access token:", error);
+                reject(error);
+            }
+            finally {
+                pendingPromise = null;
             }
-            setAccessToken(data.access_token);
-            setExpiryTime(Date.now() + 15 * 60 * 1000); // 15 minutes
-            return data.access_token;
-        } catch (error) {
-            setShouldRedirect(true);
-            console.log("Error refreshing access token:", error);
-            return "";
         }
+        );
+        return pendingPromise;
     }
 
     useEffect(() => {

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://localhost:8000/ws", [token]);
+            ws.current = new WebSocket("ws://localhost:8000/ws", [token]);
             ws.current.onopen = () => console.log("ws opened");
             ws.current.onclose = () => console.log("ws closed");
             const wsCurrent = ws.current;