From 3f5c4bc820f409abbe195ce30daf08d778e0d668 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Mon, 13 Oct 2025 03:05:04 -0600
Subject: [PATCH] Fix TypeScript errors in useAuthentik composable

- Add AuthentikUser and AuthStatusResponse interfaces
- Fix toast color from 'gray' to 'neutral' (valid color)
- Remove invalid 'timeout' property from toast.add()
- Fix toast action from 'click' to 'onClick'
- Add proper type annotations for error handling
- Replace process.server with import.meta.server
- Make email, name, uid optional in AuthentikUser interface
---
 nuxt4/app/composables/useAuthentik.ts | 55 ++++++++++++++++-----------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/nuxt4/app/composables/useAuthentik.ts b/nuxt4/app/composables/useAuthentik.ts
index 1160550..3e99bf2 100644
--- a/nuxt4/app/composables/useAuthentik.ts
+++ b/nuxt4/app/composables/useAuthentik.ts
@@ -2,11 +2,29 @@
  * Composable para leer información de usuario de Authentik
  * Los headers son inyectados por Authentik Proxy Outpost
  */
+
+interface AuthentikUser {
+  username: string
+  email: string | undefined
+  name: string | undefined
+  groups: string[]
+  uid: string | undefined
+  avatar: string
+}
+
+interface AuthStatusResponse {
+  authenticated: boolean
+  user?: {
+    username: string
+    name?: string
+  }
+}
+
 export const useAuthentik = () => {
   // Leer headers en el servidor y almacenarlos en state
-  const authentikUser = useState('authentikUser', () => {
+  const authentikUser = useState<AuthentikUser | null>('authentikUser', () => {
     // Solo en el servidor, leer los headers
-    if (process.server) {
+    if (import.meta.server) {
       const headers = useRequestHeaders()
 
       const username = headers['x-authentik-username']
@@ -58,9 +76,8 @@ export const useAuthentik = () => {
       toast.add({
         title: 'Modo Offline',
         description: 'No se puede validar sesión sin conexión',
-        color: 'gray',
-        icon: 'i-heroicons-wifi',
-        timeout: 5000
+        color: 'neutral',
+        icon: 'i-heroicons-wifi'
       })
       return
     }
@@ -70,13 +87,12 @@ export const useAuthentik = () => {
       title: 'Verificando sesión...',
       description: 'Consultando estado en Authentik',
       color: 'info',
-      icon: 'i-heroicons-arrow-path',
-      timeout: 2000
+      icon: 'i-heroicons-arrow-path'
     })
 
     try {
       // Consultar el endpoint de API que verifica contra Authentik
-      const response = await $fetch('/api/auth/status')
+      const response = await $fetch<AuthStatusResponse>('/api/auth/status')
 
       if (response.authenticated && response.user) {
         // Sesión activa en Authentik
@@ -84,8 +100,7 @@ export const useAuthentik = () => {
           title: 'Sesión Activa',
           description: `Conectado como: ${response.user.name || response.user.username}`,
           color: 'success',
-          icon: 'i-heroicons-check-circle',
-          timeout: 5000
+          icon: 'i-heroicons-check-circle'
         })
       } else {
         // Sin sesión en Authentik
@@ -94,35 +109,33 @@ export const useAuthentik = () => {
           description: 'No hay sesión activa en Authentik',
           color: 'warning',
           icon: 'i-heroicons-exclamation-triangle',
-          timeout: 10000,
           actions: [{
             label: 'Iniciar Sesión',
-            click: () => {
+            onClick: () => {
               // Recargar la página forzará a Authentik a redirigir al login
               window.location.reload()
             }
           }]
         })
       }
-    } catch (error) {
+    } catch (error: unknown) {
       // 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
+          color: 'neutral',
+          icon: 'i-heroicons-wifi'
         })
         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 errorMessage = (error as Error)?.message || String(error)
       const isCorsOrRedirectError = errorMessage.includes('Failed to fetch') ||
                                      errorMessage.includes('CORS') ||
-                                     error?.statusCode === 302
+                                     (error as any)?.statusCode === 302
 
       if (isCorsOrRedirectError) {
         // Interpretar como sesión expirada/inválida
@@ -131,10 +144,9 @@ export const useAuthentik = () => {
           description: 'No hay sesión activa en Authentik',
           color: 'warning',
           icon: 'i-heroicons-exclamation-triangle',
-          timeout: 10000,
           actions: [{
             label: 'Iniciar Sesión',
-            click: () => {
+            onClick: () => {
               // Recargar la página forzará a Authentik a redirigir al login
               window.location.reload()
             }
@@ -146,8 +158,7 @@ export const useAuthentik = () => {
           title: 'Error',
           description: 'No se pudo verificar el estado de la sesión',
           color: 'error',
-          icon: 'i-heroicons-x-circle',
-          timeout: 5000
+          icon: 'i-heroicons-x-circle'
         })
       }
       console.error('Error checking session status:', error)