Implementación de WebAuthn en Next.js: Una guía práctica

Bienvenido de nuevo a nuestra serie de WebAuthn. En nuestros artículos anteriores, hemos cubierto los conceptos básicos de WebAuthn y una guía 101. Si te unes a nosotros justo ahora, siéntete libre de revisar estos fundamentos para ponerte al día.

Hoy, vamos a arremangarnos para poner la teoría en práctica. Aprovecharemos el poder de Next.js con la nueva característica "Acciones del servidor". ¿Nuestro objetivo? Implementar WebAuthn en una aplicación Next.js y prepararnos para WebAuthn.

Antes de sumergirnos en el mar del código, aquí tienes un vistazo de lo que te espera al final del viaje: un sitio web de demostración completamente funcional. Explóralo para ver WebAuthn en acción y para probar lo que estarás construyendo. En este sitio de demostración, puedes registrar nuevos usuarios e iniciar sesión con las llaves de paso recién registradas.

Y para aquellos que prefieren un mapa en mano, ¡te tenemos cubierto! Todo el código del que hablaremos está disponible en un repositorio público de GitHub. Este repositorio es tu guía compañera, ofreciendo el código fuente completo de nuestra implementación.

¿Listo para embarcarte en esta emocionante aventura? ¡Comencemos!

Prerrequisitos#

Antes de comenzar, asegúrate de tener todo lo que necesitas:

1. Un proyecto de Next.js: Si aún no has configurado un proyecto de Next.js, aquí tienes una guía rápida para comenzar.
2. Biblioteca Simple WebAuthn: Varios paquetes para ayudar a reducir la cantidad de trabajo necesario para incorporar WebAuthn en un sitio web. Usa tu gestor de paquetes favorito para instalar @simplewebauthn/browser, @simplewebauthn/server y @simplewebauthn/typescript-types
3. Almacenamiento de sesión: Usaremos el almacenamiento de sesión para gestionar los desafíos de WebAuthn. Usaremos el KV de Vercel para lograr esto.
4. Una base de datos de usuarios: Un lugar para almacenar las llaves de paso registradas de nuestros usuarios. Para simplificar, también usaremos el KV de Vercel para demostrar.

Ahora, con nuestras herramientas y materiales a mano, estamos listos para comenzar a construir.

Implementación del almacenamiento de sesión con el KV de Vercel#

Configurando el almacenamiento KV#

Es fácil inicializar un almacenamiento KV tanto en producción como en desarrollo local, sigue esta guía para conectar una tienda KV a tu proyecto y obtener los valores del entorno: https://vercel.com/docs/storage/vercel-kv/quickstart

Implementar funciones de gestión de sesión#

Exportamos 2 funciones:

• getCurrentSession: Usa el asistente de cookies de Next.js para crear una sesión para la solicitud actual y devuelve el valor.
• updateCurrentSession: Guarda los datos en la sesión actual.

Implementación de la base de datos de usuarios con el KV de Vercel#

De manera similar a nuestra implementación de sesión, implementemos una simple base de datos de usuarios.

Creamos funciones para buscar usuarios por correo electrónico y actualizar los datos de los usuarios por correo electrónico. Recuerda, esto es solo para demostración, en el producto real, los datos de usuario generalmente se mantienen en una base de datos.

Preparando funciones de WebAuthn#

Antes de continuar, veamos el diagrama del flujo de registro y autenticación:

Como puedes ver, necesitamos preparar 2 funciones:

1. generateWebAuthnRegistrationOptions
2. verifyWebAuthnRegistration

Similar al registro, el inicio de sesión requiere 2 funciones:

1. generateWebAuthnLoginOptions
2. verifyWebAuthnLogin

Aquí está el código:

Construir la página web#

Hemos completado la preparación, construyamos la página:

Conclusión#

Felicitaciones por navegar a través de las complejidades de implementar WebAuthn en una aplicación Next.js. Al concluir, es importante abordar algunas consideraciones cruciales para desplegarlo en un entorno de producción.

Consideraciones clave para la implementación en producción#

1. Ajuste del identificador del usuario: En este tutorial, usamos una dirección de correo electrónico como identificador del usuario. Sin embargo, en un escenario de producción, puede que necesites usar un identificador diferente, como un userId o nombre de usuario.
2. Integración de base de datos: Aunque utilizamos el KV de Vercel como una simple demostración de gestión de datos de sesión y usuario, una aplicación del mundo real debería integrar un sistema de base de datos más robusto (como PostgreSQL, MongoDB, etc.)
3. Personalización de opciones de WebAuthn: Las opciones de WebAuthn que exploramos son un punto de partida. Dependiendo de los requisitos de tu aplicación y políticas de seguridad, es posible que necesites ajustar estas configuraciones. Consulta la documentación de WebAuthn y la documentación de la biblioteca Simple WebAuthn para obtener orientación sobre cómo personalizar estas opciones para satisfacer tus necesidades específicas.

Gracias por unirte a nosotros en esta aventura educativa. Incluso en este ejemplo mínimo, integrar WebAuthn no es una tarea simple, hay otra opción, prueba WebAuthn en el MFA de Logto: