Passkeys en Next.js. Como desarrollador con años de experiencia construyendo aplicaciones web escalables, he visto pasar muchas formas de autenticación. Pero ninguna tan prometedora como las passkeys en webs con Next.js. En este artículo te contaré por qué implementarlas es una gran decisión, te compartiré una experiencia real construyendo un sistema passwordless para un proyecto, y te guiaré paso a paso para que tú también puedas darle a tus usuarios una manera fácil, rápida y segura de entrar a tu web.
¿Qué son las passkeys y por qué usar passkeys en webs con Next.js?
Las passkeys son claves criptográficas únicas almacenadas en dispositivos del usuario (como smartphones o navegadores) que usan estándares como WebAuthn y FIDO2 para autenticar sin necesidad de contraseñas. Esto significa que tu aplicación Next.js puede ofrecer un inicio de sesión más seguro y sin las frustraciones habituales de recordar o resetear passwords. En uno de mis últimos proyectos para un marketplace, sustituimos el tradicional login con contraseña por passkeys.
Los resultados fueron notables, con reducción de tickets de soporte por problemas de acceso y un aumento significativo en la tasa de retención, debido a la experiencia fluida para el usuario. ¿Por qué Next.js? Porque con sus API Routes y su flexibilidad entre código cliente y servidor, es ideal para integrar esta tecnología sin complicaciones.
Beneficios principales de implementar passkeys en Next.js
- Seguridad infranqueable: elimina riesgo de phishing y robo de contraseñas al usar autenticación basada en claves públicas y privadas.
- Experiencia del usuario mejorada: login y registro ultrarrápidos, con un solo click o reconocimiento biométrico.
- Simplicidad de desarrollo: Endpoints APIs en Next.js simplifican manejo de lógica y persistencia.
- Compatibilidad progresiva: funciona en Chrome, Edge, Safari y Firefox recientes en móvil y escritorio.
- Reducción de costos operativos: menos soporte técnico por recuperación de cuentas.
Cómo implementar passkeys en webs con Next.js: experiencia y guía paso a paso
Paso 1. Entender la arquitectura del proceso de passkeys
En esencia, el flow se basa en:
- Registrar una passkey, usuario crea un par de claves, pública y privada, almacenas la pública.
- Autenticar con passkey usuario demuestra control sobre la clave privada enviando respuesta firmada validas en backend.
Con Next.js, esto se articula creando rutas API para manejar desafíos challenges y verificar respuestas.
Paso 2. Preparar la base de datos
En mi proyecto utilicé MongoDB para almacenar usuarios y sus claves públicas. Cada passkey contiene:
- ID único de la credencial.
- Clave pública en formato base64.
- Información del usuario email o ID interno.
- Otros metadatos fecha de creación, tipo de autenticación.
También es relevante guardar el contador de autenticación para prevenir ataques de repetición.
Paso 3. Crear la API para registro de passkeys
Tu endpoint /api/register debe:
- Generar un challenge seguro usando crypto.
- Enviar al cliente opciones de registro (challenge, RP id, usuario, tipos de clave).
- Recibir respuesta del cliente con la credencial pública y validarla.
En mi experiencia, la librería @simplewebauthn/server facilita esta tarea integrándola con Next.js.
// /pages/api/register.js
import { generateRegistrationOptions, verifyRegistrationResponse } from ‘@simplewebauthn/server’
import { getUserByEmail, saveUserPasskey } from ‘../../lib/db’
export default async function handler(req, res) {
if (req.method === ‘POST’) {
const { email, attestation } = req.body
const user = await getUserByEmail(email)
if (!user) return res.status(404).json({ error: ‘User not found’ })
// Opciones para el challenge de registro
const opts = generateRegistrationOptions({
rpName: ‘MiApp’,
userID: user.id,
userName: email,
attestationType: ‘none’,
})
// Verificamos la respuesta del cliente
const verification = await verifyRegistrationResponse({
credential: attestation,
expectedChallenge: opts.challenge,
expectedOrigin: ‘https://tuweb.com’,
expectedRPID: ‘tuweb.com’,
})
if (verification.verified) {
await saveUserPasskey(user.id, verification.registrationInfo)
return res.status(200).json({ verified: true })
} else {
return res.status(400).json({ verified: false })
}
}
res.status(405).end()
}
Paso 4. Crear la API para autenticación con passkeys
El endpoint /api/login debe:
- Enviar un challenge para autenticación.
- Recibir respuesta firmada y validarla contra la clave pública guardada.
- Manejar casos de error y bloqueo tras múltiples fallos.
Paso 5. Integrar frontend con Web Authentication API
Aquí usas funciones nativas del navegador:
// En componente React o página Next.js
async function onRegister() {
const opts = await fetch(‘/api/register-options’).then(r => r.json())
const credential = await navigator.credentials.create({ publicKey: opts })
const verification = await fetch(‘/api/register’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({ attestation: credential }),
}).then(r => r.json())
if (verification.verified) {
alert(‘Passkey registrada correctamente’)
} else {
alert(‘Error en el registro de passkey’)
}
}
Paso 6. Controlar compatibilidad y errores
Durante el desarrollo aseguré detección anticipada de soporte:
if (!window.PublicKeyCredential) {
alert(‘Tu navegador no soporta passkeys. Usa Chrome, Firefox o Safari actualizado.’)
// Puedes ofrecer login por contraseña como fallback
}
Paso 7. Pruebas en dispositivos reales
Probamos que funcione en iOS Safari 16+, Chrome en Android, y Edge en Windows 11. Validé que tanto registro como login fueran ágiles y sin errores visibles para usuario.
Consejos prácticos para proyectos reales
- Usa HTTPS siempre para las API routes.
- Considera la UX: muestra mensajes claros y botones amigables.
- Mantén actualizadas dependencias relacionadas con WebAuthn.
- Documenta para tu equipo y usuarios cómo funciona la nueva forma de autenticación.
- Ofrece opciones de recuperación (por ejemplo, segundo factor o soporte tradicional) para casos excepcionales.
Conclusión: pasa a la acción implementando passkeys en tu Next.js
Si quieres profundizar en estas tecnologías y estar preparado para liderar esta transformación, te invito a conocer el Bootcamp Desarrollo Web de KeepCoding.
Sin duda, la implementación de passkeys en webs con Next.js marca un antes y un después en la forma en que protegemos y ofrecemos acceso a nuestros usuarios. No solo eleva la seguridad a otro nivel, sino que transforma la experiencia, simplificando el login y eliminando una causa frecuente de frustración.
Empieza a dominar la autenticación sin contraseñas hoy y lleva tus proyectos Next.js a la vanguardia en seguridad y usabilidad.
Para profundizar, te recomiendo las siguientes documentaciones. Guía oficial WebAuthn – W3C y FIDO Alliance FIDO2 overview.
