Feat: Agregar estructura PWA Nuxt4 y configuración de desarrollo

Configuración PWA:
- Agregar estructura completa de Nuxt4 para PWA
- Configurar .env.example con variables de entorno
- Preparar aplicación para instalación offline

Configuración Claude Code:
- Agregar .claude/ con settings y hooks
- Configurar entorno de desarrollo con Claude

CI/CD:
- Agregar .gitea/workflows para Gitea Actions
- Preparar pipeline de despliegue automático

Docker:
- Actualizar docker-compose.yml con servicios PWA
- Configurar networking entre servicios

Git:
- Actualizar .gitignore para excluir archivos de build
- Ignorar node_modules y archivos temporales

.claude/hooks/README.md

@@ -0,0 +1,152 @@
+# Gitea Actions Monitor Hook
+
+Este hook monitorea automáticamente tus Gitea Actions después de hacer `git push` y te notifica cuando terminan.
+
+## Configuración
+
+### 1. Crear un token de acceso en Gitea
+
+1. Ve a: https://gitea.nucleoriofrio.com/user/settings/applications
+2. En la sección **"Generate New Token"**:
+   - **Token Name**: `claude-code-monitor` (o el nombre que prefieras)
+   - **Select Permissions**: Marca `read:repository` o `repo` (lectura de repositorio)
+3. Click en **"Generate Token"**
+4. **IMPORTANTE**: Copia el token inmediatamente (solo se muestra una vez)
+
+### 2. Configurar la variable de entorno
+
+Agrega el token a tu archivo de configuración de shell:
+
+**Para Bash** (`~/.bashrc`):
+```bash
+export GITEA_TOKEN='tu_token_aqui'
+```
+
+**Para Zsh** (`~/.zshrc`):
+```bash
+export GITEA_TOKEN='tu_token_aqui'
+```
+
+**Para Fish** (`~/.config/fish/config.fish`):
+```fish
+set -x GITEA_TOKEN 'tu_token_aqui'
+```
+
+Luego recarga la configuración:
+```bash
+source ~/.bashrc   # o ~/.zshrc o reinicia la terminal
+```
+
+### 3. Verificar que funciona
+
+Verifica que la variable está configurada:
+```bash
+echo $GITEA_TOKEN
+```
+
+Deberías ver tu token.
+
+## Uso
+
+Una vez configurado, el hook se activa automáticamente cuando Claude Code ejecuta `git push`:
+
+1. Claude ejecuta `git push`
+2. El hook verifica que Actions estén habilitadas
+3. El hook se activa automáticamente y comienza a monitorear
+4. **Claude se congela** mientras espera a que termine la Gitea Action (máximo 10 minutos)
+5. Puedes presionar **Ctrl+C** para interrumpir la espera si es necesario
+6. Cuando termine, Claude te muestra información detallada:
+
+**Ejemplo de action exitosa:**
+```
+✅ Gitea Action completada: EXITOSO
+
+📋 Detalles:
+  • Workflow: build-and-deploy (build-and-deploy.yml)
+  • Run #3
+  • Evento: push
+  • Branch: master
+  • Commit: a1b2c3d4
+  • Título: Update README: Add Claude Code hooks feature
+  • Duración: 5m 23s
+  • Iniciado: 2025-10-12T14:30:05Z
+  • Finalizado: 2025-10-12T14:35:28Z
+
+🔗 Ver logs completos:
+   https://gitea.nucleoriofrio.com/nucleo000/plantillaNuxtAuthentikProxy/actions/runs/123
+```
+
+**Si las Actions no están habilitadas:**
+```
+⚠️ Git push exitoso, pero las Gitea Actions NO están habilitadas en este repositorio.
+
+📝 Para habilitar Actions:
+1. Ve a: https://gitea.nucleoriofrio.com/nucleo000/plantillaNuxtAuthentikProxy/settings
+2. Busca la sección 'Actions' o 'Workflows'
+3. Activa las Actions
+```
+
+## Configuración Avanzada
+
+### Cambiar el timeout
+
+Edita `.claude/settings.local.json` y modifica el valor `timeout` (en segundos):
+
+```json
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Bash",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/monitor-gitea-action.sh",
+            "timeout": 300  // 5 minutos en lugar de 10
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+### Cambiar el intervalo de polling
+
+Edita `.claude/hooks/monitor-gitea-action.sh` y modifica:
+
+```bash
+POLL_INTERVAL=10  # Consultar cada 10 segundos (puedes cambiar a 5, 15, 30, etc.)
+```
+
+## Troubleshooting
+
+### El hook no se activa
+
+1. Verifica que el archivo de configuración es correcto: `cat .claude/settings.local.json`
+2. Reinicia Claude Code para que recargue la configuración
+3. Revisa los logs con `claude --debug`
+
+### Error "falta GITEA_TOKEN"
+
+El token no está configurado. Sigue los pasos de configuración arriba.
+
+### Timeout: La action todavía está corriendo
+
+La action tardó más de 10 minutos. Puedes:
+- Aumentar el `timeout` en la configuración
+- Verificar el estado manualmente en Gitea
+- Optimizar tu Gitea Action para que sea más rápida
+
+### El script no puede conectarse a la API
+
+1. Verifica que puedes acceder a Gitea: `curl https://gitea.nucleoriofrio.com`
+2. Verifica que el token es válido:
+   ```bash
+   curl -H "Authorization: token $GITEA_TOKEN" \
+     https://gitea.nucleoriofrio.com/api/v1/repos/nucleo000/plantillaNuxtAuthentikProxy/actions/tasks?limit=1
+   ```
+
+## Desactivar el hook
+
+Si quieres desactivar temporalmente el hook, comenta o elimina la sección `hooks` en `.claude/settings.local.json`.

.claude/hooks/monitor-gitea-action.sh

@@ -0,0 +1,197 @@
+#!/bin/bash
+
+# Monitor Gitea Action after git push
+# Este script se ejecuta después de un git push y espera a que termine la Gitea Action
+
+set -euo pipefail
+
+# Configuración
+GITEA_URL="https://gitea.nucleoriofrio.com"
+OWNER="nucleo000"
+REPO="cataRio"
+
+# Intentar cargar el token desde el entorno o desde ~/.bashrc
+GITEA_TOKEN="${GITEA_TOKEN:-}"
+if [ -z "$GITEA_TOKEN" ] && [ -f "$HOME/.bashrc" ]; then
+  # Intentar extraer el token de .bashrc
+  GITEA_TOKEN=$(grep -oP "export GITEA_TOKEN=['\"]?\K[^'\"]*" "$HOME/.bashrc" 2>/dev/null || echo "")
+fi
+
+MAX_WAIT_SECONDS=600  # 10 minutos
+POLL_INTERVAL=10      # Consultar cada 10 segundos
+
+# Leer el input JSON del hook
+INPUT=$(cat)
+
+# Verificar si el comando fue un git push
+COMMAND=$(echo "$INPUT" | jq -r '.tool_input.command // ""')
+if [[ ! "$COMMAND" =~ git[[:space:]]+push ]]; then
+  # No fue un git push, salir sin hacer nada
+  exit 0
+fi
+
+# Verificar que existe el token
+if [ -z "$GITEA_TOKEN" ]; then
+  cat <<EOF
+{
+  "decision": "block",
+  "reason": "⚠️ Git push exitoso, pero no puedo monitorear la Gitea Action: falta GITEA_TOKEN.\n\nConfigura el token en ~/.bashrc o ~/.zshrc:\nexport GITEA_TOKEN='tu_token_aqui'"
+}
+EOF
+  exit 0
+fi
+
+# Función para verificar si las actions están habilitadas
+check_actions_enabled() {
+  local repo_info=$(curl -s -H "Authorization: token $GITEA_TOKEN" \
+    "$GITEA_URL/api/v1/repos/$OWNER/$REPO")
+  echo "$repo_info" | jq -r '.has_actions // false'
+}
+
+# Función para consultar el estado de la última action
+get_latest_action_status() {
+  local response=$(curl -s -H "Authorization: token $GITEA_TOKEN" \
+    "$GITEA_URL/api/v1/repos/$OWNER/$REPO/actions/tasks?limit=1")
+
+  # Verificar si hay un error de permisos
+  if echo "$response" | jq -e '.message' > /dev/null 2>&1; then
+    echo "ERROR: $(echo "$response" | jq -r '.message')" >&2
+    echo ""
+    return 1
+  fi
+
+  echo "$response" | jq -r '.workflow_runs[0] // .data[0] // empty'
+}
+
+# Función para formatear el resultado
+format_result() {
+  local status="$1"
+  local task_data="$2"
+
+  local id=$(echo "$task_data" | jq -r '.id // "N/A"')
+  local workflow_name=$(echo "$task_data" | jq -r '.name // "N/A"')
+  local workflow_file=$(echo "$task_data" | jq -r '.workflow_id // "N/A"')
+  local run_number=$(echo "$task_data" | jq -r '.run_number // "N/A"')
+  local event=$(echo "$task_data" | jq -r '.event // "N/A"')
+  local branch=$(echo "$task_data" | jq -r '.head_branch // "N/A"')
+  local title=$(echo "$task_data" | jq -r '.display_title // "N/A"')
+  local created=$(echo "$task_data" | jq -r '.created_at // "N/A"')
+  local started=$(echo "$task_data" | jq -r '.run_started_at // .started_at // "N/A"')
+  local updated=$(echo "$task_data" | jq -r '.updated_at // .stopped_at // "N/A"')
+  local commit=$(echo "$task_data" | jq -r '.head_sha[0:8] // "N/A"')
+  local run_url=$(echo "$task_data" | jq -r '.url // ""')
+
+  # Calcular duración si es posible
+  local duration="N/A"
+  if [[ "$started" != "N/A" && "$updated" != "N/A" ]]; then
+    local start_ts=$(date -d "$started" +%s 2>/dev/null || echo "0")
+    local end_ts=$(date -d "$updated" +%s 2>/dev/null || echo "0")
+    if [[ $start_ts -gt 0 && $end_ts -gt 0 ]]; then
+      local diff=$((end_ts - start_ts))
+      if [[ $diff -lt 60 ]]; then
+        duration="${diff}s"
+      else
+        local mins=$((diff / 60))
+        local secs=$((diff % 60))
+        duration="${mins}m ${secs}s"
+      fi
+    fi
+  fi
+
+  case "$status" in
+    success)
+      local emoji="✅"
+      local msg="EXITOSO"
+      ;;
+    failure)
+      local emoji="❌"
+      local msg="FALLÓ"
+      ;;
+    cancelled)
+      local emoji="🚫"
+      local msg="CANCELADO"
+      ;;
+    *)
+      local emoji="⚠️"
+      local msg="DESCONOCIDO ($status)"
+      ;;
+  esac
+
+  # Construir URL de logs si no está disponible
+  if [[ -z "$run_url" || "$run_url" == "null" ]]; then
+    run_url="$GITEA_URL/$OWNER/$REPO/actions/runs/$id"
+  fi
+
+  cat <<EOF
+{
+  "decision": "block",
+  "reason": "$emoji Gitea Action completada: $msg\n\n📋 Detalles:\n  • Workflow: $workflow_name ($workflow_file)\n  • Run #$run_number\n  • Evento: $event\n  • Branch: $branch\n  • Commit: $commit\n  • Título: $title\n  • Duración: $duration\n  • Iniciado: $started\n  • Finalizado: $updated\n\n🔗 Ver logs completos:\n   $run_url"
+}
+EOF
+}
+
+# Verificar si las actions están habilitadas
+echo "🔍 Verificando si Actions están habilitadas..." >&2
+ACTIONS_ENABLED=$(check_actions_enabled)
+
+if [[ "$ACTIONS_ENABLED" != "true" ]]; then
+  cat <<EOF
+{
+  "decision": "block",
+  "reason": "⚠️ Git push exitoso, pero las Gitea Actions NO están habilitadas en este repositorio.\n\n📝 Para habilitar Actions:\n1. Ve a: $GITEA_URL/$OWNER/$REPO/settings\n2. Busca la sección 'Actions' o 'Workflows'\n3. Activa las Actions\n\nLuego podrás ver tus workflows en:\n$GITEA_URL/$OWNER/$REPO/actions"
+}
+EOF
+  exit 0
+fi
+
+# Notificar que empezamos a monitorear
+echo "🔄 Monitoreando Gitea Action (máximo ${MAX_WAIT_SECONDS}s)..." >&2
+
+# Esperar un poco antes de la primera consulta (dar tiempo a que Gitea cree la action)
+sleep 5
+
+# Polling loop
+elapsed=0
+while [ $elapsed -lt $MAX_WAIT_SECONDS ]; do
+  # Consultar el estado
+  TASK_DATA=$(get_latest_action_status)
+
+  if [ -z "$TASK_DATA" ]; then
+    echo "⏳ Esperando que Gitea cree la action... (${elapsed}s)" >&2
+    sleep $POLL_INTERVAL
+    elapsed=$((elapsed + POLL_INTERVAL))
+    continue
+  fi
+
+  STATUS=$(echo "$TASK_DATA" | jq -r '.status // "unknown"')
+
+  echo "📊 Estado actual: $STATUS (${elapsed}s)" >&2
+
+  # Verificar si terminó
+  case "$STATUS" in
+    success|failure|cancelled)
+      # Action terminó!
+      format_result "$STATUS" "$TASK_DATA"
+      exit 0
+      ;;
+    running|pending|waiting)
+      # Todavía corriendo
+      sleep $POLL_INTERVAL
+      elapsed=$((elapsed + POLL_INTERVAL))
+      ;;
+    *)
+      # Estado desconocido
+      echo "⚠️ Estado desconocido: $STATUS" >&2
+      sleep $POLL_INTERVAL
+      elapsed=$((elapsed + POLL_INTERVAL))
+      ;;
+  esac
+done
+
+# Timeout alcanzado
+cat <<EOF
+{
+  "decision": "block",
+  "reason": "⏱️ Timeout: La Gitea Action todavía está corriendo después de ${MAX_WAIT_SECONDS}s.\n\n🔗 Verifica el estado manualmente en:\n$GITEA_URL/$OWNER/$REPO/actions"
+}
+EOF

.claude/settings.json

@@ -0,0 +1,16 @@
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Bash",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/monitor-gitea-action.sh",
+            "timeout": 600
+          }
+        ]
+      }
+    ]
+  }
+}

.env.example

@@ -0,0 +1,56 @@
+# ===========================================
+# Ejemplo de variables de entorno
+# ===========================================
+# Copia este archivo y configura los valores según tu entorno
+#
+# Para desarrollo local: copia a .env
+# Para Gitea Actions: configura en Settings > Actions > Variables/Secrets
+
+# ===========================================
+# REGISTRY & DEPLOYMENT
+# ===========================================
+# URL del registro Docker (sin http:// ni https://)
+# Para registry de Gitea: gitea.ejemplo.com
+# El owner del repositorio se agrega automáticamente en el workflow
+# Imagen final: REGISTRY_URL/owner/APP_NAME:latest
+REGISTRY_URL=gitea.ejemplo.com
+
+# Nombre de la aplicación (usado para container, imagen, y labels de Traefik)
+APP_NAME=mi-app
+
+# Dominio donde se desplegará la aplicación
+APP_DOMAIN=miapp.ejemplo.com
+
+# ===========================================
+# APPLICATION
+# ===========================================
+# URL pública de la aplicación
+NUXT_PUBLIC_APP_URL=https://miapp.ejemplo.com
+
+# ===========================================
+# REGISTRY AUTHENTICATION (solo para CI/CD)
+# ===========================================
+# Usuario del registro Docker (SECRETO)
+REGISTRY_USERNAME=mi-usuario
+
+# Contraseña del registro Docker (SECRETO)
+REGISTRY_PASSWORD=mi-password-secreto
+
+# ===========================================
+# AUTHENTIK PROXY OUTPOST
+# ===========================================
+# Esta plantilla usa Authentik Proxy Outpost para autenticación.
+# NO se requiere configuración OAuth en la aplicación.
+#
+# Requisitos:
+# 1. Red 'traefik-network' creada: docker network create traefik-network
+# 2. Middleware 'authentik-forward-auth' configurado en Traefik (ej: dynamic/middlewares.yml)
+# 3. Proxy Provider de tipo Forward Auth en Authentik
+# 4. Aplicación configurada en Authentik para el dominio APP_DOMAIN
+#
+# La aplicación Nuxt recibirá estos headers automáticamente:
+# - X-authentik-username: nombre de usuario
+# - X-authentik-email: email del usuario
+# - X-authentik-name: nombre completo
+# - X-authentik-groups: grupos del usuario (separados por |)
+# - X-authentik-uid: ID único del usuario

.gitea/workflows/build-and-deploy.yml

@@ -0,0 +1,60 @@
+name: build-and-deploy
+
+on:
+  push:
+    branches: [ main, master ]
+
+jobs:
+#───────────────── build & push ─────────────────
+  build:
+    runs-on: docker
+    env:
+      REG: ${{ vars.REGISTRY_URL }}
+      APP_NAME: ${{ vars.APP_NAME }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: docker/setup-buildx-action@v2
+      - uses: docker/login-action@v2
+        with:
+          registry: ${{ vars.REGISTRY_URL }}
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+
+      - name: Build+push ${{ vars.APP_NAME }}
+        run: |
+          cd nuxt4
+          docker build -t $REG/${{ github.repository_owner }}/$APP_NAME:${{ github.sha }} -t $REG/${{ github.repository_owner }}/$APP_NAME:latest .
+          docker push $REG/${{ github.repository_owner }}/$APP_NAME:${{ github.sha }}
+          docker push $REG/${{ github.repository_owner }}/$APP_NAME:latest
+
+#───────────────── deploy ─────────────────
+  deploy:
+    needs: build
+    runs-on: docker
+    env:
+      REG: ${{ vars.REGISTRY_URL }}
+      REPO_OWNER: ${{ github.repository_owner }}
+      APP_NAME: ${{ vars.APP_NAME }}
+      # Variables de entorno para docker-compose
+      APP_DOMAIN: ${{ vars.APP_DOMAIN }}
+      NUXT_PUBLIC_APP_URL: ${{ vars.NUXT_PUBLIC_APP_URL }}
+    steps:
+      - uses: actions/checkout@v3
+      - name: Login to registry
+        run: docker login ${{ vars.REGISTRY_URL }} -u ${{ secrets.REGISTRY_USERNAME }} -p ${{ secrets.REGISTRY_PASSWORD }}
+
+      - name: Info about environment
+        run: |
+          echo "ℹ️  Deploying ${{ vars.APP_NAME }}"
+          echo "   Domain: ${{ vars.APP_DOMAIN }}"
+          echo "   Image: ${{ vars.REGISTRY_URL }}/${{ github.repository_owner }}/${{ vars.APP_NAME }}:latest"
+          echo "   Network: principal"
+
+      - name: Pull fresh images used in compose
+        run: docker compose pull
+
+      - name: Clean up stack
+        run: docker compose --project-name $APP_NAME down
+
+      - name: Update stack
+        run: docker compose --project-name $APP_NAME up -d --remove-orphans --wait

.gitignore

@@ -1,17 +1,27 @@
-# Backups
+# Directorio de configuración local de Claude
-*.sql
+.claude/settings.local.json
-!postgres/init/*.sql
-!postgres/tests/*.sql
 
-# Docker volumes
+# Node modules
-postgres_data/
+node_modules/
 
-# Logs
+# Build outputs
-*.log
+dist/
+.output/
+.nuxt/
+.nitro/
 
 # Environment files
 .env
-.env.local
+.env.*
+!.env.example
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
 
 # OS files
 .DS_Store
@@ -24,6 +34,8 @@ Thumbs.db
 *.swo
 *~
 
-# Temporary files
+# Local data
-*.tmp
+.data/
-*.bak
+
+# Docker
+*.dockerignore

docker-compose.yml

@@ -1,32 +1,55 @@
 version: '3.8'
 
 services:
-  postgres:
+  app:
-    image: postgres:16-alpine
+    image: ${REG}/${REPO_OWNER}/${APP_NAME}:latest
-    container_name: riocata_postgres
+    container_name: ${APP_NAME}
-    environment:
-      POSTGRES_DB: riocata
-      POSTGRES_USER: riocata_user
-      POSTGRES_PASSWORD: riocata_password
-      PGDATA: /var/lib/postgresql/data/pgdata
-    ports:
-      - "5432:5432"
-    volumes:
-      - postgres_data:/var/lib/postgresql/data
-      - ./postgres/init:/docker-entrypoint-initdb.d
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U riocata_user -d riocata"]
-      interval: 10s
-      timeout: 5s
-      retries: 5
     restart: unless-stopped
+    environment:
+      # Node Environment
+      - NODE_ENV=production
+      - NUXT_HOST=0.0.0.0
+      - NUXT_PORT=3000
+      # Public URL
+      - NUXT_PUBLIC_APP_URL=${NUXT_PUBLIC_APP_URL}
     networks:
-      - riocata_network
+      - principal
+      - traefik-network
+    labels:
+      # Traefik labels
+      - "traefik.enable=true"
+      - "traefik.docker.network=traefik-network"
 
-volumes:
+      # Service (shared by both routers)
-  postgres_data:
+      - "traefik.http.services.${APP_NAME}.loadbalancer.server.port=3000"
-    driver: local
+
+      # Router 1: Public PWA resources (no auth) - Higher priority
+      - "traefik.http.routers.${APP_NAME}-public.rule=Host(`${APP_DOMAIN}`) && (PathPrefix(`/manifest.webmanifest`) || PathPrefix(`/sw.js`) || PathPrefix(`/workbox-`) || PathPrefix(`/icon-`) || PathPrefix(`/apple-touch-icon`) || PathPrefix(`/favicon.ico`) || PathPrefix(`/robots.txt`) || PathPrefix(`/offline.html`) || PathPrefix(`/api/_nuxt_icon/`))"
+      - "traefik.http.routers.${APP_NAME}-public.entrypoints=websecure"
+      - "traefik.http.routers.${APP_NAME}-public.tls.certresolver=letsencrypt"
+      - "traefik.http.routers.${APP_NAME}-public.priority=100"
+      - "traefik.http.routers.${APP_NAME}-public.service=${APP_NAME}"
+      - "traefik.http.routers.${APP_NAME}-public.middlewares=${APP_NAME}-headers,${APP_NAME}-cors"
+
+      # Router 2: Protected application (with auth) - Normal priority
+      - "traefik.http.routers.${APP_NAME}.rule=Host(`${APP_DOMAIN}`)"
+      - "traefik.http.routers.${APP_NAME}.entrypoints=websecure"
+      - "traefik.http.routers.${APP_NAME}.tls.certresolver=letsencrypt"
+      - "traefik.http.routers.${APP_NAME}.priority=10"
+      - "traefik.http.routers.${APP_NAME}.service=${APP_NAME}"
+      - "traefik.http.routers.${APP_NAME}.middlewares=authentik-forward-auth@file,${APP_NAME}-headers"
+
+      # Custom headers middleware
+      - "traefik.http.middlewares.${APP_NAME}-headers.headers.customrequestheaders.X-Forwarded-Proto=https"
+
+      # CORS middleware for public resources
+      - "traefik.http.middlewares.${APP_NAME}-cors.headers.accesscontrolallowmethods=GET,OPTIONS"
+      - "traefik.http.middlewares.${APP_NAME}-cors.headers.accesscontrolalloworiginlist=https://${APP_DOMAIN}"
+      - "traefik.http.middlewares.${APP_NAME}-cors.headers.accesscontrolmaxage=100"
+      - "traefik.http.middlewares.${APP_NAME}-cors.headers.addvaryheader=true"
 
 networks:
-  riocata_network:
+  principal:
-    driver: bridge
+    external: true
+  traefik-network:
+    external: true

nuxt4/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

nuxt4/Dockerfile

@@ -0,0 +1,35 @@
+# Multi-stage build for Nuxt 4 application
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Copy built application from builder stage
+COPY --from=builder /app/.output /app/.output
+
+# Expose port
+EXPOSE 3000
+
+# Set environment variables
+ENV NODE_ENV=production
+ENV NUXT_HOST=0.0.0.0
+ENV NUXT_PORT=3000
+
+# Start the application
+CMD ["node", ".output/server/index.mjs"]

nuxt4/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

nuxt4/app/app.vue

@@ -0,0 +1,122 @@
+<template>
+  <UApp>
+    <NuxtRouteAnnouncer />
+    <UNotifications />
+
+    <UContainer class="py-8">
+      <div class="space-y-6">
+        <!-- Header -->
+        <div class="text-center mb-8">
+          <h1 class="text-4xl font-bold mb-2">Plantilla Nuxt + Authentik</h1>
+          <p class="text-gray-600 dark:text-gray-400">
+            Ejemplo de integración con Authentik Proxy Outpost
+          </p>
+        </div>
+
+        <!-- Componentes de autenticación -->
+        <div v-if="isAuthenticated" class="grid gap-6 lg:grid-cols-2">
+          <!-- Columna izquierda -->
+          <div class="space-y-6">
+            <!-- Avatar y datos básicos -->
+            <AuthUserAvatar />
+
+            <!-- Botones de acción individuales -->
+            <UCard class="w-full">
+              <template #header>
+                <h3 class="text-lg font-semibold">Acciones de Sesión</h3>
+              </template>
+              <div class="flex flex-wrap gap-3">
+                <AuthSessionStatusButton />
+                <AuthProfileButton />
+                <AuthLogoutButton />
+                <AuthLoginButton />
+              </div>
+            </UCard>
+
+            <!-- Verificaciones Frontend/Backend -->
+            <UCard class="w-full">
+              <template #header>
+                <div class="flex items-center gap-2">
+                  <UIcon name="i-heroicons-cpu-chip" class="w-5 h-5" />
+                  <h3 class="text-lg font-semibold">Verificación de Sistema</h3>
+                </div>
+              </template>
+              <div class="flex flex-wrap gap-3">
+                <AuthFrontendVerificationButton />
+                <AuthBackendVerificationButton />
+              </div>
+            </UCard>
+          </div>
+
+          <!-- Columna derecha -->
+          <div class="space-y-6">
+            <!-- Metadatos completos -->
+            <AuthUserMetadata />
+
+            <!-- Verificaciones de Grupos Frontend -->
+            <UCard class="w-full">
+              <template #header>
+                <div class="flex items-center gap-2">
+                  <UIcon name="i-heroicons-user-group" class="w-5 h-5 text-purple-500" />
+                  <h3 class="text-lg font-semibold">Grupos (Frontend)</h3>
+                </div>
+              </template>
+              <div class="grid grid-cols-2 gap-3">
+                <AuthCheckAuthentikAdminsButton />
+                <AuthCheckGrupoPruebaButton />
+                <AuthCheckLvl0Button />
+                <AuthCheckPublicAccessButton />
+              </div>
+            </UCard>
+
+            <!-- Verificaciones de Grupos Backend -->
+            <UCard class="w-full">
+              <template #header>
+                <div class="flex items-center gap-2">
+                  <UIcon name="i-heroicons-server-stack" class="w-5 h-5 text-orange-500" />
+                  <h3 class="text-lg font-semibold">Grupos (Backend)</h3>
+                </div>
+              </template>
+              <div class="grid grid-cols-2 gap-3">
+                <AuthCheckAuthentikAdminsButton :verify-backend="true" />
+                <AuthCheckGrupoPruebaButton :verify-backend="true" />
+                <AuthCheckLvl0Button :verify-backend="true" />
+                <AuthCheckPublicAccessButton :verify-backend="true" />
+              </div>
+            </UCard>
+          </div>
+        </div>
+
+        <!-- Mensaje si no está autenticado -->
+        <UCard v-else class="text-center">
+          <div class="py-8">
+            <UIcon name="i-heroicons-shield-exclamation" class="w-16 h-16 mx-auto mb-4 text-gray-400" />
+            <h2 class="text-2xl font-semibold mb-2">No autenticado</h2>
+            <p class="text-gray-600 dark:text-gray-400">
+              Authentik Proxy Outpost debería redirigirte automáticamente.
+            </p>
+          </div>
+        </UCard>
+      </div>
+    </UContainer>
+  </UApp>
+</template>
+
+<script setup lang="ts">
+const { isAuthenticated } = useAuthentik()
+
+// Configurar meta tags para PWA
+useHead({
+  link: [
+    { rel: 'manifest', href: '/manifest.webmanifest' },
+    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
+    { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }
+  ],
+  meta: [
+    { name: 'theme-color', content: '#00DC82' },
+    { name: 'mobile-web-app-capable', content: 'yes' },
+    { name: 'apple-mobile-web-app-capable', content: 'yes' },
+    { name: 'apple-mobile-web-app-status-bar-style', content: 'default' }
+  ]
+})
+</script>

nuxt4/app/assets/css/main.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";

nuxt4/app/components/auth/BackendVerificationButton.vue

@@ -0,0 +1,82 @@
+<template>
+  <UButton
+    color="orange"
+    size="lg"
+    variant="outline"
+    :loading="loading"
+    @click="handleClick"
+    class="verification-button"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-server" />
+    </template>
+    Verificación Backend
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const toast = useToast()
+const loading = ref(false)
+
+const handleClick = async () => {
+  loading.value = true
+
+  try {
+    // Consultar el endpoint que lee los headers del servidor
+    const response = await $fetch<{
+      authenticated: boolean
+      user?: {
+        username: string
+        groups: string[]
+      }
+    }>('/api/auth/status')
+
+    if (response.authenticated && response.user) {
+      const groupCount = response.user.groups.length
+      const groupList = response.user.groups.join(', ') || 'Ninguno'
+
+      toast.add({
+        title: 'Verificación Backend',
+        description: `Usuario: ${response.user.username}
+Grupos (${groupCount}): ${groupList}`,
+        color: 'orange',
+        icon: 'i-heroicons-server-stack',
+        timeout: 5000
+      })
+    } else {
+      toast.add({
+        title: 'No Autenticado (Backend)',
+        description: 'No hay sesión activa en el servidor',
+        color: 'warning',
+        icon: 'i-heroicons-exclamation-triangle'
+      })
+    }
+  } catch (error) {
+    toast.add({
+      title: 'Error Backend',
+      description: 'No se pudo verificar en el servidor',
+      color: 'error',
+      icon: 'i-heroicons-x-circle'
+    })
+    console.error('Backend verification error:', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.verification-button {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.1), 0 2px 4px -1px rgba(249, 115, 22, 0.06);
+}
+
+.verification-button:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.2), 0 4px 6px -2px rgba(249, 115, 22, 0.1);
+}
+
+.verification-button:active {
+  transform: translateY(0) scale(0.98);
+}
+</style>

nuxt4/app/components/auth/CheckAuthentikAdminsButton.vue

@@ -0,0 +1,20 @@
+<template>
+  <AuthGroupCheckButton
+    group-name="authentik Admins"
+    label="Authentik Admins"
+    icon="i-heroicons-shield-check"
+    color="red"
+    variant="soft"
+    :verify-backend="verifyBackend"
+  />
+</template>
+
+<script setup lang="ts">
+interface Props {
+  verifyBackend?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  verifyBackend: false
+})
+</script>

nuxt4/app/components/auth/CheckGrupoPruebaButton.vue

@@ -0,0 +1,20 @@
+<template>
+  <AuthGroupCheckButton
+    group-name="grupo-prueba"
+    label="Grupo Prueba"
+    icon="i-heroicons-beaker"
+    color="blue"
+    variant="soft"
+    :verify-backend="verifyBackend"
+  />
+</template>
+
+<script setup lang="ts">
+interface Props {
+  verifyBackend?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  verifyBackend: false
+})
+</script>

nuxt4/app/components/auth/CheckLvl0Button.vue

@@ -0,0 +1,20 @@
+<template>
+  <AuthGroupCheckButton
+    group-name="lvl0"
+    label="Level 0"
+    icon="i-heroicons-key"
+    color="green"
+    variant="soft"
+    :verify-backend="verifyBackend"
+  />
+</template>
+
+<script setup lang="ts">
+interface Props {
+  verifyBackend?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  verifyBackend: false
+})
+</script>

nuxt4/app/components/auth/CheckPublicAccessButton.vue

@@ -0,0 +1,20 @@
+<template>
+  <AuthGroupCheckButton
+    group-name="public-access"
+    label="Acceso Público"
+    icon="i-heroicons-globe-alt"
+    color="gray"
+    variant="soft"
+    :verify-backend="verifyBackend"
+  />
+</template>
+
+<script setup lang="ts">
+interface Props {
+  verifyBackend?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  verifyBackend: false
+})
+</script>

nuxt4/app/components/auth/FrontendVerificationButton.vue

@@ -0,0 +1,59 @@
+<template>
+  <UButton
+    color="purple"
+    size="lg"
+    variant="outline"
+    @click="handleClick"
+    class="verification-button"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-computer-desktop" />
+    </template>
+    Verificación Frontend
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const { user } = useAuthentik()
+const toast = useToast()
+
+const handleClick = () => {
+  if (!user.value) {
+    toast.add({
+      title: 'No Autenticado',
+      description: 'No hay usuario autenticado',
+      color: 'warning',
+      icon: 'i-heroicons-exclamation-triangle'
+    })
+    return
+  }
+
+  const groupCount = user.value.groups.length
+  const groupList = user.value.groups.join(', ') || 'Ninguno'
+
+  toast.add({
+    title: 'Verificación Frontend',
+    description: `Usuario: ${user.value.username}
+Grupos (${groupCount}): ${groupList}`,
+    color: 'purple',
+    icon: 'i-heroicons-check-badge',
+    timeout: 5000
+  })
+}
+</script>
+
+<style scoped>
+.verification-button {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.1), 0 2px 4px -1px rgba(147, 51, 234, 0.06);
+}
+
+.verification-button:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.2), 0 4px 6px -2px rgba(147, 51, 234, 0.1);
+}
+
+.verification-button:active {
+  transform: translateY(0) scale(0.98);
+}
+</style>

nuxt4/app/components/auth/GroupCheckButton.vue

@@ -0,0 +1,112 @@
+<template>
+  <UButton
+    :color="color"
+    :size="size"
+    :variant="variant"
+    :loading="loading"
+    @click="handleClick"
+    class="group-check-button"
+  >
+    <template #leading>
+      <UIcon :name="icon" />
+    </template>
+    <slot>{{ label }}</slot>
+  </UButton>
+</template>
+
+<script setup lang="ts">
+import type { ButtonColor, ButtonVariant, ButtonSize } from '#ui/types'
+
+interface Props {
+  groupName: string
+  label?: string
+  icon?: string
+  color?: ButtonColor
+  variant?: ButtonVariant
+  size?: ButtonSize
+  verifyBackend?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Verificar Grupo',
+  icon: 'i-heroicons-shield-check',
+  color: 'primary',
+  variant: 'soft',
+  size: 'lg',
+  verifyBackend: false
+})
+
+const { hasGroup, checkGroupBackend } = useAuthentik()
+const toast = useToast()
+const loading = ref(false)
+
+const handleClick = async () => {
+  loading.value = true
+
+  try {
+    if (props.verifyBackend) {
+      // Verificación backend
+      const hasAccess = await checkGroupBackend(props.groupName)
+
+      if (hasAccess) {
+        toast.add({
+          title: 'Acceso Permitido (Backend)',
+          description: `Perteneces al grupo: ${props.groupName}`,
+          color: 'success',
+          icon: 'i-heroicons-check-circle'
+        })
+      } else {
+        toast.add({
+          title: 'Acceso Denegado (Backend)',
+          description: `No perteneces al grupo: ${props.groupName}`,
+          color: 'error',
+          icon: 'i-heroicons-x-circle'
+        })
+      }
+    } else {
+      // Verificación frontend
+      const hasAccess = hasGroup(props.groupName)
+
+      if (hasAccess) {
+        toast.add({
+          title: 'Acceso Permitido (Frontend)',
+          description: `Perteneces al grupo: ${props.groupName}`,
+          color: 'success',
+          icon: 'i-heroicons-check-circle'
+        })
+      } else {
+        toast.add({
+          title: 'Acceso Denegado (Frontend)',
+          description: `No perteneces al grupo: ${props.groupName}`,
+          color: 'error',
+          icon: 'i-heroicons-x-circle'
+        })
+      }
+    }
+  } catch (error) {
+    toast.add({
+      title: 'Error de Verificación',
+      description: 'No se pudo verificar el grupo',
+      color: 'error',
+      icon: 'i-heroicons-exclamation-triangle'
+    })
+    console.error('Group check error:', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.group-check-button {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.group-check-button:hover {
+  transform: translateY(-2px);
+}
+
+.group-check-button:active {
+  transform: translateY(0);
+}
+</style>

nuxt4/app/components/auth/LoginButton.vue

@@ -0,0 +1,19 @@
+<template>
+  <UButton
+    color="success"
+    size="lg"
+    @click="handleClick"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-arrow-right-end-on-rectangle" />
+    </template>
+    Iniciar Sesión
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const handleClick = () => {
+  // Recargar la página para forzar redirect de Authentik al login
+  window.location.reload()
+}
+</script>

nuxt4/app/components/auth/LogoutButton.vue

@@ -0,0 +1,21 @@
+<template>
+  <UButton
+    color="error"
+    size="lg"
+    variant="soft"
+    @click="handleClick"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-arrow-right-on-rectangle" />
+    </template>
+    Cerrar Sesión
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const { logout } = useAuthentik()
+
+const handleClick = () => {
+  logout()
+}
+</script>

nuxt4/app/components/auth/ProfileButton.vue

@@ -0,0 +1,20 @@
+<template>
+  <UButton
+    color="primary"
+    size="lg"
+    @click="handleClick"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-user-circle" />
+    </template>
+    Ver Perfil
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const { goToProfile } = useAuthentik()
+
+const handleClick = () => {
+  goToProfile()
+}
+</script>

nuxt4/app/components/auth/SessionStatusButton.vue

@@ -0,0 +1,21 @@
+<template>
+  <UButton
+    color="info"
+    size="lg"
+    variant="soft"
+    @click="handleClick"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-information-circle" />
+    </template>
+    Estado de Sesión
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const { checkSessionStatus } = useAuthentik()
+
+const handleClick = () => {
+  checkSessionStatus()
+}
+</script>

nuxt4/app/components/auth/UserAvatar.vue

@@ -0,0 +1,20 @@
+<template>
+  <UCard v-if="user" class="w-full">
+    <div class="flex items-center gap-4">
+      <UAvatar
+        :src="user.avatar"
+        :alt="user.name || user.username"
+        size="xl"
+      />
+      <div class="flex-1">
+        <h3 class="font-semibold text-lg">{{ user.name || user.username }}</h3>
+        <p class="text-sm text-gray-500 dark:text-gray-400">{{ user.email }}</p>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">ID: {{ user.uid }}</p>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const { user } = useAuthentik()
+</script>

nuxt4/app/components/auth/UserMetadata.vue

@@ -0,0 +1,90 @@
+<template>
+  <UCard v-if="user" class="w-full">
+    <template #header>
+      <h3 class="font-semibold text-lg flex items-center gap-2">
+        <UIcon name="i-heroicons-information-circle" />
+        Metadatos del Usuario
+      </h3>
+    </template>
+
+    <div class="space-y-3">
+      <!-- Username -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-at-symbol" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400">Username</p>
+          <p class="font-medium">{{ user.username }}</p>
+        </div>
+      </div>
+
+      <!-- Email -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-envelope" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400">Email</p>
+          <p class="font-medium">{{ user.email }}</p>
+        </div>
+      </div>
+
+      <!-- Nombre completo -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-user" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400">Nombre Completo</p>
+          <p class="font-medium">{{ user.name || 'No especificado' }}</p>
+        </div>
+      </div>
+
+      <!-- UID -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-key" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400">ID Único</p>
+          <p class="font-mono text-sm">{{ user.uid }}</p>
+        </div>
+      </div>
+
+      <!-- Grupos -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-user-group" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Grupos</p>
+          <div class="flex flex-wrap gap-2">
+            <UBadge
+              v-for="group in user.groups"
+              :key="group"
+              color="primary"
+              variant="soft"
+            >
+              {{ group }}
+            </UBadge>
+            <UBadge v-if="user.groups.length === 0" color="gray" variant="soft">
+              Sin grupos asignados
+            </UBadge>
+          </div>
+        </div>
+      </div>
+
+      <!-- Metadata de la Aplicación (si está disponible) -->
+      <div v-if="user.appSlug || user.outpostName" class="pt-3 mt-3 border-t border-gray-200 dark:border-gray-700">
+        <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Información de Conexión</p>
+        <div class="space-y-2">
+          <div v-if="user.appSlug" class="flex items-center gap-2 text-sm">
+            <UIcon name="i-heroicons-cube" class="text-gray-400" />
+            <span class="text-gray-600 dark:text-gray-300">App: </span>
+            <code class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">{{ user.appSlug }}</code>
+          </div>
+          <div v-if="user.outpostName" class="flex items-center gap-2 text-sm">
+            <UIcon name="i-heroicons-server" class="text-gray-400" />
+            <span class="text-gray-600 dark:text-gray-300">Outpost: </span>
+            <code class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">{{ user.outpostName }}</code>
+          </div>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const { user } = useAuthentik()
+</script>

nuxt4/app/composables/useAuthentik.ts

@@ -0,0 +1,220 @@
+/**
+ * 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 {
+  username: string
+  email: string | undefined
+  name: string | undefined
+  groups: string[]
+  uid: string | undefined
+  avatar: string
+  // Metadata de la aplicación y outpost
+  appSlug?: string
+  outpostName?: 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 | null>('authentikUser', () => {
+    // Solo en el servidor, leer los headers
+    if (import.meta.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']
+      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) {
+        return null
+      }
+
+      return {
+        username,
+        email,
+        name,
+        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`
+      }
+    }
+
+    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: 'neutral',
+        icon: 'i-heroicons-wifi'
+      })
+      return
+    }
+
+    // Mostrar toast de "verificando..."
+    toast.add({
+      title: 'Verificando sesión...',
+      description: 'Consultando estado en Authentik',
+      color: 'info',
+      icon: 'i-heroicons-arrow-path'
+    })
+
+    try {
+      // Consultar el endpoint de API que verifica contra Authentik
+      const response = await $fetch<AuthStatusResponse>('/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'
+        })
+      } 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',
+          actions: [{
+            label: 'Iniciar Sesión',
+            onClick: () => {
+              // Recargar la página forzará a Authentik a redirigir al login
+              window.location.reload()
+            }
+          }]
+        })
+      }
+    } 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: '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 as Error)?.message || String(error)
+      const isCorsOrRedirectError = errorMessage.includes('Failed to fetch') ||
+                                     errorMessage.includes('CORS') ||
+                                     (error as any)?.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',
+          actions: [{
+            label: 'Iniciar Sesión',
+            onClick: () => {
+              // 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'
+        })
+      }
+      console.error('Error checking session status:', error)
+    }
+  }
+
+  /**
+   * Verifica si el usuario pertenece a un grupo específico (frontend)
+   * Lee los grupos desde el estado local (headers de Authentik)
+   */
+  const hasGroup = (groupName: string): boolean => {
+    if (!user.value) return false
+    return user.value.groups.includes(groupName)
+  }
+
+  /**
+   * Verifica si el usuario pertenece a un grupo específico (backend)
+   * Consulta al servidor para validar contra Authentik
+   */
+  const checkGroupBackend = async (groupName: string): Promise<boolean> => {
+    try {
+      const response = await $fetch<{ hasGroup: boolean }>(`/api/auth/check-group`, {
+        method: 'POST',
+        body: { groupName }
+      })
+      return response.hasGroup
+    } catch (error) {
+      console.error('Error checking group membership:', error)
+      return false
+    }
+  }
+
+  return {
+    user,
+    isAuthenticated,
+    logout,
+    goToProfile,
+    checkSessionStatus,
+    hasGroup,
+    checkGroupBackend
+  }
+}

nuxt4/app/server/api/debug/all-headers.ts

@@ -0,0 +1,15 @@
+/**
+ * Endpoint temporal de debug para ver TODOS los headers
+ * ELIMINAR después de debugging
+ */
+export default defineEventHandler((event) => {
+  const headers = getHeaders(event)
+
+  return {
+    timestamp: new Date().toISOString(),
+    headers: headers,
+    authentikHeaders: Object.fromEntries(
+      Object.entries(headers).filter(([key]) => key.toLowerCase().startsWith('x-authentik-'))
+    )
+  }
+})

nuxt4/eslint.config.mjs

@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)

nuxt4/nuxt.config.ts

@@ -0,0 +1,152 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+
+  modules: [
+    '@nuxt/ui',
+    '@nuxt/test-utils',
+    '@nuxt/image',
+    '@nuxt/eslint',
+    '@nuxt/content',
+    '@vite-pwa/nuxt'
+  ],
+
+  css: ['~/assets/css/main.css'],
+
+  runtimeConfig: {
+    public: {
+      authentikUrl: process.env.NUXT_PUBLIC_AUTHENTIK_URL || 'https://authentik.nucleoriofrio.com'
+    }
+  },
+
+  pwa: {
+    registerType: 'autoUpdate',
+    includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'icon.svg', 'offline.html'],
+    manifest: {
+      name: 'RioCata - Sistema de Catación de Café',
+      short_name: 'RioCata',
+      description: 'Sistema de catación de café para evaluación y análisis de calidad',
+      theme_color: '#ffffff',
+      background_color: '#ffffff',
+      display: 'standalone',
+      display_override: ['window-controls-overlay'],
+      orientation: 'portrait',
+      scope: '/',
+      start_url: '/',
+      icons: [
+        {
+          src: '/icon-72x72.png',
+          sizes: '72x72',
+          type: 'image/png',
+          purpose: 'any'
+        },
+        {
+          src: '/icon-96x96.png',
+          sizes: '96x96',
+          type: 'image/png',
+          purpose: 'any'
+        },
+        {
+          src: '/icon-128x128.png',
+          sizes: '128x128',
+          type: 'image/png',
+          purpose: 'any'
+        },
+        {
+          src: '/icon-144x144.png',
+          sizes: '144x144',
+          type: 'image/png',
+          purpose: 'any'
+        },
+        {
+          src: '/icon-152x152.png',
+          sizes: '152x152',
+          type: 'image/png',
+          purpose: 'any'
+        },
+        {
+          src: '/icon-192x192.png',
+          sizes: '192x192',
+          type: 'image/png',
+          purpose: 'any maskable'
+        },
+        {
+          src: '/icon-256x256.png',
+          sizes: '256x256',
+          type: 'image/png',
+          purpose: 'any'
+        },
+        {
+          src: '/icon-384x384.png',
+          sizes: '384x384',
+          type: 'image/png',
+          purpose: 'any'
+        },
+        {
+          src: '/icon-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'any maskable'
+        },
+        {
+          src: '/icon-512x512-maskable.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'maskable'
+        }
+      ],
+      screenshots: [
+        {
+          src: '/screenshots/desktop-1.png',
+          sizes: '1920x1080',
+          type: 'image/png',
+          form_factor: 'wide',
+          label: 'Pantalla principal en escritorio'
+        },
+        {
+          src: '/screenshots/mobile-1.png',
+          sizes: '614x853',
+          type: 'image/png',
+          form_factor: 'narrow',
+          label: 'Pantalla principal en móvil'
+        }
+      ]
+    },
+    workbox: {
+      navigateFallback: '/offline.html',
+      navigateFallbackDenylist: [/^\/api\//, /^\/authentik\//],
+      globPatterns: ['**/*.{js,css,html,png,svg,ico,json}'],
+      cleanupOutdatedCaches: true,
+      runtimeCaching: [
+        {
+          urlPattern: /^https:\/\/authentik\.nucleoriofrio\.com\/.*/i,
+          handler: 'NetworkOnly'
+        },
+        {
+          urlPattern: ({ url, request }) => {
+            return request.destination === 'document' ||
+                   request.mode === 'navigate' ||
+                   url.pathname === '/'
+          },
+          handler: 'NetworkFirst',
+          options: {
+            cacheName: 'pages-cache',
+            networkTimeoutSeconds: 3,
+            expiration: {
+              maxEntries: 50,
+              maxAgeSeconds: 60 * 60 * 24 * 7 // 7 days
+            },
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
+        }
+      ]
+    },
+    devOptions: {
+      enabled: true,
+      type: 'module'
+    }
+  }
+})

nuxt4/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "nuxt4",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxt/content": "^3.7.1",
+    "@nuxt/eslint": "^1.9.0",
+    "@nuxt/image": "^1.11.0",
+    "@nuxt/test-utils": "^3.19.2",
+    "@nuxt/ui": "^4.0.1",
+    "better-sqlite3": "^12.4.1",
+    "eslint": "^9.37.0",
+    "nuxt": "^4.1.3",
+    "typescript": "^5.9.3",
+    "vue": "^3.5.22",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@vite-pwa/nuxt": "^1.0.4"
+  }
+}

nuxt4/public/icon-maskable.svg

@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
+  <!-- Background gradient para maskable (fondo completo sin transparencia) -->
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#00DC82;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#00A155;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#4A90E2;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#2E5C8A;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Fondo completo (sin transparencia para evitar el blanco en Windows) -->
+  <rect width="512" height="512" fill="url(#grad1)"/>
+
+  <!-- Contenido en el 80% central (safe zone para maskable icons) -->
+  <g transform="translate(256, 256) scale(0.9) translate(-256, -256)">
+    <!-- Shield shape (Authentik security) -->
+    <path d="M256 80 L380 140 L380 280 Q380 360 256 420 Q132 360 132 280 L132 140 Z"
+          fill="url(#grad2)" opacity="0.3"/>
+
+    <!-- Letter N (Nuxt) -->
+    <path d="M180 200 L180 340 L220 340 L220 260 L292 340 L332 340 L332 200 L292 200 L292 280 L220 200 Z"
+          fill="white" stroke="white" stroke-width="4"/>
+
+    <!-- Lock icon (Authentication) -->
+    <g transform="translate(340, 180)">
+      <rect x="-20" y="10" width="40" height="50" rx="5" fill="white" opacity="0.9"/>
+      <path d="M -15 10 L -15 -5 Q -15 -20 0 -20 Q 15 -20 15 -5 L 15 10"
+            stroke="white" stroke-width="6" fill="none" opacity="0.9"/>
+      <circle cx="0" cy="30" r="5" fill="#00DC82"/>
+    </g>
+  </g>
+</svg>

nuxt4/public/icon.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
+  <!-- Background gradient -->
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#00DC82;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#00A155;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#4A90E2;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#2E5C8A;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Background circle -->
+  <circle cx="256" cy="256" r="240" fill="url(#grad1)"/>
+
+  <!-- Shield shape (Authentik security) -->
+  <path d="M256 80 L380 140 L380 280 Q380 360 256 420 Q132 360 132 280 L132 140 Z"
+        fill="url(#grad2)" opacity="0.3"/>
+
+  <!-- Letter N (Nuxt) -->
+  <path d="M180 200 L180 340 L220 340 L220 260 L292 340 L332 340 L332 200 L292 200 L292 280 L220 200 Z"
+        fill="white" stroke="white" stroke-width="4"/>
+
+  <!-- Lock icon (Authentication) -->
+  <g transform="translate(340, 180)">
+    <rect x="-20" y="10" width="40" height="50" rx="5" fill="white" opacity="0.9"/>
+    <path d="M -15 10 L -15 -5 Q -15 -20 0 -20 Q 15 -20 15 -5 L 15 10"
+          stroke="white" stroke-width="6" fill="none" opacity="0.9"/>
+    <circle cx="0" cy="30" r="5" fill="url(#grad1)"/>
+  </g>
+</svg>

nuxt4/public/offline.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Modo Offline - Plantilla Nuxt + Authentik</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+
+    .container {
+      background: white;
+      border-radius: 16px;
+      padding: 48px 32px;
+      max-width: 480px;
+      width: 100%;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      text-align: center;
+    }
+
+    .icon {
+      width: 80px;
+      height: 80px;
+      margin: 0 auto 24px;
+      background: #f3f4f6;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 40px;
+    }
+
+    h1 {
+      font-size: 28px;
+      color: #1f2937;
+      margin-bottom: 16px;
+      font-weight: 700;
+    }
+
+    p {
+      font-size: 16px;
+      color: #6b7280;
+      line-height: 1.6;
+      margin-bottom: 32px;
+    }
+
+    .button {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      border: none;
+      padding: 14px 32px;
+      border-radius: 8px;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: transform 0.2s, box-shadow 0.2s;
+      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+    }
+
+    .button:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
+    }
+
+    .button:active {
+      transform: translateY(0);
+    }
+
+    .status {
+      display: inline-block;
+      margin-top: 24px;
+      padding: 8px 16px;
+      background: #fef3c7;
+      color: #92400e;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="icon">📡</div>
+    <h1>Modo Offline</h1>
+    <p>
+      No tienes conexión a internet en este momento.
+    </p>
+    <p>
+      <strong>Esta aplicación usa SSR (Server-Side Rendering) con autenticación Authentik</strong>, por lo que requiere conexión para cargar cuando se abre desde cero.
+    </p>
+    <p style="font-size: 14px; color: #9ca3af;">
+      💡 <strong>Nota técnica:</strong> El modo offline completo solo funcionaría sin autenticación o sin SSR (SPA).
+      Sin embargo, si ya tienes la app abierta y pierdes conexión, la interfaz seguirá funcionando con los datos cacheados.
+    </p>
+    <button class="button" onclick="window.location.reload()">
+      Reintentar Conexión
+    </button>
+    <div class="status">
+      ⚠️ Sin conexión
+    </div>
+  </div>
+
+  <script>
+    // Verificar conexión cada 3 segundos
+    setInterval(() => {
+      if (navigator.onLine) {
+        window.location.href = '/';
+      }
+    }, 3000);
+
+    // Escuchar evento de conexión
+    window.addEventListener('online', () => {
+      window.location.href = '/';
+    });
+  </script>
+</body>
+</html>

nuxt4/public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

nuxt4/server/api/auth/check-group.post.ts

@@ -0,0 +1,40 @@
+/**
+ * Endpoint para verificar membresía de grupo desde el backend
+ * Valida contra los headers de Authentik en el servidor
+ */
+export default defineEventHandler(async (event) => {
+  // Leer el body de la petición
+  const body = await readBody(event)
+  const { groupName } = body
+
+  if (!groupName || typeof groupName !== 'string') {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Group name is required'
+    })
+  }
+
+  // Leer headers de Authentik
+  const headers = getHeaders(event)
+  const authentikGroups = headers['x-authentik-groups']
+
+  // Si no hay header de grupos, el usuario no está autenticado o no tiene grupos
+  if (!authentikGroups) {
+    return {
+      hasGroup: false,
+      groups: []
+    }
+  }
+
+  // Parsear los grupos (separados por |)
+  const userGroups = authentikGroups.split('|').filter(g => g.trim())
+
+  // Verificar si el usuario tiene el grupo solicitado
+  const hasGroup = userGroups.includes(groupName)
+
+  return {
+    hasGroup,
+    groups: userGroups,
+    checkedGroup: groupName
+  }
+})

nuxt4/server/api/auth/status.get.ts

@@ -0,0 +1,43 @@
+/**
+ * API endpoint para verificar el estado de autenticación en tiempo real
+ * Consulta los headers inyectados por Authentik Proxy Outpost
+ */
+export default defineEventHandler((event) => {
+  // Establecer headers para prevenir caching
+  setResponseHeaders(event, {
+    'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
+    'Pragma': 'no-cache',
+    'Expires': '0'
+  })
+
+  // Leer headers de Authentik en tiempo real
+  const headers = getHeaders(event)
+
+  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, no hay sesión activa en Authentik
+  if (!username) {
+    return {
+      authenticated: false,
+      user: null,
+      timestamp: new Date().toISOString()
+    }
+  }
+
+  // Sesión activa
+  return {
+    authenticated: true,
+    user: {
+      username,
+      email,
+      name,
+      groups: groups ? groups.split('|') : [],
+      uid
+    },
+    timestamp: new Date().toISOString()
+  }
+})

nuxt4/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}