Nederlands

webauthn
passkey
mfa
nextjs

WebAuthn implementeren in Next.js: Een praktische gids

Een praktische gids voor het implementeren van WebAuthn in Next.js met live codevoorbeelden.

Sijie

Developer

11/15/2023

Stop met weken verspillen aan gebruikersauthenticatie

Lanceer veilige apps sneller met Logto. Integreer gebruikersauthenticatie in minuten en focus op je kernproduct.

Aan de slag

Welkom terug bij onze WebAuthn-serie. In onze vorige artikelen hebben we de basis van WebAuthn en een 101-gids behandeld. Als je net instapt, voel je vrij om deze fundamentele stukken te bekijken om bij te lezen.

Vandaag stropen we onze mouwen op om de theorie in praktijk te brengen. We benutten de kracht van Next.js met de nieuwe functie "Server Actions". Ons doel? Om WebAuthn te implementeren in een Next.js-applicatie en onszelf voor te bereiden op WebAuthn.

Voordat we de codezee induiken, hier is een glimp van wat je te wachten staat aan het einde van de reis - een volledig functionele demo website. Verken het om WebAuthn in actie te zien en om een voorproefje te krijgen van wat je gaat bouwen. In deze demo website kun je nieuwe gebruikers registreren en inloggen met de pas geregistreerde passkeys.

Preview

En voor degenen die liever een kaart in de hand hebben, hebben we je gedekt! Alle code die we zullen bespreken is beschikbaar in een publieke GitHub-repository. Deze repository is je begeleidende gids en biedt de volledige broncode van onze implementatie.

Klaar om aan dit spannende avontuur te beginnen? Laten we beginnen!

Vereisten

Voordat we beginnen, laten we ervoor zorgen dat we alles hebben wat we nodig hebben:

Een Next.js-project: Als je nog geen Next.js-project hebt opgezet, hier is een snelle gids om je op weg te helpen.
Eenvoudige WebAuthn-bibliotheek: Verschillende pakketten om de hoeveelheid werk die nodig is om WebAuthn in een website op te nemen te verminderen. Gebruik je favoriete pakketmanager om @simplewebauthn/browser, @simplewebauthn/server en @simplewebauthn/typescript-types te installeren.
Sessiebestandopslag: We gebruiken sessieopslag om WebAuthn-uitdagingen te beheren. We zullen Vercels KV gebruiken om dit te bereiken.
Een gebruikersdatabase: Een plek om de geregistreerde passkeys van onze gebruikers op te slaan. Om het eenvoudig te houden, gebruiken we ook Vercels KV om dit te demonstreren.

Nu, met onze gereedschappen en materialen bij de hand, zijn we klaar om te gaan bouwen.

Sessiebestandopslag implementeren met Vercels KV

KV-opslag instellen

Het is eenvoudig om een KV-opslag zowel in productie als lokale ontwikkeling te initialiseren, volg deze handleiding om een KV-opslag aan je project te koppelen en de omgevingswaarden te halen: https://vercel.com/docs/storage/vercel-kv/quickstart

Sessiebeheerfuncties implementeren

We exporteerden 2 functies:

getCurrentSession: Gebruik de cookie-helper van Next.js om een sessie te maken voor het huidige verzoek en geef de waarde terug.
updateCurrentSession: Data opslaan in de huidige sessie.

Gebruikersdatabase implementeren met Vercels KV

Net als bij onze sessie-implementatie, laten we een eenvoudige gebruikersdatabase implementeren.

We hebben functies gecreëerd om een gebruiker op te zoeken via e-mail en om gebruikersgegevens via e-mail bij te werken. Onthoud dat dit alleen voor demonstratie is, in een echt product worden de gebruikersgegevens meestal in een database bewaard.

WebAuthn-functies voorbereiden

Voordat we verdergaan, laten we het diagram van de registratie- en authenticatiestroom bekijken:

Zoals je kunt zien, moeten we 2 functies voorbereiden:

generateWebAuthnRegistrationOptions
verifyWebAuthnRegistration

Net als bij registratie vereist het inloggen 2 functies:

generateWebAuthnLoginOptions
verifyWebAuthnLogin

Hier is de code:

Bouw de webpagina

We hebben de voorbereiding voltooid, laten we de pagina bouwen:

Conclusie

Gefeliciteerd met het navigeren door de complexiteiten van het implementeren van WebAuthn in een Next.js-applicatie. Terwijl we afronden, is het belangrijk om enkele cruciale overwegingen aan te pakken voor het implementeren in een productieomgeving.

Belangrijke overwegingen voor productiedistributie

Aanpassing van gebruikers-ID: In deze tutorial hebben we een e-mailadres gebruikt als de gebruikers-ID. In een productiescenario moet je mogelijk een andere ID gebruiken, zoals een userId of username.
Database-integratie: Terwijl we Vercels KV gebruikten als een eenvoudige demonstratie van sessie- en gebruikersdatabeheer, zou een echte applicatie een robuuster databasesysteem moeten integreren (zoals PostgreSQL, MongoDB, etc.)
Aankleding van WebAuthn-opties: De WebAuthn-opties die we hebben verkend, zijn een startpunt. Afhankelijk van de vereisten van je applicatie en beveiligingsbeleid, moet je mogelijk deze instellingen aanpassen. Raadpleeg de WebAuthn-documentatie en de documentatie van de Simple WebAuthn-bibliotheek voor begeleiding over het aanpassen van deze opties aan je specifieke behoeften.

Bedankt dat je met ons mee bent gegaan op dit educatieve avontuur. Zelfs in dit minimale voorbeeld is het integreren van WebAuthn geen eenvoudige taak, er is een andere optie, probeer WebAuthn in Logto’s MFA:

Probeer Logto multi-factor authenticatie

Vereisten#

Sessiebestandopslag implementeren met Vercels KV#

KV-opslag instellen#

Sessiebeheerfuncties implementeren#

Gebruikersdatabase implementeren met Vercels KV#

WebAuthn-functies voorbereiden#

Bouw de webpagina#

Conclusie#

Belangrijke overwegingen voor productiedistributie#

Vereisten#

Sessiebestandopslag implementeren met Vercels KV#

KV-opslag instellen#

Sessiebeheerfuncties implementeren#

Gebruikersdatabase implementeren met Vercels KV#

WebAuthn-functies voorbereiden#

Bouw de webpagina#

Conclusie#

Belangrijke overwegingen voor productiedistributie#

Vereisten

Sessiebestandopslag implementeren met Vercels KV

KV-opslag instellen

Sessiebeheerfuncties implementeren

Gebruikersdatabase implementeren met Vercels KV

WebAuthn-functies voorbereiden

Bouw de webpagina

Conclusie

Belangrijke overwegingen voor productiedistributie

Vereisten

Sessiebestandopslag implementeren met Vercels KV

KV-opslag instellen

Sessiebeheerfuncties implementeren

Gebruikersdatabase implementeren met Vercels KV

WebAuthn-functies voorbereiden

Bouw de webpagina

Conclusie

Belangrijke overwegingen voor productiedistributie