From 65304fcadeb3e767a6aa47f9b3246ca2aa74fb3e Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sun, 12 Oct 2025 22:56:21 -0600
Subject: [PATCH] Fix useAuthentik composable for SSR

- Use useState to pass server headers to client
- Fix 'useAuthentik is not defined' error
- Ensure headers are read only on server side
---
 nuxt4/composables/useAuthentik.ts | 45 ++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/nuxt4/composables/useAuthentik.ts b/nuxt4/composables/useAuthentik.ts
index cd41ea3..c88dc05 100644
--- a/nuxt4/composables/useAuthentik.ts
+++ b/nuxt4/composables/useAuthentik.ts
@@ -3,31 +3,38 @@
  * Los headers son inyectados por Authentik Proxy Outpost
  */
 export const useAuthentik = () => {
-  const headers = useRequestHeaders()
+  // 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 user = computed(() => {
-    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']
+      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
+      // 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 {
-      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 = () => {