From 4d99c9d99d44fb7df569dba6132b3bd44859db57 Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Thu, 11 Jun 2026 10:49:21 -0400
Subject: [PATCH] feat(frontend): validate persisted session on app boot

A stale or revoked token previously rendered the full panel chrome and
only collapsed on the first API call. App boot now calls /auth/me
through useApi (401 -> refresh -> logout already handled there); user
profile refreshes on success, and non-auth failures (network, 5xx)
never log the user out.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/App.vue        |  7 +++++++
 frontend/src/stores/auth.ts | 22 ++++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 321eb9f..1b1b932 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
+import { onMounted } from 'vue'
 import { RouterView } from 'vue-router'
 import ToastNotification from '@/components/ToastNotification.vue'
 import ErrorBoundary from '@/components/ErrorBoundary.vue'
+import { useAuthStore } from '@/stores/auth'
+
+// Validate any persisted session against the API on boot — a stale token
+// should bounce to login immediately, not after the first failed call.
+const auth = useAuthStore()
+onMounted(() => { void auth.validateSession() })
 </script>
 
 <template>
diff --git a/frontend/src/stores/auth.ts b/frontend/src/stores/auth.ts
index 63a03c3..4f8020f 100644
--- a/frontend/src/stores/auth.ts
+++ b/frontend/src/stores/auth.ts
@@ -58,6 +58,27 @@ export const useAuthStore = defineStore('auth', () => {
     permissions.value = {}
   }
 
+  /**
+   * Validate the persisted session against the API on app boot. Without this,
+   * a stale/revoked token renders the full panel chrome and only collapses on
+   * the first real API call. useApi's 401 path (refresh → retry → logout)
+   * does the heavy lifting; any non-auth failure (network, 5xx) keeps the
+   * session — never log users out because the API blipped.
+   * Dynamic import avoids a static auth-store ↔ useApi module cycle.
+   */
+  async function validateSession(): Promise<void> {
+    if (!accessToken.value) return
+    try {
+      const { useApi } = await import('@/composables/useApi')
+      const me = await useApi().get<Partial<User>>('/auth/me')
+      if (user.value && me && typeof me === 'object') {
+        user.value = { ...user.value, ...me }
+      }
+    } catch {
+      // 401 → refresh → logout/redirect already handled inside useApi.
+    }
+  }
+
   function hasModule(moduleSlug: string): boolean {
     return license.value?.modules_enabled?.includes(moduleSlug) ?? false
   }
@@ -92,6 +113,7 @@ export const useAuthStore = defineStore('auth', () => {
     setAuth,
     setLicense,
     logout,
+    validateSession,
     hasModule,
     hasPermission,
   }