Adds supports for RefreshTokens

frontend/src/plugins/api.js

@@ -4,42 +4,52 @@ import {useAuthStore} from "@/stores/authStore.js"
 export function useClient() {
     if (!import.meta.env.VITE_API_URL) throw new Error("VITE_API_URL is not provided")
 
-    const api = axios.create({
+    const authStore = useAuthStore()
+    const client = axios.create({
         baseURL: import.meta.env.VITE_API_URL,
-        timeout: 10000,
+        headers: {
+            'Content-Type': 'application/json',
+        },
     });
 
-    const authStore = useAuthStore()
-    const requestInterceptor = (config) => {
+    // Request interceptor
+    client.interceptors.request.use(async (config) => {
+        // Proactively check and refresh token if needed
         if (authStore.isAuthenticated) {
-            config.headers["Authorization"] = `Bearer ${authStore.accessToken}`
+            try {
+                console.log('within api call')
+                await authStore.ensureValidToken();
+            } catch (error) {
+                console.error('Failed to ensure valid token:', error);
+            }
         }
-        return config
-    }
 
-    api.interceptors.request.use(requestInterceptor);
+        if (authStore.isAuthenticated) {
+            config.headers.Authorization = `Bearer ${authStore.accessToken}`;
+        }
+        return config;
+    });
 
-    // Add response interceptor for token refresh
-    api.interceptors.response.use(
+    // Response interceptor
+    client.interceptors.response.use(
         (response) => response,
         async (error) => {
             const originalRequest = error.config;
 
-            // If error is 401 and we haven't tried to refresh the token yet
+            // If the error is 401 and we haven't tried to refresh the token yet
             if (error.response?.status === 401 && !originalRequest._retry) {
+                console.log('Received 401 error, attempting token refresh...');
                 originalRequest._retry = true;
 
                 try {
-                    // Attempt to refresh the token
                     await authStore.refresh();
-                    
+                    console.log('Token refresh successful, retrying original request...');
                     // Retry the original request with the new token
-                    originalRequest.headers["Authorization"] = `Bearer ${authStore.accessToken}`;
-                    return api(originalRequest);
+                    return client(originalRequest);
                 } catch (refreshError) {
-                    // If refresh fails, logout the user
+                    console.error('Token refresh failed, logging out user:', refreshError);
                     await authStore.logout();
-                    return Promise.reject(refreshError);
+                    throw refreshError;
                 }
             }
 
@@ -47,6 +57,6 @@ export function useClient() {
         }
     );
 
-    return api;
+    return client;
 }
 

frontend/src/stores/authStore.js

@@ -1,5 +1,5 @@
 import {defineStore} from 'pinia';
-import {computed} from "vue";
+import {computed, ref} from "vue";
 import {useRouter} from "vue-router";
 import {useClient} from "@/plugins/api.js";
 import {useSessionStorage} from "@vueuse/core";
@@ -9,11 +9,12 @@ function getClaimsFromToken(token) {
     try {
         return jwtDecode(token);
     } catch (error) {
+        console.error('Failed to decode token:', error);
         return null;
     }
 }
 
-function isTokenExpired(token) {
+function isTokenExpiringSoon(token) {
     if (!token) return true;
     const claims = getClaimsFromToken(token);
     if (!claims) return true;
@@ -29,11 +30,16 @@ export const useAuthStore = defineStore(
     () => {
         const clientApi = useClient()
         const router = useRouter()
+        
+        // Flag to track if we're currently refreshing the token
+        const isRefreshing = ref(false)
+        // Store the refresh promise to avoid multiple concurrent refreshes
+        let refreshPromise = null
 
         const accessToken = useSessionStorage('auth-accessToken', undefined)
         const refreshToken = useSessionStorage('auth-refreshToken', undefined)
 
-        const isAuthenticated = computed(() => !!accessToken.value && !isTokenExpired(accessToken.value))
+        const isAuthenticated = computed(() => !!accessToken.value)
 
         const userId = computed(() => {
             const claims = getClaimsFromToken(accessToken.value)
@@ -111,29 +117,55 @@ export const useAuthStore = defineStore(
                 throw new Error('No refresh token available');
             }
 
-            try {
-                const response = await clientApi.post(
-                    'api/users/refresh',
-                    {
-                        refreshToken: refreshToken.value
-                    });
-
-                updateTokens({
-                    accessToken: response.data.accessToken,
-                    refreshToken: response.data.refreshToken
-                });
-                return true;
-            } catch (error) {
-                console.error('Token refresh failed:', error);
-                cleanTokens();
-                throw error;
+            // If we're already refreshing, return the existing promise
+            if (isRefreshing.value && refreshPromise) {
+                return refreshPromise;
             }
+
+            // Create a new refresh promise
+            refreshPromise = (async () => {
+                try {
+                    isRefreshing.value = true;
+                    
+                    const response = await clientApi.post(
+                        'api/users/refresh',
+                        {
+                            refreshToken: refreshToken.value
+                        });
+
+                    updateTokens({
+                        accessToken: response.data.accessToken,
+                        refreshToken: response.data.refreshToken
+                    });
+               
+                    isRefreshing.value = false;
+                    refreshPromise = null;
+                    return true;
+                } catch (error) {
+                    console.error('Token refresh failed:', error);
+                    isRefreshing.value = false;
+                    refreshPromise = null;
+                    
+                    // Only clear tokens and session storage after a failed refresh attempt
+                    cleanTokens();
+                    
+                    // Force a redirect to the login page
+                    await router.push('/login');
+                    
+                    throw error;
+                }
+            })();
+
+            return refreshPromise;
         }
 
         // Function to check if token needs refresh
         async function ensureValidToken() {
-            if (isTokenExpired(accessToken.value)) {
-                await refresh();
+            if (isTokenExpiringSoon(accessToken.value)) {              
+                // Start the refresh process without waiting for it to complete
+                refresh().catch(error => {
+                    console.error('Error during token refresh:', error);
+                });                
             }
         }
 
@@ -142,6 +174,7 @@ export const useAuthStore = defineStore(
             refreshToken,
             isAuthenticated,
             userId,
+            isRefreshing,
             login,
             loginWithGoogle,
             loginWithFacebook,

frontend/src/stores/creatorProfileStore.js

@@ -22,7 +22,7 @@ export const useCreatorProfileStore = defineStore(
                     } else {
                         await router.push('/');
                     }
-                } else {
+                } else if (!authStore.isRefreshing) {
                     value.value = undefined;
                 }
             }

frontend/src/stores/userProfileStore.js

@@ -15,7 +15,7 @@ export const useUserProfileStore = defineStore(
             async (newValue) => {
                 if (newValue) {
                     await fetchCurrentUserProfile()
-                } else {
+                } else if (!authStore.isRefreshing) {
                     value.value = undefined
                 }
             })
@@ -59,7 +59,7 @@ export const useUserProfileStore = defineStore(
                 const userResponse = await client.get("/api/users/profile");
                 value.value = userResponse.data
             } catch (error) {
-                value.value = undefined;
+                console.error(error)
             }
         }