¿Te has preguntado cuántos usuarios pierdes en tu plataforma simplemente porque olvidaron su contraseña? En pleno 2026, depender de combinaciones alfanuméricas complejas no solo es arcaico, sino un riesgo de seguridad crítico que el estándar FIDO2 ha venido a solucionar de forma definitiva.
Las Passkeys (llaves de acceso) han pasado de ser una curiosidad técnica a una exigencia del mercado. Gigantes como Google, Apple y Microsoft ya las han estandarizado, y hoy te enseñaré cómo integrarlas en el stack más potente del momento: Next.js 15+ y Supabase Auth.
En esta guía técnica, vamos a configurar un flujo de autenticación passwordless real. Olvídate de los proveedores de terceros costosos; usaremos la infraestructura nativa de Supabase para gestionar credenciales biométricas de forma gratuita y escalable.
Fundamentos: ¿Por qué Passkeys en 2026?
El panorama de la ciberseguridad ha cambiado drásticamente. El phishing basado en IA es ahora capaz de interceptar códigos OTP (One-Time Password) en tiempo real, lo que hace que el 2FA tradicional sea vulnerable.
Las Passkeys utilizan criptografía de clave pública. El servidor nunca conoce tu clave privada; solo almacena una clave pública que no sirve de nada si es filtrada en una brecha de datos masiva.
- Resistencia al Phishing: La credencial está vinculada al dominio específico (origin-bound).
- Experiencia de Usuario: Un simple escaneo de huella o FaceID sustituye a 15 caracteres aleatorios.
- Sincronización Cloud: Gracias a iCloud Keychain y Google Password Manager, la llave te sigue en todos tus dispositivos.
Diferencias técnicas clave
Es vital entender que una Passkey puede ser sinclonable (en un hardware físico como YubiKey) o sincronizada (en el ecosistema del SO). Para la mayoría de apps SaaS, la segunda opción es la preferida por su baja fricción.
Configuración del Dashboard de Supabase
Antes de escribir una sola línea de código en TypeScript, debemos preparar nuestro backend. Supabase ha actualizado sus servicios de Auth para soportar WebAuthn de forma nativa.
- Accede a tu proyecto en Supabase Cloud y ve a Authentication > Providers.
- Busca la sección de WebAuthn (Passkeys) y actívala.
- Configura el RP ID (Relying Party ID). En desarrollo será
localhost, pero en producción debe ser tu dominio exacto comoandrofan.com. - Define el RP Name, que es el nombre que el usuario verá en el prompt de su sistema operativo al autenticarse.
Para este tutorial, asumiremos que estás usando el App Router de Next.js. Asegúrate de tener instalada la última versión del SDK: @supabase/auth-helpers-nextjs o el nuevo @supabase/ssr.
| Parámetro | Valor Recomendado | Impacto en Seguridad |
|---|---|---|
| User Verification | Required | Alta: Fuerza el uso de biometría/PIN |
| Attestation | None | Media: Facilita la compatibilidad de dispositivos |
| Resident Key | Required | Alta: Permite login sin introducir el email |
Implementación del Registro WebAuthn en Next.js
El registro de una Passkey requiere dos pasos: obtener el desafío (challenge) del servidor y resolverlo en el cliente usando la WebAuthn API del navegador.
Utilizaremos la librería @simplewebauthn/browser para simplificar el manejo de los objetos ArrayBuffer, que suelen ser el mayor dolor de cabeza para los desarrolladores.
El código del registro
Primero, instalamos la utilidad: npm install @simplewebauthn/browser. Luego, creamos una función en nuestro componente de React:
const handleRegisterPasskey = async () => {
const { data, error } = await supabase.auth.reauthenticate();
// Lógica para llamar a startRegistration de SimpleWebAuthn
};
Es fundamental que el usuario ya tenga una sesión activa o una identidad verificada antes de registrar una Passkey. En 2026, la tendencia es ofrecer el registro de la llave justo después del primer login con Magic Link.
Flujo de Login y Gestión de Errores Comunes
El login con Passkeys en Next.js es donde ocurre la magia. Gracias a los Conditional UI, el navegador puede sugerir la Passkey automáticamente cuando el usuario hace clic en el campo de email.
Para implementar esto, debes añadir el atributo autocomplete="username webauthn" a tu input de texto. Esto invoca el gestor de contraseñas nativo del sistema operativo de forma inmediata.
- Llamamos a
supabase.auth.signInWithPasskey(). - El SDK de Supabase gestiona internamente el desafío WebAuthn.
- Si la validación biométrica es correcta, se emite un JWT (JSON Web Token) válido.
- Redirigimos al usuario usando
router.push('/dashboard').
Solución de problemas frecuentes
- NotAllowedError: El usuario canceló el prompt o el dominio no coincide con el RP ID.
- SecurityError: Estás intentando usar WebAuthn en un entorno no seguro (sin HTTPS). Locahost es la única excepción permitida.
- Device Incompatibility: Aunque raro en 2026, algunos navegadores en modo incógnito bloquean el acceso a la API WebAuthn.
Ventajas y Desventajas
✅ Ventajas
- Eliminación total del riesgo de robo de contraseñas.
- Fricción casi nula: el login toma menos de 2 segundos.
- Reducción de costes en servicios de envío de SMS/Email OTP.
❌ Desventajas
- Curva de aprendizaje inicial para desarrolladores Junior.
- Dificultad de recuperación si el usuario pierde acceso a su cuenta de Cloud (iCloud/Google).
Preguntas Frecuentes
¿Qué pasa si el usuario pierde su dispositivo?
Si la Passkey está sincronizada (Google/Apple), aparecerá automáticamente en su nuevo dispositivo. Si no, es vital tener un método de recuperación secundario como Recovery Codes o un email verificado.
¿Es Supabase Auth gratuito para Passkeys?
Sí, Supabase incluye el soporte de WebAuthn en su capa gratuita (Free Tier) para hasta 50,000 usuarios activos mensuales, lo cual es una ventaja competitiva enorme frente a Auth0 o Clerk.
¿Funciona en navegadores antiguos?
En 2026, la compatibilidad es del 99% en dispositivos móviles y de escritorio modernos. Para versiones legacy, siempre debes mantener un fallback (como login por email).
Conclusión
- Las Passkeys son el estándar de oro de la industria para la seguridad passwordless.
- Supabase facilita la implementación eliminando la complejidad del manejo de buffers y desafíos criptográficos.
- La combinación con Next.js permite una UI fluida y optimizada para el SEO y la conversión.
¿Estás listo para dar el salto y eliminar las contraseñas de tu proyecto? Si tienes dudas sobre la implementación en dispositivos Android específicos, déjanos un comentario abajo.
