🐛 Fix authorization

app/composables/useSolarNetwork.ts

@@ -8,12 +8,15 @@ export const useSolarNetwork = (withoutProxy = false) => {
     baseURL: apiBase,
     credentials: "include",
     // Add Authorization header with Bearer token
-    onRequest: ({ options }) => {
+    onRequest: ({ request, options }) => {
+      const side = process.server ? 'SERVER' : 'CLIENT'
+      console.log(`[useSolarNetwork] onRequest for ${request} on ${side}`)
       // Get token from user store
       const userStore = useUserStore()
       const token = userStore.token
 
       if (token) {
+        console.log('[useSolarNetwork] Token found, adding Authorization header.')
         if (!options.headers) {
           options.headers = new Headers()
         }
@@ -23,6 +26,8 @@ export const useSolarNetwork = (withoutProxy = false) => {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ;(options.headers as any)["Authorization"] = `Bearer ${token}`
         }
+      } else {
+        console.log('[useSolarNetwork] No token found, skipping Authorization header.')
       }
 
       // Transform request data from camelCase to snake_case

app/pages/auth/authorize.vue

@@ -53,7 +53,7 @@
                 <v-card variant="outlined" class="pa-4 mb-4 text-left">
                   <h4 class="font-medium mb-2">
                     This will allow
-                    {{ clientInfo.clientName || "the app" }} to:
+                    {{ clientInfo.clientName || "the app" }} to
                   </h4>
                   <ul class="space-y-1">
                     <li

app/plugins/01.auth.ts

@@ -0,0 +1,24 @@
+import { useUserStore } from '~/stores/user'
+
+export default defineNuxtPlugin(() => {
+  const side = process.server ? 'SERVER' : 'CLIENT'
+  console.log(`[AUTH PLUGIN] Running on ${side}`)
+  const userStore = useUserStore()
+
+  // Prevent fetching if it's already in progress
+  if (userStore.isLoading) {
+    console.log(`[AUTH PLUGIN] User fetch already in progress on ${side}. Skipping.`)
+    return
+  }
+
+  // On initial app load, fetch the user if a token exists but the user object isn't populated.
+  if (userStore.token && !userStore.user) {
+    console.log(`[AUTH PLUGIN] Token found, user not loaded. Fetching user on ${side}.`)
+    userStore.fetchUser()
+  } else {
+    console.log(`[AUTH PLUGIN] Conditions not met for fetching user on ${side}.`, {
+      hasToken: !!userStore.token,
+      hasUser: !!userStore.user
+    })
+  }
+})

app/stores/user.ts

@@ -11,7 +11,7 @@ export const useUserStore = defineStore("user", () => {
   const error = ref<string | null>(null)
 
   // The name is match with the remote one (set by server Set-Cookie)
-  const token = useCookie<string | null>("AuthToken", {
+  const token = useCookie<string | null>("fl_AuthToken", {
     default: () => null,
     path: "/",
     maxAge: 60 * 60 * 24 * 365 * 10
@@ -20,9 +20,6 @@ export const useUserStore = defineStore("user", () => {
   // Getters
   const isAuthenticated = computed(() => !!user.value && !!token.value)
 
-  // Call fetchUser immediately
-  fetchUser()
-
   // Actions
   async function fetchUser(reload = true) {
     if (!reload && user.value) return // Skip fetching if already loaded and not forced to