"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "förutsättningar", "hProperties": { "id": "förutsättningar" } }, "depth": 2, "value": "Förutsättningar" }, { "data": { "id": "implementera-sessionslagring-med-vercels-kv", "hProperties": { "id": "implementera-sessionslagring-med-vercels-kv" } }, "depth": 2, "value": "Implementera sessionslagring med Vercels KV" }, { "data": { "id": "ställa-in-kv-lagring", "hProperties": { "id": "ställa-in-kv-lagring" } }, "depth": 3, "value": "Ställa in KV-lagring" }, { "data": { "id": "implementera-sessionshanteringsfunktioner", "hProperties": { "id": "implementera-sessionshanteringsfunktioner" } }, "depth": 3, "value": "Implementera sessionshanteringsfunktioner" }, { "data": { "id": "implementera-användardatabas-med-vercels-kv", "hProperties": { "id": "implementera-användardatabas-med-vercels-kv" } }, "depth": 2, "value": "Implementera användardatabas med Vercels KV" }, { "data": { "id": "förbereda-webauthn-funktioner", "hProperties": { "id": "förbereda-webauthn-funktioner" } }, "depth": 2, "value": "Förbereda WebAuthn-funktioner" }, { "data": { "id": "bygg-webbsidan", "hProperties": { "id": "bygg-webbsidan" } }, "depth": 2, "value": "Bygg webbsidan" }, { "data": { "id": "slutsats", "hProperties": { "id": "slutsats" } }, "depth": 2, "value": "Slutsats" }, { "data": { "id": "viktiga-överväganden-för-produktionssättning", "hProperties": { "id": "viktiga-överväganden-för-produktionssättning" } }, "depth": 3, "value": "Viktiga överväganden för produktionssättning" }]; const readingTime = { "minutes": 5, "words": 1552, "text": "5 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", img: "img", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["Välkommen tillbaka till vår WebAuthn-serie. I våra tidigare artiklar har vi täckt ", _jsx(_components.a, { href: "https://blog.logto.io/webauthn-base-knowledge/", children: "WebAuthns grunder" }), " och en ", _jsx(_components.a, { href: "https://blog.logto.io/web-authn-and-passkey-101/", children: "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."] }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsxs(_components.p, { children: ["Innan vi dyker ner i kodningshavet, här är en glimt av vad som väntar dig i slutet av resan - en fullt fungerande ", _jsx(_components.a, { href: "https://nextjs-webauthn-alpha.vercel.app/", children: "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."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/preview_fe67ff2888.webp", alt: "Förhandsvisning" }) }), "\n", _jsxs(_components.p, { children: ["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 ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-webauthn", children: "GitHub-repository" }), ". Detta repository är din följeslagare, och erbjuder hela källkoden för vår implementation."] }), "\n", _jsx(_components.p, { children: "Redo att ge dig ut på detta spännande äventyr? Låt oss börja!" }), "\n", _jsxs(_components.h2, { id: "förutsättningar", children: ["Förutsättningar", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#förutsättningar", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Innan vi börjar, låt oss säkerställa att vi har allt vi behöver:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Ett Next.js-projekt" }), ": Om du inte har satt upp ett Next.js-projekt ännu, här är en ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "snabb guide" }), " för att komma igång."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.a, { href: "https://github.com/MasterKale/SimpleWebAuthn", children: "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 ", _jsx(_components.code, { children: "@simplewebauthn/browser" }), ", ", _jsx(_components.code, { children: "@simplewebauthn/server" }), " och ", _jsx(_components.code, { children: "@simplewebauthn/typescript-types" }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Sessionlagring" }), ": Vi kommer att använda sessionslagring för att hantera WebAuthn-utmaningar. Vi kommer att använda ", _jsx(_components.a, { href: "https://vercel.com/docs/storage/vercel-kv", children: "vercels KV" }), " för att uppnå detta."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "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."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Nu, med våra verktyg och material i handen, är vi redo att börja bygga." }), "\n", _jsxs(_components.h2, { id: "implementera-sessionslagring-med-vercels-kv", children: ["Implementera sessionslagring med Vercels KV", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementera-sessionslagring-med-vercels-kv", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "ställa-in-kv-lagring", children: ["Ställa in KV-lagring", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ställa-in-kv-lagring", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["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: ", _jsx(_components.a, { href: "https://vercel.com/docs/storage/vercel-kv/quickstart", children: "https://vercel.com/docs/storage/vercel-kv/quickstart" })] }), "\n", _jsxs(_components.h3, { id: "implementera-sessionshanteringsfunktioner", children: ["Implementera sessionshanteringsfunktioner", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementera-sessionshanteringsfunktioner", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { kv } from '@vercel/kv';\nimport { cookies } from 'next/headers';\n\nconst sessionPrefix = 'nextjs-webauthn-example-session-';\n\ntype SessionData = {\n currentChallenge?: string;\n email?: string;\n};\n\nconst getSession = async (id: string) => {\n return kv.get(`${sessionPrefix}${id}`);\n};\n\nconst createSession = async (id: string, data: SessionData) => {\n return kv.set(`${sessionPrefix}${id}`, JSON.stringify(data));\n};\n\nexport const getCurrentSession = async (): Promise<{\n sessionId: string;\n data: SessionData;\n}> => {\n const cookieStore = cookies();\n const sessionId = cookieStore.get('session-id');\n\n if (sessionId?.value) {\n const session = await getSession(sessionId.value);\n\n if (session) {\n return { sessionId: sessionId.value, data: session };\n }\n }\n\n const newSessionId = Math.random().toString(36).slice(2);\n const newSession = { currentChallenge: undefined };\n cookieStore.set('session-id', newSessionId);\n\n await createSession(newSessionId, newSession);\n\n return { sessionId: newSessionId, data: newSession };\n};\n\nexport const updateCurrentSession = async (data: SessionData): Promise => {\n const { sessionId, data: oldData } = await getCurrentSession();\n\n await createSession(sessionId, { ...oldData, ...data });\n};\n" }) }), "\n", _jsx(_components.p, { children: "Vi exporterade 2 funktioner:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "getCurrentSession" }), ": Använd Next.js cookiehelper för att skapa en session för nuvarande begäran, och returnera värdet."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "updateCurrentSession" }), ": Spara data till nuvarande session."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "implementera-användardatabas-med-vercels-kv", children: ["Implementera användardatabas med Vercels KV", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementera-användardatabas-med-vercels-kv", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "På samma sätt som vår sessionsimplementation, låt oss implementera en enkel användardatabas." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { AuthenticatorDevice } from '@simplewebauthn/typescript-types';\nimport { kv } from '@vercel/kv';\nimport { cookies } from 'next/headers';\n\nconst userPrefix = 'nextjs-webauthn-example-user-';\n\n// De ursprungliga typerna är \"Buffer\" som inte stöds av KV\nexport type UserDevice = Omit & {\n credentialID: string;\n credentialPublicKey: string;\n};\n\ntype User = {\n email: string;\n devices: UserDevice[];\n};\n\nexport const findUser = async (email: string): Promise => {\n const user = await kv.get(`${userPrefix}${email}`);\n\n return user;\n};\n\nexport const createUser = async (email: string, devices: UserDevice[]): Promise => {\n const user = await findUser(email);\n\n if (user) {\n throw new Error('User already exists');\n }\n\n await kv.set(`${userPrefix}${email}`, { email, devices });\n return { email, devices };\n};\n" }) }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsxs(_components.h2, { id: "förbereda-webauthn-funktioner", children: ["Förbereda WebAuthn-funktioner", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#förbereda-webauthn-funktioner", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Innan vi fortsätter, låt oss se diagrammet för registrerings- och autentiseringsflöde:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n\tparticipant User\n participant WebPage\n participant API Server\n\n User->>WebPage: Request register a new passkey\n WebPage->>API Server: Get registration options (generateWebAuthnRegistrationOptions)\n API Server->>WebPage: options\n WebPage->>WebPage: Call WebAuthn API\n WebPage->>User: Prompt to authenticate\n User->>WebPage: Perform auth\n WebPage->>API Server: Send WebAuthn API response\n API Server->>API Server: Verify and save (verifyWebAuthnRegistration)\n API Server->>WebPage: Return result\n WebPage->>User: ✅\n" }) }), "\n", _jsx(_components.p, { children: "Som du kan se, behöver vi förbereda 2 funktioner:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "generateWebAuthnRegistrationOptions" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "verifyWebAuthnRegistration" }) }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n\tparticipant User\n participant WebPage\n participant API Server\n\n User->>WebPage: Request login to an email\n WebPage->>API Server: Get authentication options (generateWebAuthnLoginOptions)\n API Server->>WebPage: options\n WebPage->>WebPage: Call WebAuthn API\n WebPage->>User: Prompt to authenticate\n User->>WebPage: Perform auth\n WebPage->>API Server: Send WebAuthn API response\n API Server->>API Server: Verify (verifyWebAuthnLogin)\n API Server->>WebPage: Return result\n WebPage->>User: ✅\n" }) }), "\n", _jsx(_components.p, { children: "På samma sätt som registreringen, kräver inloggningen 2 funktioner:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "generateWebAuthnLoginOptions" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "verifyWebAuthnLogin" }) }), "\n"] }), "\n", _jsx(_components.p, { children: "Här är koden:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use server';\n\nimport {\n GenerateAuthenticationOptionsOpts,\n GenerateRegistrationOptionsOpts,\n VerifyAuthenticationResponseOpts,\n VerifyRegistrationResponseOpts,\n generateAuthenticationOptions,\n generateRegistrationOptions,\n verifyAuthenticationResponse,\n verifyRegistrationResponse,\n} from '@simplewebauthn/server';\nimport { UserDevice, createUser, findUser, getCurrentSession, updateCurrentSession } from './user';\nimport { origin, rpId } from './constants';\nimport {\n AuthenticationResponseJSON,\n RegistrationResponseJSON,\n} from '@simplewebauthn/typescript-types';\nimport { isoBase64URL } from '@simplewebauthn/server/helpers';\n\nexport const generateWebAuthnRegistrationOptions = async (email: string) => {\n const user = await findUser(email);\n\n if (user) {\n return {\n success: false,\n message: 'User already exists',\n };\n }\n\n const opts: GenerateRegistrationOptionsOpts = {\n rpName: 'SimpleWebAuthn Example',\n rpID: rpId,\n userID: email,\n userName: email,\n timeout: 60000,\n attestationType: 'none',\n excludeCredentials: [],\n authenticatorSelection: {\n residentKey: 'discouraged',\n },\n /**\n * Support the two most common algorithms: ES256, and RS256\n */\n supportedAlgorithmIDs: [-7, -257],\n };\n\n const options = await generateRegistrationOptions(opts);\n\n await updateCurrentSession({ currentChallenge: options.challenge, email });\n\n return {\n success: true,\n data: options,\n };\n};\n\nexport const verifyWebAuthnRegistration = async (data: RegistrationResponseJSON) => {\n const {\n data: { email, currentChallenge },\n } = await getCurrentSession();\n\n if (!email || !currentChallenge) {\n return {\n success: false,\n message: 'Session expired',\n };\n }\n\n const expectedChallenge = currentChallenge;\n\n const opts: VerifyRegistrationResponseOpts = {\n response: data,\n expectedChallenge: `${expectedChallenge}`,\n expectedOrigin: origin,\n expectedRPID: rpId,\n requireUserVerification: false,\n };\n const verification = await verifyRegistrationResponse(opts);\n\n const { verified, registrationInfo } = verification;\n\n if (!verified || !registrationInfo) {\n return {\n success: false,\n message: 'Registration failed',\n };\n }\n\n const { credentialPublicKey, credentialID, counter } = registrationInfo;\n\n /**\n * Add the returned device to the user's list of devices\n */\n const newDevice: UserDevice = {\n credentialPublicKey: isoBase64URL.fromBuffer(credentialPublicKey),\n credentialID: isoBase64URL.fromBuffer(credentialID),\n counter,\n transports: data.response.transports,\n };\n\n await updateCurrentSession({});\n\n try {\n await createUser(email, [newDevice]);\n } catch {\n return {\n success: false,\n message: 'User already exists',\n };\n }\n\n return {\n success: true,\n };\n};\n\nexport const generateWebAuthnLoginOptions = async (email: string) => {\n const user = await findUser(email);\n\n if (!user) {\n return {\n success: false,\n message: 'User does not exist',\n };\n }\n\n const opts: GenerateAuthenticationOptionsOpts = {\n timeout: 60000,\n allowCredentials: user.devices.map((dev) => ({\n id: isoBase64URL.toBuffer(dev.credentialID),\n type: 'public-key',\n transports: dev.transports,\n })),\n userVerification: 'required',\n rpID: rpId,\n };\n const options = await generateAuthenticationOptions(opts);\n\n await updateCurrentSession({ currentChallenge: options.challenge, email });\n\n return {\n success: true,\n data: options,\n };\n};\n\nexport const verifyWebAuthnLogin = async (data: AuthenticationResponseJSON) => {\n const {\n data: { email, currentChallenge },\n } = await getCurrentSession();\n\n if (!email || !currentChallenge) {\n return {\n success: false,\n message: 'Session expired',\n };\n }\n\n const user = await findUser(email);\n\n if (!user) {\n return {\n success: false,\n message: 'User does not exist',\n };\n }\n\n const dbAuthenticator = user.devices.find((dev) => dev.credentialID === data.rawId);\n\n if (!dbAuthenticator) {\n return {\n success: false,\n message: 'Authenticator is not registered with this site',\n };\n }\n\n const opts: VerifyAuthenticationResponseOpts = {\n response: data,\n expectedChallenge: `${currentChallenge}`,\n expectedOrigin: origin,\n expectedRPID: rpId,\n authenticator: {\n ...dbAuthenticator,\n credentialID: isoBase64URL.toBuffer(dbAuthenticator.credentialID),\n credentialPublicKey: isoBase64URL.toBuffer(dbAuthenticator.credentialPublicKey),\n },\n requireUserVerification: true,\n };\n const verification = await verifyAuthenticationResponse(opts);\n\n await updateCurrentSession({});\n\n return {\n success: verification.verified,\n };\n};\n" }) }), "\n", _jsxs(_components.h2, { id: "bygg-webbsidan", children: ["Bygg webbsidan", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bygg-webbsidan", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Vi har slutfört förberedelsen, låt oss bygga sidan:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { startAuthentication, startRegistration } from '@simplewebauthn/browser';\nimport {\n generateWebAuthnLoginOptions,\n generateWebAuthnRegistrationOptions,\n verifyWebAuthnLogin,\n verifyWebAuthnRegistration,\n} from '@/libraries/webauthn';\nimport styles from './page.module.css';\n\nexport default function Home() {\n const handleSubmit = async (event: React.FormEvent) => {\n event.preventDefault();\n\n const formData = new FormData(event.currentTarget);\n const email = formData.get('email')?.toString();\n const type = formData.get('type')?.toString();\n\n if (!email) {\n return;\n }\n\n if (type === 'register') {\n const response = await generateWebAuthnRegistrationOptions(email);\n\n if (!response.success || !response.data) {\n alert(response.message ?? 'Something went wrong!');\n return;\n }\n\n const localResponse = await startRegistration(response.data);\n const verifyResponse = await verifyWebAuthnRegistration(localResponse);\n\n if (!verifyResponse.success) {\n alert(verifyResponse.message ?? 'Something went wrong!');\n return;\n }\n\n alert('Registration successful!');\n } else {\n const response = await generateWebAuthnLoginOptions(email);\n\n if (!response.success || !response.data) {\n alert(response.message ?? 'Something went wrong!');\n return;\n }\n\n const localResponse = await startAuthentication(response.data);\n const verifyResponse = await verifyWebAuthnLogin(localResponse);\n\n if (!verifyResponse.success) {\n alert(verifyResponse.message ?? 'Something went wrong!');\n return;\n }\n\n alert('Login successful!');\n }\n };\n\n return (\n

\n \n

\n );\n}\n" }) }), "\n", _jsxs(_components.h2, { id: "slutsats", children: ["Slutsats", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#slutsats", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "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ö." }), "\n", _jsxs(_components.h3, { id: "viktiga-överväganden-för-produktionssättning", children: ["Viktiga överväganden för produktionssättning", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#viktiga-överväganden-för-produktionssättning", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "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 ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "userId" }) }), " eller ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "användarnamn" }) }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "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.)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "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 ", _jsx(_components.a, { href: "https://www.w3.org/TR/webauthn/", children: "WebAuthn-dokumentationen" }), " och ", _jsx(_components.a, { href: "https://github.com/MasterKale/SimpleWebAuthn", children: "Simple WebAuthn-bibliotekets dokumentation" }), " för vägledning om hur du anpassar dessa alternativ för att passa dina specifika behov."] }), "\n"] }), "\n", _jsx(_components.p, { children: "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:" }), "\n", _jsx(LogtoCloudButton, { children: "Prova Logtos multifaktorautentisering" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }