entorno de desarrollo listo

nuxt4-app/app/components/UserMenu.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const { user, loading, fetchUser, logout } = useAuth()
+
+// Cargar usuario al montar
+onMounted(() => {
+  fetchUser()
+})
+
+const items = computed(() => [
+  [{
+    label: user.value?.email || 'Usuario',
+    slot: 'account',
+    disabled: true
+  }],
+  [{
+    label: 'Cerrar sesión',
+    icon: 'i-heroicons-arrow-right-on-rectangle',
+    click: logout
+  }]
+])
+</script>
+
+<template>
+  <UDropdownMenu
+    v-if="user?.authenticated && !loading"
+    :items="items"
+    :ui="{ item: { disabled: 'cursor-text select-text' } }"
+    :popper="{ placement: 'bottom-start' }"
+  >
+    <UAvatar
+      :alt="user.name || user.username || 'User'"
+      size="sm"
+    />
+
+    <template #account="{ item }">
+      <div class="text-left">
+        <p class="font-medium text-gray-900 dark:text-white">
+          {{ user.name || user.username }}
+        </p>
+        <p class="text-sm text-gray-500 dark:text-gray-400 truncate">
+          {{ item.label }}
+        </p>
+      </div>
+    </template>
+  </UDropdownMenu>
+
+  <USkeleton v-else-if="loading" class="h-8 w-8" :ui="{ rounded: 'rounded-full' }" />
+</template>

nuxt4-app/app/composables/useAuth.ts

@@ -0,0 +1,38 @@
+export interface AuthUser {
+  username: string | null
+  email: string | null
+  name: string | null
+  uid: string | null
+  groups: string[]
+  authenticated: boolean
+}
+
+export const useAuth = () => {
+  const user = useState<AuthUser | null>('auth-user', () => null)
+  const loading = useState<boolean>('auth-loading', () => false)
+
+  const fetchUser = async () => {
+    loading.value = true
+    try {
+      const data = await $fetch<AuthUser>('/api/auth/user')
+      user.value = data
+    } catch (error) {
+      console.error('Error fetching user:', error)
+      user.value = null
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const logout = () => {
+    // Authentik maneja el logout, redirigir a la URL de logout
+    window.location.href = '/outpost.goauthentik.io/sign_out'
+  }
+
+  return {
+    user: readonly(user),
+    loading: readonly(loading),
+    fetchUser,
+    logout
+  }
+}

nuxt4-app/app/layouts/dashboard.vue

@@ -16,6 +16,7 @@
             <template #trailing>
               <UBadge variant="subtle" label="Supabase" class="uppercase tracking-wide" />
               <UBadge variant="subtle" label="Solo lectura" class="uppercase tracking-wide" />
+              <UserMenu />
             </template>
           </UDashboardNavbar>
         </div>