Adds supports for RefreshTokens

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)
             }
         }