Français

webauthn
passkey
mfa
nextjs

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

Un guide pratique pour mettre en œuvre WebAuthn dans Next.js avec des exemples de code en direct.

Sijie

Developer

11/15/2023

Arrêtez de perdre des semaines sur l'authentification des utilisateurs

Lancez des applications sécurisées plus rapidement avec Logto. Intégrez l'authentification des utilisateurs en quelques minutes et concentrez-vous sur votre produit principal.

Commencer

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.

Aperçu

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 :

Un projet Next.js : Si tu n'as pas encore configuré de projet Next.js, voici un guide rapide pour te lancer.
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
Stockage de session : Nous utiliserons le stockage de session pour gérer les challenges WebAuthn. Nous utiliserons KV de Vercel pour y parvenir.
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 :

generateWebAuthnRegistrationOptions
verifyWebAuthnRegistration

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

generateWebAuthnLoginOptions
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

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.
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.)
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 :

Essaie l'authentification multi-facteurs de Logto

Prérequis#

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

Configuration du stockage KV#

Implémenter les fonctions de gestion de session#

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

Préparation des fonctions WebAuthn#

Construire la page web#

Conclusion#

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

Prérequis#

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

Configuration du stockage KV#

Implémenter les fonctions de gestion de session#

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

Préparation des fonctions WebAuthn#

Construire la page web#

Conclusion#

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

Prérequis

Implémentation du stockage de session avec KV de Vercel

Configuration du stockage KV

Implémenter les fonctions de gestion de session

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

Préparation des fonctions WebAuthn

Construire la page web

Conclusion

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

Prérequis

Implémentation du stockage de session avec KV de Vercel

Configuration du stockage KV

Implémenter les fonctions de gestion de session

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

Préparation des fonctions WebAuthn

Construire la page web

Conclusion

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