La autenticación es una de las funcionalidades más críticas en cualquier aplicación web. Implementarla incorrectamente puede exponer datos de usuarios y dañar la confianza. Next.js ofrece varios patrones para implementar autenticación segura, cada uno adecuado para diferentes casos de uso.
Esta guía cubre los principales enfoques y las mejores prácticas.
Autenticación basada en sesiones
La autenticación por sesión almacena un identificador de sesión en una cookie, mientras que los datos de la sesión viven en el servidor (en memoria, Redis o una base de datos). Este enfoque es ideal para aplicaciones tradicionales renderizadas en servidor.
Cómo funciona:
- El usuario envía sus credenciales
- El servidor valida y crea una sesión, almacenándola en una base de datos o caché
- El servidor establece una cookie HTTP-only con el ID de sesión
- En peticiones posteriores, el servidor lee la cookie, busca la sesión e identifica al usuario
Ventajas: Simple de implementar, fácil de revocar (eliminando la sesión), funciona sin JavaScript.
Desventajas: Requiere estado en el servidor, lo que complica el escalado horizontal sin un almacén de sesiones compartido (Redis).
Autenticación basada en JWT
Los JSON Web Tokens codifican información del usuario en un token firmado criptográficamente. El servidor valida la firma del token sin necesidad de consultar el estado de la sesión.
Cómo funciona:
- El usuario envía sus credenciales
- El servidor valida y devuelve un JWT firmado (normalmente en una cookie o cabecera Authorization)
- El cliente envía el JWT con cada petición
- El servidor valida la firma y extrae la información del usuario del token
Ventajas: Sin estado — no necesita almacenamiento en servidor. Funciona bien con APIs y clientes móviles.
Desventajas: La revocación de tokens es difícil (los tokens son válidos hasta que expiran). El tamaño del token puede ser grande. Debe gestionarse la rotación de refresh tokens de forma segura.
Autenticación en Next.js App Router
Next.js App Router proporciona varias herramientas para la autenticación:
Middleware se ejecuta antes de que una petición llegue a tu página o ruta API. Úsalo para comprobar la autenticación y redirigir a usuarios no autenticados:
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
export function middleware(request: NextRequest) {
const token = request.cookies.get("session")?.value;
if (!token && !request.nextUrl.pathname.startsWith("/login")) {
return NextResponse.redirect(new URL("/login", request.url));
}
}
Server Components pueden leer datos de sesión directamente, haciendo que las comprobaciones de autenticación sean fluidas sin JavaScript del lado del cliente.
API Routes manejan los endpoints de login, logout y renovación de tokens.
Usar Auth.js (NextAuth.js)
Auth.js es la librería de autenticación más popular para Next.js. Soporta decenas de proveedores (Google, GitHub, magic links por correo) y maneja la complejidad de los flujos OAuth, la gestión de sesiones y la protección CSRF.
La configuración básica implica un archivo de configuración de auth y un manejador de ruta que delega la lógica OAuth a la librería.
Mejores prácticas de seguridad
- Usa cookies HTTP-only para tokens de sesión — evita que ataques XSS roben los tokens
- Implementa protección CSRF — Auth.js la incluye por defecto
- Configura flags seguros de cookies —
Secure,SameSite=Lax,HttpOnly - Hashea las contraseñas correctamente — usa bcrypt o argon2, nunca MD5 o SHA-256
- Limita la tasa de intentos de login — previene ataques de fuerza bruta
- Usa HTTPS en todas partes — sin excepciones
La autenticación es demasiado importante como para hacerla mal. Elige un enfoque que se ajuste a la arquitectura y requisitos de seguridad de tu aplicación.
¿Estás implementando autenticación para tu aplicación Next.js? En Vynta construimos sistemas de autenticación seguros adaptados a las necesidades de cada proyecto, usando librerías probadas y las mejores prácticas de seguridad.