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;
   };
 
   /**

pages/dashboard.vue

@@ -72,12 +72,26 @@ definePageMeta({
 
 const { mdAndDown } = useDisplay();
 const { user, logout, authSource } = useUnifiedAuth();
-const { isAdmin } = useAuthorization();
+const { isAdmin, getUserGroups, getCurrentUser } = useAuthorization();
 const tags = usePortalTags();
 
 const drawer = ref(false);
 
+// Debug auth state
+onMounted(() => {
+  console.log('[Dashboard] Auth state on mount:', {
+    isAdmin: isAdmin(),
+    userGroups: getUserGroups(),
+    currentUser: getCurrentUser()
+  });
+});
+
 const interestMenu = computed(() => {
+  const userIsAdmin = isAdmin();
+  const userGroups = getUserGroups();
+  
+  console.log('[Dashboard] Computing interest menu - isAdmin:', userIsAdmin, 'groups:', userGroups);
+  
   const baseMenu = [
     //{
     //  to: "/dashboard/interest-eoi-queue",
@@ -122,7 +136,8 @@ const interestMenu = computed(() => {
   ];
 
   // Add admin menu items if user is admin
-  if (isAdmin()) {
+  if (userIsAdmin) {
+    console.log('[Dashboard] Adding admin console to interest menu');
     baseMenu.push({
       to: "/dashboard/admin",
       icon: "mdi-shield-crown",
@@ -134,6 +149,11 @@ const interestMenu = computed(() => {
 });
 
 const defaultMenu = computed(() => {
+  const userIsAdmin = isAdmin();
+  const userGroups = getUserGroups();
+  
+  console.log('[Dashboard] Computing default menu - isAdmin:', userIsAdmin, 'groups:', userGroups);
+  
   const baseMenu = [
     {
       to: "/dashboard/site",
@@ -153,7 +173,8 @@ const defaultMenu = computed(() => {
   ];
 
   // Add admin menu items if user is admin
-  if (isAdmin()) {
+  if (userIsAdmin) {
+    console.log('[Dashboard] Adding admin console to default menu');
     baseMenu.push({
       to: "/dashboard/admin",
       icon: "mdi-shield-crown",