WebAuthn implementeren in Next.js: Een praktische gids

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.

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:

1. Een Next.js-project: Als je nog geen Next.js-project hebt opgezet, hier is een snelle gids om je op weg te helpen.
2. 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.
3. Sessiebestandopslag: We gebruiken sessieopslag om WebAuthn-uitdagingen te beheren. We zullen Vercels KV gebruiken om dit te bereiken.
4. 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:

1. generateWebAuthnRegistrationOptions
2. verifyWebAuthnRegistration

Net als bij registratie vereist het inloggen 2 functies:

1. generateWebAuthnLoginOptions
2. 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#

1. 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.
2. 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.)
3. 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: