From e0ce0ea6da7fcd1573491629cc84ffd4ebc55371 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Fri, 27 Feb 2026 18:13:38 +0100
Subject: [PATCH] Fix: Add localStorage fallback for Plex authentication checks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Issue: ActivityPage and route guards showed "not authenticated"
even when Plex was linked via Settings page.

Root cause: Plex user data stored in localStorage but route guards
and ActivityPage only checked Vuex store (state.settings.plexUserId).

Changes:
- Update routes.ts hasPlexAccount() to check both:
  1. Vuex store (user/plexUserId)
  2. localStorage (plex_user_data) as fallback

- Update ActivityPage plexUserId computed to check both:
  1. Vuex store first
  2. localStorage plex_user_data.id as fallback

Why two sources?
- Vuex store: Set from JWT token (backend user settings)
- localStorage: Set immediately when linking Plex account
- localStorage persists across page reloads
- Provides seamless experience without backend round-trip

Now Activity page correctly shows data when Plex is linked ✓
---
 src/pages/ActivityPage.vue | 20 +++++++++++++++++++-
 src/routes.ts              | 17 ++++++++++++++++-
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/pages/ActivityPage.vue b/src/pages/ActivityPage.vue
index 7f5e72f..803742c 100644
--- a/src/pages/ActivityPage.vue
+++ b/src/pages/ActivityPage.vue
@@ -132,7 +132,25 @@
 
   const days: Ref<number> = ref(30);
   const graphViewMode: Ref<GraphTypes> = ref(GraphTypes.Plays);
-  const plexUserId = computed(() => store.getters["user/plexUserId"]);
+
+  // Check both Vuex store and localStorage for Plex user
+  const plexUserId = computed(() => {
+    // First try Vuex store
+    const storeId = store.getters["user/plexUserId"];
+    if (storeId) return storeId;
+
+    // Fallback to localStorage
+    const userData = localStorage.getItem("plex_user_data");
+    if (userData) {
+      try {
+        return JSON.parse(userData).id;
+      } catch {
+        return null;
+      }
+    }
+    return null;
+  });
+
   const plexUsername = computed(() => {
     const userData = localStorage.getItem("plex_user_data");
     if (userData) {
diff --git a/src/routes.ts b/src/routes.ts
index 91769f9..1854504 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -102,7 +102,22 @@ const router = createRouter({
 });
 
 const loggedIn = () => store.getters["user/loggedIn"];
-const hasPlexAccount = () => store.getters["user/plexUserId"] !== null;
+const hasPlexAccount = () => {
+  // Check Vuex store first
+  if (store.getters["user/plexUserId"] !== null) return true;
+
+  // Fallback to localStorage
+  const userData = localStorage.getItem("plex_user_data");
+  if (userData) {
+    try {
+      const parsed = JSON.parse(userData);
+      return parsed.id !== null && parsed.id !== undefined;
+    } catch {
+      return false;
+    }
+  }
+  return false;
+};
 const hamburgerIsOpen = () => store.getters["hamburger/isOpen"];
 
 router.beforeEach(