Enhance user metadata display with app and outpost information

- Update AuthentikUser interface to include appSlug and outpostName
- Capture x-authentik-meta-app and x-authentik-meta-outpost headers
- Improve UserMetadata component to display connection information
- Filter empty groups from groups array
- Add documentation about available Authentik headers

nuxt4/app/components/auth/UserMetadata.vue

@@ -59,11 +59,28 @@
               {{ group }}
             </UBadge>
             <UBadge v-if="user.groups.length === 0" color="gray" variant="soft">
-              Sin grupos
+              Sin grupos asignados
             </UBadge>
           </div>
         </div>
       </div>
+
+      <!-- Metadata de la Aplicación (si está disponible) -->
+      <div v-if="user.appSlug || user.outpostName" class="pt-3 mt-3 border-t border-gray-200 dark:border-gray-700">
+        <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Información de Conexión</p>
+        <div class="space-y-2">
+          <div v-if="user.appSlug" class="flex items-center gap-2 text-sm">
+            <UIcon name="i-heroicons-cube" class="text-gray-400" />
+            <span class="text-gray-600 dark:text-gray-300">App: </span>
+            <code class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">{{ user.appSlug }}</code>
+          </div>
+          <div v-if="user.outpostName" class="flex items-center gap-2 text-sm">
+            <UIcon name="i-heroicons-server" class="text-gray-400" />
+            <span class="text-gray-600 dark:text-gray-300">Outpost: </span>
+            <code class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">{{ user.outpostName }}</code>
+          </div>
+        </div>
+      </div>
     </div>
   </UCard>
 </template>

nuxt4/app/composables/useAuthentik.ts

@@ -1,6 +1,16 @@
 /**
  * Composable para leer información de usuario de Authentik
  * Los headers son inyectados por Authentik Proxy Outpost
+ *
+ * Documentación de headers disponibles:
+ * - x-authentik-username: Username del usuario
+ * - x-authentik-email: Email del usuario
+ * - x-authentik-name: Nombre completo del usuario
+ * - x-authentik-uid: UID único del usuario
+ * - x-authentik-groups: Grupos separados por |
+ * - x-authentik-meta-app: Slug de la aplicación en Authentik
+ * - x-authentik-meta-outpost: Nombre del outpost
+ * - Nota: Los roles RBAC son internos de Authentik y no se exponen via headers
  */
 
 interface AuthentikUser {
@@ -10,6 +20,9 @@ interface AuthentikUser {
   groups: string[]
   uid: string | undefined
   avatar: string
+  // Metadata de la aplicación y outpost
+  appSlug?: string
+  outpostName?: string
 }
 
 interface AuthStatusResponse {
@@ -32,6 +45,8 @@ export const useAuthentik = () => {
       const name = headers['x-authentik-name']
       const groups = headers['x-authentik-groups']
       const uid = headers['x-authentik-uid']
+      const appSlug = headers['x-authentik-meta-app']
+      const outpostName = headers['x-authentik-meta-outpost']
 
       // Si no hay username, el usuario no está autenticado
       if (!username) {
@@ -42,8 +57,10 @@ export const useAuthentik = () => {
         username,
         email,
         name,
-        groups: groups ? groups.split('|') : [],
+        groups: groups ? groups.split('|').filter(g => g.trim()) : [],
         uid,
+        appSlug,
+        outpostName,
         // Generar avatar URL usando UI Avatars
         avatar: `https://ui-avatars.com/api/?name=${encodeURIComponent(name || username)}&background=random&size=128`
       }

nuxt4/app/server/api/debug/headers.ts

@@ -16,6 +16,12 @@ export default defineEventHandler((event) => {
     }
   }
 
+  // Log en consola del servidor para debugging
+  console.log('=== AUTHENTIK HEADERS ===')
+  console.log(JSON.stringify(authentikHeaders, null, 2))
+  console.log('=== ALL HEADERS ===')
+  console.log(JSON.stringify(allHeaders, null, 2))
+
   return {
     authentikHeaders,
     allHeaders