Add modular group verification system with frontend and backend checks

This commit implements a comprehensive, reusable group verification system:

Components:
- GroupCheckButton: Base component for group verification
- 7 specialized buttons: 3 real groups (authentik Admins, grupo-prueba, lvl0), 1 public access test, 2 system verification buttons
- All buttons support both frontend and backend verification modes

Backend:
- New API endpoint /api/auth/check-group for server-side group validation
- Reads Authentik headers and validates group membership

Frontend:
- Enhanced useAuthentik composable with hasGroup() and checkGroupBackend() methods
- Toast notifications for all verification results
- Smooth animations and color-coded visual feedback

UI Improvements:
- Organized layout with cards for different verification types
- Grid layout for group buttons
- Professional styling with hover effects and shadows
- Clear visual distinction between frontend/backend checks

nuxt4/app/app.vue

@@ -22,6 +22,9 @@
 
             <!-- 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 />
@@ -29,12 +32,58 @@
                 <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>
 

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/composables/useAuthentik.ts

@@ -182,11 +182,39 @@ export const useAuthentik = () => {
     }
   }
 
+  /**
+   * 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
+    checkSessionStatus,
+    hasGroup,
+    checkGroupBackend
   }
 }

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
+  }
+})