Implementera WebAuthn i Next.js: En praktisk guide

Välkommen tillbaka till vår WebAuthn-serie. I våra tidigare artiklar har vi täckt WebAuthns grunder och en 101-guide. Om du just har anslutit dig till oss, är du välkommen att kolla in dessa grundläggande delar för att komma ikapp.

Idag kavlar vi upp ärmarna för att omsätta teori till praktik. Vi kommer att använda kraften hos Next.js med den nya funktionen "Server Actions". Vårt mål? Att implementera WebAuthn i en Next.js-applikation och förbereda oss för WebAuthn.

Innan vi dyker ner i kodningshavet, här är en glimt av vad som väntar dig i slutet av resan - en fullt fungerande demosajt. Utforska den för att se WebAuthn i aktion och för att få en smak av vad du kommer att bygga. På denna demosajt kan du registrera nya användare och logga in med just registrerade passnycklar.

Och för dem som föredrar en karta i handen har vi dig täckt! All kod vi kommer att diskutera finns tillgänglig i ett offentligt GitHub-repository. Detta repository är din följeslagare, och erbjuder hela källkoden för vår implementation.

Redo att ge dig ut på detta spännande äventyr? Låt oss börja!

Förutsättningar#

Innan vi börjar, låt oss säkerställa att vi har allt vi behöver:

1. Ett Next.js-projekt: Om du inte har satt upp ett Next.js-projekt ännu, här är en snabb guide för att komma igång.
2. Simple WebAuthn-biblioteket: Flera paket för att minska mängden arbete som behövs för att integrera WebAuthn på en webbplats. Använd din favoritpakethanterare för att installera @simplewebauthn/browser, @simplewebauthn/server och @simplewebauthn/typescript-types.
3. Sessionlagring: Vi kommer att använda sessionslagring för att hantera WebAuthn-utmaningar. Vi kommer att använda vercels KV för att uppnå detta.
4. En användardatabas: En plats för att lagra våra användares registrerade passnycklar. För att hålla det enkelt, kommer vi även här att använda vercels KV för att demonstrera.

Nu, med våra verktyg och material i handen, är vi redo att börja bygga.

Implementera sessionslagring med Vercels KV#

Ställa in KV-lagring#

Det är enkelt att initiera en KV-lagring både i produktion och lokal utveckling, följ denna guide för att ansluta en KV-butik till ditt projekt och dra miljövärden: https://vercel.com/docs/storage/vercel-kv/quickstart

Implementera sessionshanteringsfunktioner#

Vi exporterade 2 funktioner:

• getCurrentSession: Använd Next.js cookiehelper för att skapa en session för nuvarande begäran, och returnera värdet.
• updateCurrentSession: Spara data till nuvarande session.

Implementera användardatabas med Vercels KV#

På samma sätt som vår sessionsimplementation, låt oss implementera en enkel användardatabas.

Vi skapade funktioner för att hitta användare via e-post och uppdatera användardata via e-post. Kom ihåg, detta är endast för demonstration, i verkliga produkter hålls användardata vanligtvis i en databas.

Förbereda WebAuthn-funktioner#

Innan vi fortsätter, låt oss se diagrammet för registrerings- och autentiseringsflöde:

Som du kan se, behöver vi förbereda 2 funktioner:

1. generateWebAuthnRegistrationOptions
2. verifyWebAuthnRegistration

På samma sätt som registreringen, kräver inloggningen 2 funktioner:

1. generateWebAuthnLoginOptions
2. verifyWebAuthnLogin

Här är koden:

Bygg webbsidan#

Vi har slutfört förberedelsen, låt oss bygga sidan:

Slutsats#

Grattis till att ha navigerat genom invecklingarna med att implementera WebAuthn i en Next.js-applikation. När vi avslutar är det viktigt att ta itu med några viktiga överväganden för att distribuera det i en produktionsmiljö.

Viktiga överväganden för produktionssättning#

1. Justering av användaridentifierare: I denna handledning använde vi en e-postadress som användaridentifierare. I en produktionssituation kan du dock behöva använda en annan identifierare, som ett userId eller användarnamn.
2. Databasintegration: Även om vi använde Vercels KV som en enkel demonstration av session- och användardatahantering, bör en verklig applikation integrera ett mer robust databassystem (som PostgreSQL, MongoDB, etc.)
3. Anpassning av WebAuthn-alternativ: De WebAuthn-alternativ vi undersökte är en startpunkt. Beroende på din applikations krav och säkerhetspolicy kan du behöva justera dessa inställningar. Konsultera WebAuthn-dokumentationen och Simple WebAuthn-bibliotekets dokumentation för vägledning om hur du anpassar dessa alternativ för att passa dina specifika behov.

Tack för att du följde med oss på detta utbildningsäventyr. Även i detta minimala exempel är det inte en enkel uppgift att integrera WebAuthn, det finns ett annat alternativ, prova WebAuthn i Logtos MFA: