From 78103029804980041fb4c0de032a03b9af1c6763 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Wed, 6 May 2026 13:19:34 +0300
Subject: [PATCH 1/2] fix: #86exgqfpu stabilize auth lifecycle and fix logout
 button

- gate bootstrap on real user.type='user' so anonymous tokens no longer cascade into 412 logouts that wipe other tabs' sessions
- guard login.vue's loginAsAnonymous so it skips when a user token is already loaded, preventing in-memory clobber on bookmark revisits
- add axios 401/412 response interceptor that auto-clears stale tokens and redirects to /auth/login when protected calls fail with auth-bearing requests
- re-save user token after bootstrap (login_with_token + profile store) as defense against external content-script overwrites
- fix sign-out: hoist confirmation Modal out of the Dropdown body slot so the dropdown's <ul @click="close()"> no longer unmounts the modal before it can render; reload the page after logout to sidestep router race conditions

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/components/partial/ProfileButton.vue | 150 +++++++++---------
 frontend/middleware/auth.ts                   |  13 +-
 frontend/pages/auth/login.vue                 |  14 +-
 frontend/pages/auth/login_with_token.vue      |   8 +
 frontend/plugins/modular-rest.ts              |  33 +++-
 frontend/stores/profile.ts                    |  27 +++-
 6 files changed, 156 insertions(+), 89 deletions(-)

diff --git a/frontend/components/partial/ProfileButton.vue b/frontend/components/partial/ProfileButton.vue
index 69e31be..a3cf091 100644
--- a/frontend/components/partial/ProfileButton.vue
+++ b/frontend/components/partial/ProfileButton.vue
@@ -1,73 +1,76 @@
 <template>
-    <Dropdown :triggerText="''" :offsetDistance="7">
-        <template #trigger>
-            <IconButton size="lg" :imgUrl="profilePicture" />
-        </template>
+    <div>
+        <Dropdown :triggerText="''" :offsetDistance="7">
+            <template #trigger>
+                <IconButton size="lg" :imgUrl="profilePicture" />
+            </template>
 
-        <template #body="{ close }">
-            <ul class="w-[230px] !py-0 font-semibold text-dark dark:text-white-dark dark:text-white-light/90">
-                <li>
-                    <div class="flex items-center px-4 py-4">
-                        <div class="flex-none">
-                            <img class="h-10 w-10 rounded-md object-cover" :src="profilePicture" />
-                        </div>
-                        <div class="truncate ltr:pl-4 rtl:pr-4">
-                            <h4 class="text-base">
-                                {{ profileStore.userDetail?.name }}
-                                <!-- <span class="rounded bg-success-light px-1 text-xs text-success ltr:ml-2 rtl:ml-2">Pro</span> -->
-                            </h4>
-                            <span class="text-black/60 dark:text-dark-light/60 dark:hover:text-white">
-                                {{ profileStore.email }}
-                            </span>
+            <template #body="{ close }">
+                <ul class="w-[230px] !py-0 font-semibold text-dark dark:text-white-dark dark:text-white-light/90">
+                    <li>
+                        <div class="flex items-center px-4 py-4">
+                            <div class="flex-none">
+                                <img class="h-10 w-10 rounded-md object-cover" :src="profilePicture" />
+                            </div>
+                            <div class="truncate ltr:pl-4 rtl:pr-4">
+                                <h4 class="text-base">
+                                    {{ profileStore.userDetail?.name }}
+                                </h4>
+                                <span class="text-black/60 dark:text-dark-light/60 dark:hover:text-white">
+                                    {{ profileStore.email }}
+                                </span>
+                            </div>
                         </div>
-                    </div>
-                </li>
-                <li class="cursor-pointer">
-                    <a class="dark:hover:text-white" @click="
-                        close();
-                    goToProfileSettings();
-                    ">
-                        <Icon name="IconUser" class="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
-                        {{ t('profile.profile') }}
-                    </a>
-                </li>
-                <li class="cursor-pointer">
-                    <a class="dark:hover:text-white" @click="
-                        close();
-                    goToLeitnerSettings();
-                    ">
-                        <Icon name="IconSettings" class="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
-                        {{ t('smart_review.settings') }}
-                    </a>
-                </li>
-                <li class="cursor-pointer border-t border-white-light dark:border-white-light/10">
-                    <!-- Sign Out Confirmation Modal -->
-                    <Modal :title="t('confirm-sign-out')">
-                        <template #trigger="{ toggleModal }">
-                            <a class="flex items-center !py-3 text-danger ltr:pl-5 rtl:pr-5" @click="toggleModal(true)">
-                                <Icon name="icon-logout" class="h-4.5 w-4.5 shrink-0 rotate-90 ltr:mr-2 rtl:ml-2" />
-                                {{ t('sign-out') }}
-                            </a>
-                        </template>
+                    </li>
+                    <li class="cursor-pointer">
+                        <a class="dark:hover:text-white" @click="
+                            close();
+                        goToProfileSettings();
+                        ">
+                            <Icon name="IconUser" class="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
+                            {{ t('profile.profile') }}
+                        </a>
+                    </li>
+                    <li class="cursor-pointer">
+                        <a class="dark:hover:text-white" @click="
+                            close();
+                        goToLeitnerSettings();
+                        ">
+                            <Icon name="IconSettings" class="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
+                            {{ t('smart_review.settings') }}
+                        </a>
+                    </li>
+                    <li class="cursor-pointer border-t border-white-light dark:border-white-light/10">
+                        <a class="flex items-center !py-3 text-danger ltr:pl-5 rtl:pr-5" @click="
+                            close();
+                        showSignOutModal = true;
+                        ">
+                            <Icon name="icon-logout" class="h-4.5 w-4.5 shrink-0 rotate-90 ltr:mr-2 rtl:ml-2" />
+                            {{ t('sign-out') }}
+                        </a>
+                    </li>
+                </ul>
+            </template>
+        </Dropdown>
 
-                        <template #default>
-                            <div class="flex flex-col space-y-2 p-4">
-                                <p>{{ t('confirm-sign-out-message') }}</p>
-                            </div>
-                        </template>
+        <!-- Sign Out Confirmation Modal -->
+        <!-- Rendered outside the Dropdown so its <ul @click="close()"> doesn't
+             unmount the modal before it has a chance to display. -->
+        <Modal v-model="showSignOutModal" :title="t('confirm-sign-out')">
+            <template #default>
+                <div class="flex flex-col space-y-2 p-4">
+                    <p>{{ t('confirm-sign-out-message') }}</p>
+                </div>
+            </template>
 
-                        <template #footer="{ toggleModal }">
-                            <!-- Footer -->
-                            <div class="flex justify-end space-x-2">
-                                <Button @click="toggleModal(false)">{{ t('cancel') }}</Button>
-                                <Button color="danger" @click="confirmSignOut(toggleModal)">{{ t('sign-out') }}</Button>
-                            </div>
-                        </template>
-                    </Modal>
-                </li>
-            </ul>
-        </template>
-    </Dropdown>
+            <template #footer>
+                <div class="flex justify-end space-x-2">
+                    <Button @click="showSignOutModal = false">{{ t('cancel') }}</Button>
+                    <Button color="danger" @click="confirmSignOut">{{ t('sign-out') }}</Button>
+                </div>
+            </template>
+        </Modal>
+    </div>
 </template>
 
 <script lang="ts" setup>
@@ -80,18 +83,21 @@ const { t } = useI18n();
 
 const profileStore = useProfileStore();
 
+const showSignOutModal = ref(false);
+
 const profilePicture = computed(() => {
     return profileStore.profilePicture || '/assets/images/user.png';
 });
 
-function logout() {
+function confirmSignOut() {
+    showSignOutModal.value = false;
     profileStore.logout();
-    router.push('/auth/login');
-}
-
-function confirmSignOut(toggleModal: (state: boolean) => void) {
-    toggleModal(false);
-    logout();
+    // Hard reload after logout: localStorage is now cleared, so the auth
+    // middleware on the next boot will detect no session and redirect to
+    // /auth/login. This sidesteps vue-router race conditions (queued
+    // navigations from the axios 401/412 interceptor or stale post-logout
+    // API responses) that were silently aborting in-page redirects.
+    window.location.reload();
 }
 
 function goToProfileSettings() {
diff --git a/frontend/middleware/auth.ts b/frontend/middleware/auth.ts
index 6f6c655..009a701 100644
--- a/frontend/middleware/auth.ts
+++ b/frontend/middleware/auth.ts
@@ -4,32 +4,21 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
     const profileStore = useProfileStore();
     const loginRoute = '/auth/login';
 
-    // If already on login route, allow access
     if (to.fullPath.includes(loginRoute)) {
         return true;
     }
 
-    // If not logged in, try to login with last session
     if (!profileStore.isLogin) {
-        try {
-            await profileStore.loginWithLastSession();
-        } catch (error) {
-            // If login fails, redirect to login page with original destination
-            const shouldIncludeRedirect = to.fullPath && to.fullPath !== '/' && to.fullPath !== '/#';
-            return navigateTo(shouldIncludeRedirect ? `${loginRoute}?redirect=${encodeURIComponent(to.fullPath)}` : loginRoute);
-        }
+        await profileStore.loginWithLastSession();
     }
 
-    // If logged in, handle redirects
     if (profileStore.isLogin) {
-        //Redirects
         if (to.fullPath === '/' || to.fullPath === '/#') {
             return navigateTo('/statistic');
         }
         return true;
     }
 
-    // If still not logged in after all attempts, redirect to login with original destination
     const shouldIncludeRedirect = to.fullPath && to.fullPath !== '/' && to.fullPath !== '/#';
     return navigateTo(shouldIncludeRedirect ? `${loginRoute}?redirect=${encodeURIComponent(to.fullPath)}` : loginRoute);
 });
diff --git a/frontend/pages/auth/login.vue b/frontend/pages/auth/login.vue
index 284d2bf..f2b5e79 100644
--- a/frontend/pages/auth/login.vue
+++ b/frontend/pages/auth/login.vue
@@ -99,7 +99,19 @@ onMounted(() => {
         sessionStorage.setItem('auth_redirect_url', redirectUrl);
     }
 
-    authentication.loginAsAnonymous();
+    // If a real user session is already active, don't show the login screen
+    // and don't clobber the in-memory user token with an anonymous one.
+    if (authentication.isLogin) {
+        router.replace(redirectUrl || '/');
+        return;
+    }
+
+    // Only prime an anonymous token when no token is loaded yet — keeps
+    // anonymous-allowed routes usable from the login page without
+    // overwriting an existing authenticated session.
+    if (!authentication.getToken) {
+        authentication.loginAsAnonymous();
+    }
 });
 
 function triggerGoogleLoginProcess() {
diff --git a/frontend/pages/auth/login_with_token.vue b/frontend/pages/auth/login_with_token.vue
index 0ac5655..0aceac0 100644
--- a/frontend/pages/auth/login_with_token.vue
+++ b/frontend/pages/auth/login_with_token.vue
@@ -21,6 +21,14 @@ onMounted(() => {
             .loginWithToken(token, true)
             .then(profileStore.bootstrap)
             .then(() => {
+                // Defense-in-depth: re-save the user token after bootstrap.
+                // External actors (chrome extension content scripts, other tabs
+                // mid-anonymous flow) can overwrite localStorage.token between
+                // saveSession and bootstrap completion. Re-asserting the user
+                // token here ensures a reload won't read a stale anonymous token.
+                if (token) {
+                    localStorage.setItem('token', token);
+                }
                 // Check for redirect URL in query parameter first, then in sessionStorage
                 const redirectUrl = (route.query.redirect as string) || sessionStorage.getItem('auth_redirect_url');
 
diff --git a/frontend/plugins/modular-rest.ts b/frontend/plugins/modular-rest.ts
index 9f54f94..71e65f6 100644
--- a/frontend/plugins/modular-rest.ts
+++ b/frontend/plugins/modular-rest.ts
@@ -1,10 +1,39 @@
-import { GlobalOptions } from '@modular-rest/client';
+import { GlobalOptions, authentication } from '@modular-rest/client';
+import axios from 'axios';
 
-export default defineNuxtPlugin((_nuxtApp) => {
+export default defineNuxtPlugin(() => {
     const config = useRuntimeConfig();
 
     GlobalOptions.set({
         // the base url of the server, it should match with the server address
         host: config.public.BASE_URL_API || window.location.origin,
     });
+
+    if (!process.client) return;
+
+    const router = useRouter();
+
+    // When a request that carried an auth header comes back with 401 or 412,
+    // the token is bad (signature ok but user gone, expired, or revoked).
+    // Clear it and bounce to /auth/login so the user can re-authenticate
+    // instead of being stuck in a 412 loop.
+    axios.interceptors.response.use(
+        (response) => response,
+        (error) => {
+            const status = error?.response?.status;
+            const headers = error?.config?.headers || {};
+            const sentAuth = headers.authorization || headers.Authorization;
+
+            if (sentAuth && (status === 401 || status === 412)) {
+                authentication.logout();
+
+                const onLoginRoute = window.location.hash.startsWith('#/auth/login');
+                if (!onLoginRoute) {
+                    router.replace('/auth/login');
+                }
+            }
+
+            return Promise.reject(error);
+        }
+    );
 });
diff --git a/frontend/stores/profile.ts b/frontend/stores/profile.ts
index c056299..51b419f 100644
--- a/frontend/stores/profile.ts
+++ b/frontend/stores/profile.ts
@@ -84,9 +84,32 @@ export const useProfileStore = defineStore('profile', () => {
         return authentication
             .loginWithLastSession()
             .then(() => {
-                return bootstrap();
+                // Only fetch protected user data when this is a real user session.
+                // Anonymous tokens may legitimately be in localStorage (other tabs,
+                // login screen priming) — don't logout/clear them, just skip bootstrap.
+                if (authentication.user?.type !== 'user') {
+                    return null;
+                }
+                const userToken = authentication.getToken;
+                return bootstrap()
+                    .then(() => {
+                        // Defense-in-depth: re-save the user token after bootstrap.
+                        // External actors (chrome extension content scripts, other
+                        // tabs mid-anonymous flow) can overwrite localStorage.token
+                        // between saveSession and bootstrap completion.
+                        if (userToken && authentication.user?.type === 'user') {
+                            localStorage.setItem('token', userToken);
+                        }
+                    })
+                    .catch((error) => {
+                        const message = (error?.error || error?.message || '').toString().toLowerCase();
+                        if (message.includes('user not found') || message.includes('authentication')) {
+                            authentication.logout();
+                        }
+                        throw error;
+                    });
             })
-            .catch((error) => null);
+            .catch(() => null);
     }
 
     function updateProfile(profileData: { name?: string; profileImage?: File; preferences?: Record<string, boolean>; timeZone?: string }) {

From 821e78390fce1276c84594990f39ff6a7395f377 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Wed, 6 May 2026 13:41:31 +0300
Subject: [PATCH 2/2] tweak on logout modal

---
 frontend/components/partial/ProfileButton.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/components/partial/ProfileButton.vue b/frontend/components/partial/ProfileButton.vue
index a3cf091..a7f3c77 100644
--- a/frontend/components/partial/ProfileButton.vue
+++ b/frontend/components/partial/ProfileButton.vue
@@ -57,15 +57,19 @@
         <!-- Rendered outside the Dropdown so its <ul @click="close()"> doesn't
              unmount the modal before it has a chance to display. -->
         <Modal v-model="showSignOutModal" :title="t('confirm-sign-out')">
+            <template #trigger>
+                <div class="hidden" />
+            </template>
+
             <template #default>
                 <div class="flex flex-col space-y-2 p-4">
                     <p>{{ t('confirm-sign-out-message') }}</p>
                 </div>
             </template>
 
-            <template #footer>
+            <template #footer="{ toggleModal }">
                 <div class="flex justify-end space-x-2">
-                    <Button @click="showSignOutModal = false">{{ t('cancel') }}</Button>
+                    <Button @click="toggleModal(false)">{{ t('cancel') }}</Button>
                     <Button color="danger" @click="confirmSignOut">{{ t('sign-out') }}</Button>
                 </div>
             </template>