Mettre en œuvre WebAuthn dans Next.js : Un guide pratique

Bienvenue à nouveau dans notre série WebAuthn. Dans nos articles précédents, nous avons couvert les bases de WebAuthn et un guide 101. Si tu nous rejoins juste, n'hésite pas à consulter ces articles de base pour te mettre à niveau.

Aujourd'hui, nous retroussons nos manches pour mettre la théorie en pratique. Nous allons exploiter la puissance de Next.js avec la nouvelle fonctionnalité "Server Actions". Notre objectif ? Mettre en œuvre WebAuthn dans une application Next.js et nous préparer pour WebAuthn.

Avant de plonger dans le codage, voici un aperçu de ce qui t'attend à la fin du voyage - un site de démonstration entièrement fonctionnel. Explore-le pour voir WebAuthn en action et avoir un avant-goût de ce que tu vas construire. Dans ce site de démonstration, tu peux enregistrer de nouveaux utilisateurs et te connecter avec les passkeys juste enregistrées.

Et pour ceux qui préfèrent une carte en main, nous avons ce qu'il te faut ! Tout le code que nous allons discuter est disponible dans un dépôt GitHub public. Ce dépôt est ton guide compagnon, offrant le code source complet de notre mise en œuvre.

Prêt pour cette aventure passionnante ? Allons-y !

Prérequis#

Avant de commencer, assurons-nous d'avoir tout ce dont nous avons besoin :

1. Un projet Next.js : Si tu n'as pas encore configuré de projet Next.js, voici un guide rapide pour te lancer.
2. Bibliothèque Simple WebAuthn : Plusieurs packages pour aider à réduire la quantité de travail nécessaire pour incorporer WebAuthn dans un site Web. Utilise ton gestionnaire de packages préféré pour installer @simplewebauthn/browser, @simplewebauthn/server et @simplewebauthn/typescript-types
3. Stockage de session : Nous utiliserons le stockage de session pour gérer les challenges WebAuthn. Nous utiliserons KV de Vercel pour y parvenir.
4. Une base de données utilisateurs : Un endroit pour stocker les passkeys enregistrés de nos utilisateurs. Pour simplifier, nous utiliserons également le KV de Vercel pour la démonstration.

Maintenant, avec nos outils et matériaux à portée de main, nous sommes prêts à commencer à construire.

Implémentation du stockage de session avec KV de Vercel#

Configuration du stockage KV#

Il est facile d'initialiser un stockage KV à la fois en production et en développement local, suis ce guide pour connecter un magasin KV à ton projet et extraire les valeurs d'environnement : https://vercel.com/docs/storage/vercel-kv/quickstart

Implémenter les fonctions de gestion de session#

Nous avons exporté 2 fonctions :

• getCurrentSession: Utilise l'assistant de cookies Next.js pour créer une session pour la requête actuelle et retourner la valeur.
• updateCurrentSession: Enregistre les données dans la session actuelle.

Implémentation de la base de données utilisateurs avec KV de Vercel#

Similairement à notre implémentation de session, implémentons une base de données utilisateurs simple.

Nous avons créé des fonctions pour trouver un utilisateur par e-mail et mettre à jour les données utilisateur par e-mail. Souviens-toi, c'est uniquement à des fins de démonstration, dans le produit réel, les données utilisateurs sont généralement conservées dans une base de données.

Préparation des fonctions WebAuthn#

Avant de continuer, voyons le diagramme du flux d'enregistrement et d'authentification :

Comme tu peux le voir, nous devons préparer 2 fonctions :

1. generateWebAuthnRegistrationOptions
2. verifyWebAuthnRegistration

De même que pour l'enregistrement, la connexion nécessite 2 fonctions :

1. generateWebAuthnLoginOptions
2. verifyWebAuthnLogin

Voici le code :

Construire la page web#

Nous avons terminé la préparation, construisons la page :

Conclusion#

Félicitations pour avoir navigué à travers les complexités de la mise en œuvre de WebAuthn dans une application Next.js. Alors que nous terminons, il est important d'aborder quelques considérations cruciales pour le déploiement en production.

Considérations clés pour le déploiement en production#

1. Ajustement de l'identifiant utilisateur : Dans ce tutoriel, nous avons utilisé une adresse e-mail comme identifiant utilisateur. Cependant, dans un scénario de production, tu pourrais avoir besoin d'utiliser un identifiant différent, tel qu'un userId ou username.
2. Intégration de la base de données : Bien que nous ayons utilisé le KV de Vercel en tant que démonstration simple de gestion des sessions et des données utilisateurs, une application réelle devrait intégrer un système de base de données plus robuste (comme PostgreSQL, MongoDB, etc.)
3. Personnalisation des options WebAuthn : Les options WebAuthn que nous avons explorées sont un point de départ. Selon les besoins de ton application et ses politiques de sécurité, tu pourrais avoir besoin de régler ces paramètres. Consulte la documentation WebAuthn et la documentation de la bibliothèque Simple WebAuthn pour obtenir des conseils sur la personnalisation de ces options selon tes besoins spécifiques.

Merci de nous avoir rejoints pour cette aventure éducative. Même dans cet exemple minimal, intégrer WebAuthn n'est pas une tâche simple, il existe une autre option, essaie WebAuthn dans la MFA de Logto :