Enhance authorization handling by syncing auth state from Nuxt payload and loading from API if necessary; improve dashboard logging for user roles and groups

composables/useAuthorization.ts

@@ -20,20 +20,68 @@ export const useAuthorization = () => {
   // Get the current user state from Nuxt
   const nuxtApp = useNuxtApp();
   
+  // Create reactive auth state
+  const authState = ref<AuthState>({
+    user: null,
+    authenticated: false,
+    groups: []
+  });
+
+  // Function to sync auth state from nuxtApp payload
+  const syncAuthState = () => {
+    const payloadAuthState = nuxtApp.payload.data?.authState as AuthState;
+    if (payloadAuthState) {
+      authState.value = payloadAuthState;
+      console.log('[useAuthorization] Auth state synced:', {
+        authenticated: payloadAuthState.authenticated,
+        groups: payloadAuthState.groups,
+        user: payloadAuthState.user?.email
+      });
+    } else {
+      console.log('[useAuthorization] No auth state found in payload');
+    }
+  };
+
+  // Try to get auth state from API if not in payload
+  const loadAuthState = async () => {
+    try {
+      const sessionData = await $fetch('/api/auth/session') as AuthState;
+      authState.value = sessionData;
+      console.log('[useAuthorization] Auth state loaded from API:', {
+        authenticated: sessionData.authenticated,
+        groups: sessionData.groups,
+        user: sessionData.user?.email
+      });
+      
+      // Update nuxtApp payload for future use
+      updateAuthState(sessionData);
+    } catch (error) {
+      console.error('[useAuthorization] Failed to load auth state:', error);
+    }
+  };
+
+  // Initialize auth state
+  onMounted(() => {
+    syncAuthState();
+    
+    // If no auth state in payload, try to load from API
+    if (!authState.value.authenticated) {
+      loadAuthState();
+    }
+  });
+
   /**
    * Get current user groups from session
    */
   const getUserGroups = (): string[] => {
-    const authState = nuxtApp.payload.data?.authState as AuthState;
-    return authState?.groups || [];
+    return authState.value.groups || [];
   };
 
   /**
    * Get current authenticated user
    */
   const getCurrentUser = (): UserWithGroups | null => {
-    const authState = nuxtApp.payload.data?.authState as AuthState;
-    return authState?.user || null;
+    return authState.value.user || null;
   };
 
   /**