Fix: Use fresh authStore reference for each request to avoid stale token

src/composables/useApi.ts

@@ -3,9 +3,22 @@ import router from '@/router'
 
 const BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000/api/v1'
 
-export function useApi() {
-  const authStore = useAuthStore()
+// Helper to get token - always accesses the store freshly to avoid stale closures
+function getToken(): string | null {
+  try {
+    const authStore = useAuthStore()
+    // In Pinia setup stores, refs are auto-unwrapped on store access
+    // But be defensive: handle both unwrapped string and raw ref
+    const token = authStore.token
+    if (!token) return null
+    // If token is a ref (rare case), access .value
+    return (token as unknown as { value?: string }).value ?? token
+  } catch {
+    return null
+  }
+}
 
+export function useApi() {
   async function refreshAccessToken(): Promise<string | null> {
     try {
       const response = await fetch(`${BASE_URL}/auth/refresh`, {
@@ -14,6 +27,7 @@ export function useApi() {
       })
       if (response.ok) {
         const data = await response.json()
+        const authStore = useAuthStore()
         authStore.token = data.access_token
         localStorage.setItem('access_token', data.access_token)
         return data.access_token
@@ -24,22 +38,27 @@ export function useApi() {
     return null
   }
 
-  async function request<T>(endpoint: string, options: RequestInit = {}, retryCount = 0): Promise<T> {
+  async function request<T>(method: string, endpoint: string, body?: unknown, retryCount = 0): Promise<T> {
     const headers: Record<string, string> = {
       'Content-Type': 'application/json',
-      ...(options.headers as Record<string, string> || {})
     }
 
+    const token = getToken()
+    console.log(`[useApi] ${method} ${endpoint} - token: ${token ? 'present' : 'null'}`)
+
     // Only add Authorization header for non-auth endpoints
-    // Auth endpoints (login, register, refresh) should NOT receive the old token
-    if (authStore.token && !endpoint.includes('/auth/')) {
-      headers['Authorization'] = `Bearer ${authStore.token}`
+    if (token && !endpoint.includes('/auth/')) {
+      headers['Authorization'] = `Bearer ${token}`
+      console.log(`[useApi] Added Authorization header: Bearer ${token.substring(0, 10)}...`)
+    } else {
+      console.log(`[useApi] NO Authorization header - token=${token}, isAuthEndpoint=${endpoint.includes('/auth/')}`)
     }
 
     const response = await fetch(`${BASE_URL}${endpoint}`, {
-      ...options,
+      method,
       headers,
-      body: options.body ? JSON.stringify(options.body) : undefined
+      body: body ? JSON.stringify(body) : undefined,
+      credentials: 'include'
     })
 
     if (response.status === 401) {
@@ -50,10 +69,10 @@ export function useApi() {
           // Retry original request with new token
           headers['Authorization'] = `Bearer ${newToken}`
           const retryResponse = await fetch(`${BASE_URL}${endpoint}`, {
-            ...options,
+            method,
             headers,
-            credentials: 'include',  // Include cookies for auth
-            body: options.body ? JSON.stringify(options.body) : undefined
+            credentials: 'include',
+            body: body ? JSON.stringify(body) : undefined
           })
           if (retryResponse.ok) {
             if (retryResponse.status === 204) {
@@ -63,6 +82,7 @@ export function useApi() {
           }
         }
       }
+      const authStore = useAuthStore()
       authStore.logout()
       router.push('/login')
       throw new Error('Unauthorized')
@@ -81,11 +101,11 @@ export function useApi() {
   }
 
   return {
-    get: <T>(endpoint: string) => request<T>(endpoint, { method: 'GET' }),
+    get: <T>(endpoint: string) => request<T>('GET', endpoint),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    post: <T>(endpoint: string, body?: any) => request<T>(endpoint, { method: 'POST', body }),
+    post: <T>(endpoint: string, body?: any) => request<T>('POST', endpoint, body),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    put: <T>(endpoint: string, body?: any) => request<T>(endpoint, { method: 'PUT', body }),
-    delete: <T>(endpoint: string) => request<T>(endpoint, { method: 'DELETE' })
+    put: <T>(endpoint: string, body?: any) => request<T>('PUT', endpoint, body),
+    delete: <T>(endpoint: string) => request<T>('DELETE', endpoint)
   }
 }