fix: refresh token issue (#546)

Author: perber

ui/leafwiki-ui/package-lock.json

@@ -35,7 +35,8 @@ const buttonVariants = cva(
 )
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
 }

ui/leafwiki-ui/src/components/ui/button.tsx

@@ -71,16 +71,13 @@ export async function logout() {
   }).catch(() => {})
 }
 
-let isRefreshing = false // to prevent multiple simultaneous refreshes
-let refreshPromise: Promise<void> | null = null
-
 export async function fetchWithAuth(
   path: string,
   options: RequestInit = {},
   retry = true,
 ): Promise<unknown> {
   const store = useSessionStore.getState()
-  const logout = store.logout
+  const sessionLogout = store.logout
   const authDisabled = useConfigStore.getState().authDisabled
 
   const headers = new Headers(options.headers || {})
@@ -118,21 +115,13 @@ export async function fetchWithAuth(
   let res = await doFetch()
 
   if (res.status === 401 && retry && !authDisabled) {
-    if (!isRefreshing) {
-      isRefreshing = true
-      refreshPromise = refreshAccessToken().finally(() => {
-        isRefreshing = false
-        refreshPromise = null
-      })
-    }
-
     try {
-      await refreshPromise
+      await ensureRefresh()
       res = await doFetch()
     } catch {
       // Refresh token failed, log out the user
       if (!authDisabled) {
-        logout()
+        sessionLogout()
         const { setUser } = useSessionStore.getState()
         setUser(null)
       }
@@ -161,6 +150,32 @@ export async function fetchWithAuth(
   }
 }
 
+declare global {
+  // Explicitly initialized below; runtime value is either a Promise or null
+  var __leafwikiRefreshPromise: Promise<void> | null
+}
+
+// Ensure the global is initialized to a known value at module load time.
+if (typeof globalThis.__leafwikiRefreshPromise === 'undefined') {
+  globalThis.__leafwikiRefreshPromise = null
+}
+/**
+ * Ensures there is only ONE refresh in-flight across the whole runtime (even if module is duplicated).
+ */
+export function ensureRefresh(): Promise<void> {
+  const { authDisabled } = useConfigStore.getState()
+  if (authDisabled) {
+    return Promise.resolve()
+  }
+
+  if (!globalThis.__leafwikiRefreshPromise) {
+    globalThis.__leafwikiRefreshPromise = refreshAccessToken().finally(() => {
+      globalThis.__leafwikiRefreshPromise = null
+    })
+  }
+  return globalThis.__leafwikiRefreshPromise
+}
+
 async function refreshAccessToken() {
   const store = useSessionStore.getState()
 

ui/leafwiki-ui/src/lib/api/auth.ts

@@ -1,6 +1,6 @@
 import { useSessionStore } from '@/stores/session'
 import { useEffect } from 'react'
-import { API_BASE_URL } from './config'
+import { ensureRefresh } from './api/auth'
 
 export function useBootstrapAuth(enabled = true) {
   const setUser = useSessionStore((s) => s.setUser)
@@ -16,19 +16,7 @@ export function useBootstrapAuth(enabled = true) {
     ;(async () => {
       setRefreshing(true)
       try {
-        const res = await fetch(`${API_BASE_URL}/api/auth/refresh-token`, {
-          method: 'POST',
-          credentials: 'include',
-        })
-
-        if (!res.ok) {
-          // Clear user state when refresh fails to prevent stale data
-          if (!cancelled) setUser(null)
-          return
-        }
-
-        const data = await res.json()
-        if (!cancelled) setUser(data.user)
+        await ensureRefresh()
       } catch (err) {
         // Clear user state when refresh fails to prevent stale data
         if (!cancelled) setUser(null)