Passkey Auth Boilerplate - En säker startpunkt för sajter

Användarnamn och lösenord är inte säkert, det räcker ofta med ett enda svagt eller kapat lösenord för att säkerheten ska fallera. Passkeys är betydligt säkrare eftersom de är passwordless och bygger på asymmetrisk kryptering._

Därför satte jag mig ner några regniga dagar under sommaren (det var inte många men dom fanns) och byggde en Passkey Auth Boilerplate för Nuxt 3. En säker och bra grund för att bygga moderna webbtjänster med passkey-autentisering.

Demo

Självklart finns en demo för den som vill testa. Den finns på passkey.stenbecklab.com. Registrera dig, logga in, testa fler enheter, ta bort Passkeys etc. Finns även på GitHub så klart.

Varför är detta relevant just nu?

Hotbilden mot webbtjänster är mer avancerad och mer automatiserad än någonsin:

• Lösenordsläckor sker varje dag - miljontals kontouppgifter finns redan ute och testas kontinuerligt av botnät.
• Phishing är sofistikerat - AI-genererade email-adresser och kloner av webbsidor är svåra att upptäcka.
• DDOS och Brute Force - överbelastningsattacker mm är vardag.
• Regelverk och kundkrav skärps - GDPR och NIS2 kräver bevis på rimliga tekniska och organisatoriska säkerhetsåtgärder.
• Zero-trust är normen - inga implicit säkra zoner, allt måste verifieras.

Vi kan även lägga till att ca 70% av alla intrång startar med social engineering. Passkeys skyddar mot mycket av detta och är inte en “framtidsteknik”, det bör nog snarare klassas som nuvarande best practice.

Utmaningen för många ligger i att de har dels en vana hur applikationer skall utvecklas och användas samt att en beteendeförändring behövs, vilket kan vara knepigt, trots att Passkeys är betydligt enklare att använda än användarnamn / lösenord. Detta gäller speciellt nu när våra browsers default stödjer lagring dvs man behöver inte nödvändigtvis en password-manager för detta.

Av vana och tron att användarvänligheten kräver omoderna sätt, behåller många vanliga användarnamn / lösenord och lägger till 2FA. Bättre, men inte lika bra som Passkeys och måste ses som ett temporärt mellansteg. Passkeys är just nu rätt väg att gå.

Eftersom det poppar upp nya applikationer hela tiden tänkte jag att en enklare boilerplate för att snabbt kunna starta ett projekt med bra autentsering kanske kan underlätta för någon, även mig själv. En boilerplate som redan från början implementerar dessa mekanismer gör att du slipper bygga om säkerhetsgrunden senare.

Full kontroll

Mitt fokus har länge varit att minimera beroendet av externa aktörer och ha full kontroll över infrastruktur och data.

Boilerplaten är därför byggd för egen drift och kontroll, där allt ligger i din miljö och du själv bestämmer vad som händer med data. Givetvis kan du välja hybrid eller moln efter behov, men nyckeln är att du har full kontroll över dina val, ingen kompromiss typ convinience vs security.

Varför Passkeys?

Passkeys ersätter lösenord helt genom att använda asymmetrisk kryptografi.

I stället för att användaren behöver komma ihåg ett lösenord som kan läcka, komprometteras eller återanvändas, lagras en privat nyckel säkert på användarens enhet.

• Ingen känslig data skickas vid inloggning - servern får bara en verifierad signatur.
• Oemottaglig för phishing - en passkey är knuten till din domän och fungerar inte på en falsk sida.
• Enkel inloggning - användaren godkänner med Face ID, Touch ID, PIN eller säkerhetsnyckel.

Resultatet är en mycket högre säkerhetsnivå än traditionell username/password-lösning (även om 2FA), samtidigt som det är enklare för användaren.

Så fungerar boilerplaten

En liten lista med basfunktionerna.

1. "Login with Passkey" Du loggar helt enkelt in med en Passkey och när du är inloggad hamnar man på en exempel-sida för inloggade (här kallad Dashboard).
2. "Register" Flöde för att registrera dig som användare. Inleds med att du anger namn och email. Validering sker och om allt är grönt skickas ett verifieringsmail.
3. "Verify your email" När du klickar på länken i mailet hamnar du på en verifierings-sida. Verifiering sker automatiskt när du klickar på länken i mailet, stämmer allt loggas du in direkt och du hamnar på Dashboard.
4. "Magic link fallback" Använder du en enhet du inte brukar använda eller helt enkelt tappat bort din passkey, så är det bara att logga in med magic link. Begär en magic link genom att fylla i din mail-adress. Länken gäller i 15min och när du klickar på den verifieras att allt är OK och sen loggas du in automatiskt.
5. "Manage and / or add new Passkeys" Går man till "settings" så ser du en lista på dina befintliga Passkeys. Du kan enkelt ta bort eller addera nya.

Enkelt och straight-forward. Inget lull-lull eller krusiduller, bara fortsätta att bygga din sajt, app eller projekt.

Teknik

1. Nuxt 3 på klientsidan - modern Vue-baserad frontend med Tailwind CSS.
2. Nuxt 3 / Nitro + MongoDB i backend - hanterar passkey-registrering, inloggning och sessioner.
3. Server-satt, säker cookie - håller användarens inloggningsstatus utan att exponera känsliga data i klienten.
4. Passkey som primär inloggning - med fallback till email-baserad magic link.

Du kan direkt bygga vidare på denna grund. Layout, API, databasstruktur och säkerhetslager är redan på plats.

Säkerhetskomponenterna – och varför de spelar roll

Boilerplaten är byggd med en helhetssyn på säkerhet:

• HTTP Security Headers - (CSP, HSTS, X-Frame-Options m.fl.) minimerar risk för XSS, clickjacking och andra attacker.
• Rate limiting - skyddar login-endpoints mot bruteforce och credential stuffing.
• Secure cookies - HttpOnly, Secure, SameSite=Strict och prefix __Host- för att maximera skydd mot stöld eller manipulering.
• Passkeys via WebAuthn - eliminerar lösenord, gör phishing betydligt svårare och blockerar återanvändning av inloggningsuppgifter.
• End-point-protection - både på klient och API
• Minimal attackyta - inga onödiga endpoints, inga klientexponerade hemligheter.

Varje del är där för att täppa till en konkret kategori av attacker som annars är vanliga mot webbtjänster.

GitHub, förbättringar välkomnas

Projektet finns tillgängligt på GitHub

Det finns säkert många förbättringar att göra och även många möjligheter till att bygga ut funktionalitet, eller för den delen porta till andra ramverk som React eller Svelte. Så alla förbättringar, buggrapporter och säkerhetsförslag är mycket välkomna.

Länk till Github repository: Passkey Boilerplate Auth Nuxt Boilerplate

Ju fler som granskar och bidrar, desto starkare och mer relevant blir lösningen.