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/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`
       }