Problema crítico anterior:
Cuando se perdía conexión, el sistema marcaba como "no autenticado"
y DESREGISTRABA el Service Worker, destruyendo todo el contenido
cacheado y volviendo la PWA inútil offline.
Solución implementada:
1. useAuth.ts:
- Agregar estado isOffline con listeners de navigator.onLine
- Detectar offline ANTES de marcar como no autenticado
- En checkAuth: si offline, mantener último estado conocido
- En markUnauthenticated: NO ejecutar si estamos offline
- Nuevo authStatus: 'offline' cuando sin conexión
- NO desregistrar SW cuando estamos offline
2. AuthIndicator.client.vue:
- Importar isOffline del composable
- Agregar icono WifiOff para estado offline
- Agregar textos: "Offline" / "Sin conexión. Puedes usar contenido guardado"
- Estilos naranja para estado offline
- En watchers: NO llamar markUnauthenticated si offline
- handleClick: ignorar clicks en modo offline
Ahora offline funciona correctamente:
✅ Mantiene último estado de autenticación conocido
✅ NO desregistra Service Worker
✅ Contenido cacheado permanece accesible
✅ Indicador visual claro (naranja) de modo offline
✅ La PWA es totalmente funcional sin conexión
Problema:
La verificación de sesión usaba HEAD /api/music que no es confiable
porque:
- Los headers de Authentik solo están disponibles en el servidor
- El Service Worker puede servir respuestas cacheadas
- No había headers no-cache para evitar respuestas obsoletas
Solución:
Implementar verificación correcta basada en plantillaNuxtAuthentikProxy:
1. Nuevo endpoint /api/auth/status.get.ts
- Lee headers de Authentik directamente desde el servidor
- Headers no-cache para verificación en tiempo real
- Retorna estado autenticado + info de usuario
2. Actualizar useAuth.ts
- checkAuth() ahora usa /api/auth/status
- fetchUserInfo() también usa el nuevo endpoint
- Lógica simplificada y más confiable
Con esto, la verificación de sesión es precisa y en tiempo real,
consultando directamente los headers de Authentik en el servidor.
- Created /api/auth/userinfo endpoint to fetch user data from Authentik headers
- Added userInfo state and fetchUserInfo() function to useAuth composable
- Implemented compact user info header in dropdown with avatar, name, and email
- Avatar shows user initials with gradient background
- Styled with glassmorphism design matching app aesthetic
- Dropdown aparece al hacer click cuando estás conectado
- Opciones: verificar estado y cerrar sesión
- Logout usa endpoint de Authentik (/outpost.goauthentik.io/sign_out)
- Desregistra Service Worker antes de logout
- Animación smooth del dropdown
- Flecha indicadora que rota al abrir/cerrar
- Diseño glassmorphism consistente con la app
- Desregistrar SW automáticamente cuando se detecta pérdida de auth
- Desregistrar SW antes de triggerAuth para evitar conflictos con Authentik
- Deshabilitar polling y listeners de visibility (causan errores de CORS)
- Confiar en detección reactiva de errores del musicStore
- Usar window.location.href en lugar de reload() para forzar navegación
- Detectar errores "Failed to fetch" y "no response" como pérdida de auth
- Mejor logging para debugging de cambios de estado
- Manejar correctamente redirects 302 de Authentik en fetch
