Habilidades nextjs-supabase-auth
📦

nextjs-supabase-auth

Seguro

Implementar Supabase Auth en Next.js App Router

La construcción de autenticación en Next.js requiere entender los límites entre servidor y cliente. Esta habilidad proporciona patrones probados para la integración segura de Supabase Auth con la arquitectura App Router.

Soporta: Claude Codex Code(CC)
📊 71 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "nextjs-supabase-auth". Configurar middleware de autenticación de Supabase para Next.js App Router

Resultado esperado:

  • Crear middleware.ts en la raíz del proyecto
  • Importar createServerClient desde @supabase/ssr
  • Configurar cliente con SUPABASE_URL y SUPABASE_ANON_KEY de env
  • Agregar matcher para rutas que necesitan protección de autenticación
  • Manejar actualización de tokens cuando las sesiones expiren
  • Redirigir a página de login cuando la verificación de auth falle en rutas protegidas

Usando "nextjs-supabase-auth". ¿Cómo manejo la autenticación en Componentes de Servidor?

Resultado esperado:

  • Usar createServerClient para instanciar el cliente Supabase
  • Llamar a getUser() para validar la sesión actual
  • Pasar datos de usuario como props a componentes hijos
  • Evitar llamar a getSession() directamente en Componentes de Servidor
  • Dejar que el middleware maneje la validación de sesiones para rutas protegidas

Auditoría de seguridad

Seguro
v2 • 2/24/2026

Static analysis flagged markdown backticks as shell commands (false positive). Line 57 uses backticks for inline code formatting in documentation, not command execution. No actual external commands, cryptographic operations, or dangerous patterns exist. Skill provides documentation and patterns only - no executable code with security risks.

1
Archivos escaneados
61
Líneas analizadas
0
hallazgos
2
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude Ver historial de auditorías →

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
31
Comunidad
100
Seguridad
91
Cumplimiento de la especificación

Lo que puedes crear

Desarrollador Full-Stack Construyendo Aplicación SaaS

Implementar autenticación segura de usuarios con email y proveedores OAuth para un producto SaaS de Next.js usando Supabase como backend.

Equipo Migrando de Pages Router a App Router

Refactorizar la implementación existente de Supabase auth para trabajar con componentes de servidor y arquitectura de middleware de Next.js App Router.

Desarrollador Agregando Autenticación a App Existente

Integrar autenticación en una aplicación Next.js existente con backend de Supabase, siguiendo las mejores prácticas de seguridad desde el inicio.

Prueba estos prompts

Configuración Básica del Cliente Supabase 
Ayúdame a configurar la configuración del cliente Supabase para un proyecto de Next.js App Router. Necesito clientes separados para componentes de servidor, componentes de cliente y middleware usando @supabase/ssr.
Implementación de Ruta Protegida 
Crear un middleware que proteja las rutas bajo /dashboard y redirija usuarios no autenticados a /login. Incluir lógica de actualización de sesión para tokens expirados.
Manejador de Callback de OAuth 
Construir un manejador de ruta de callback de OAuth que intercambie el código de autorización por una sesión de Supabase y redirija a los usuarios a la página apropiada después de una autenticación exitosa.
Flujo Completo de Autenticación con Server Actions 
Implementar un flujo completo de autenticación usando Server Actions para login, registro y logout. Incluir manejo adecuado de errores, validación de formularios y manejo seguro de tokens sin exponer credenciales al cliente.

Mejores prácticas

  • Usar el paquete @supabase/ssr específicamente diseñado para los límites de servidor/cliente de Next.js App Router
  • Manejar autenticación en middleware para proteger rutas antes de renderizar y gestionar la actualización de sesiones de forma transparente
  • Almacenar tokens en cookies automáticamente gestionadas por @supabase/ssr en lugar de manejar manualmente el almacenamiento de tokens

Evitar

  • Llamar a getSession() directamente en Componentes de Servidor en lugar de usar middleware para protección de rutas
  • Gestionar estado de autenticación en componentes cliente sin implementar listeners adecuados de cambio de estado de autenticación
  • Almacenar o manejar manualmente tokens JWT cuando @supabase/ssr proporciona gestión automática de sesiones basada en cookies

Preguntas frecuentes

¿Cuál es la diferencia entre @supabase/ssr y @supabase/supabase-js?
@supabase/ssr está específicamente diseñado para Next.js App Router con manejo de cookies incorporado y soporte para límites entre servidor y cliente. @supabase/supabase-js es la biblioteca cliente principal pero requiere manejo manual de cookies y sesiones para escenarios SSR.
¿Cómo protejo rutas API con Supabase Auth?
Crear un archivo middleware.ts en la raíz de tu proyecto que verifique la autenticación para patrones de ruta específicos. Usar createServerClient para validar sesiones y redirigir o retornar 401 para solicitudes no autenticadas.
¿Puedo usar esta habilidad con Pages Router en lugar de App Router?
Esta habilidad se enfoca en patrones de App Router. Para Pages Router, usarías diferentes patrones con getServerSideProps y diferentes enfoques de manejo de cookies.
¿Cómo manejo proveedores OAuth como Google o GitHub?
Configurar proveedores OAuth en tu panel de Supabase, luego crear manejadores de ruta de callback que intercambien el código de autorización por una sesión usando el flujo OAuth de Supabase. La habilidad cubre este patrón en detalle.
¿Dónde debo almacenar las credenciales de Supabase?
Almacenar SUPABASE_URL y SUPABASE_ANON_KEY en tus variables de entorno. Nunca hacer commit de estas al control de versiones. Usar .env.local para desarrollo local y la gestión de secretos de tu plataforma de hosting para producción.
¿Cómo manejo el logout correctamente?
Usar el método signOut() de Supabase para invalidar la sesión del lado del servidor, luego limpiar cualquier estado local y redirigir a la página de login o inicio. Server Actions proporciona un patrón limpio para esta operación.

Detalles del desarrollador

Autor

sickn33

Licencia

MIT

Repositorio

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-supabase-auth

Ref.

main

Estructura de archivos

📄 SKILL.md