Files
seguidorDeLotes/nuxt4/app/composables/useAuthentik.ts
josedario87 87ae5b95e6 Improve PWA offline functionality and fix session caching
- Enable navigateFallback for offline navigation support
- Add JSON files to glob patterns for heroicons support
- Change Authentik API caching from NetworkFirst to NetworkOnly to prevent stale session data
- Add offline detection in checkSessionStatus with proper user feedback
- Add no-cache headers to /api/auth/status endpoint to prevent browser caching
- Show "Modo Offline" toast when user tries to check session while offline
2025-10-13 02:21:50 -06:00

165 lines
5.1 KiB
TypeScript

/**
* Composable para leer información de usuario de Authentik
* Los headers son inyectados por Authentik Proxy Outpost
*/
export const useAuthentik = () => {
// Leer headers en el servidor y almacenarlos en state
const authentikUser = useState('authentikUser', () => {
// Solo en el servidor, leer los headers
if (process.server) {
const headers = useRequestHeaders()
const username = headers['x-authentik-username']
const email = headers['x-authentik-email']
const name = headers['x-authentik-name']
const groups = headers['x-authentik-groups']
const uid = headers['x-authentik-uid']
// Si no hay username, el usuario no está autenticado
if (!username) {
return null
}
return {
username,
email,
name,
groups: groups ? groups.split('|') : [],
uid,
// Generar avatar URL usando UI Avatars
avatar: `https://ui-avatars.com/api/?name=${encodeURIComponent(name || username)}&background=random&size=128`
}
}
return null
})
const user = computed(() => authentikUser.value)
const isAuthenticated = computed(() => !!user.value)
const logout = () => {
// Logout completo: invalida la sesión de Authentik completamente
// Esto cierra sesión en todas las aplicaciones
const authentikUrl = useRuntimeConfig().public.authentikUrl || 'https://authentik.nucleoriofrio.com'
navigateTo(`${authentikUrl}/flows/-/default/invalidation/`, { external: true })
}
const goToProfile = () => {
// URL de perfil de Authentik
const authentikUrl = useRuntimeConfig().public.authentikUrl || 'https://authentik.nucleoriofrio.com'
navigateTo(`${authentikUrl}/if/user/`, { external: true, open: { target: '_blank' } })
}
const checkSessionStatus = async () => {
const toast = useToast()
// Verificar si está offline primero
if (!navigator.onLine) {
toast.add({
title: 'Modo Offline',
description: 'No se puede validar sesión sin conexión',
color: 'gray',
icon: 'i-heroicons-wifi',
timeout: 5000
})
return
}
// Mostrar toast de "verificando..."
toast.add({
title: 'Verificando sesión...',
description: 'Consultando estado en Authentik',
color: 'info',
icon: 'i-heroicons-arrow-path',
timeout: 2000
})
try {
// Consultar el endpoint de API que verifica contra Authentik
const response = await $fetch('/api/auth/status')
if (response.authenticated && response.user) {
// Sesión activa en Authentik
toast.add({
title: 'Sesión Activa',
description: `Conectado como: ${response.user.name || response.user.username}`,
color: 'success',
icon: 'i-heroicons-check-circle',
timeout: 5000
})
} else {
// Sin sesión en Authentik
toast.add({
title: 'Sin Sesión',
description: 'No hay sesión activa en Authentik',
color: 'warning',
icon: 'i-heroicons-exclamation-triangle',
timeout: 10000,
actions: [{
label: 'Iniciar Sesión',
click: () => {
// Recargar la página forzará a Authentik a redirigir al login
window.location.reload()
}
}]
})
}
} catch (error) {
// Verificar si está offline ahora (pudo desconectarse durante la petición)
if (!navigator.onLine) {
toast.add({
title: 'Modo Offline',
description: 'No se puede validar sesión sin conexión',
color: 'gray',
icon: 'i-heroicons-wifi',
timeout: 5000
})
return
}
// Si el error es por redirect de Authentik (CORS/fetch error), significa que no hay sesión
// Authentik redirige a login cuando no hay sesión válida, causando error CORS en fetch
const errorMessage = error?.message || error?.toString() || ''
const isCorsOrRedirectError = errorMessage.includes('Failed to fetch') ||
errorMessage.includes('CORS') ||
error?.statusCode === 302
if (isCorsOrRedirectError) {
// Interpretar como sesión expirada/inválida
toast.add({
title: 'Sin Sesión',
description: 'No hay sesión activa en Authentik',
color: 'warning',
icon: 'i-heroicons-exclamation-triangle',
timeout: 10000,
actions: [{
label: 'Iniciar Sesión',
click: () => {
// Recargar la página forzará a Authentik a redirigir al login
window.location.reload()
}
}]
})
} else {
// Error real de red o servidor
toast.add({
title: 'Error',
description: 'No se pudo verificar el estado de la sesión',
color: 'error',
icon: 'i-heroicons-x-circle',
timeout: 5000
})
}
console.error('Error checking session status:', error)
}
}
return {
user,
isAuthenticated,
logout,
goToProfile,
checkSessionStatus
}
}