"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "vereisten", "hProperties": { "id": "vereisten" } }, "depth": 2, "value": "Vereisten" }, { "data": { "id": "sessiebestandopslag-implementeren-met-vercels-kv", "hProperties": { "id": "sessiebestandopslag-implementeren-met-vercels-kv" } }, "depth": 2, "value": "Sessiebestandopslag implementeren met Vercels KV" }, { "data": { "id": "kv-opslag-instellen", "hProperties": { "id": "kv-opslag-instellen" } }, "depth": 3, "value": "KV-opslag instellen" }, { "data": { "id": "sessiebeheerfuncties-implementeren", "hProperties": { "id": "sessiebeheerfuncties-implementeren" } }, "depth": 3, "value": "Sessiebeheerfuncties implementeren" }, { "data": { "id": "gebruikersdatabase-implementeren-met-vercels-kv", "hProperties": { "id": "gebruikersdatabase-implementeren-met-vercels-kv" } }, "depth": 2, "value": "Gebruikersdatabase implementeren met Vercels KV" }, { "data": { "id": "webauthn-functies-voorbereiden", "hProperties": { "id": "webauthn-functies-voorbereiden" } }, "depth": 2, "value": "WebAuthn-functies voorbereiden" }, { "data": { "id": "bouw-de-webpagina", "hProperties": { "id": "bouw-de-webpagina" } }, "depth": 2, "value": "Bouw de webpagina" }, { "data": { "id": "conclusie", "hProperties": { "id": "conclusie" } }, "depth": 2, "value": "Conclusie" }, { "data": { "id": "belangrijke-overwegingen-voor-productiedistributie", "hProperties": { "id": "belangrijke-overwegingen-voor-productiedistributie" } }, "depth": 3, "value": "Belangrijke overwegingen voor productiedistributie" }]; const readingTime = { "minutes": 5, "words": 1616, "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: ["Welkom terug bij onze WebAuthn-serie. In onze vorige artikelen hebben we ", _jsx(_components.a, { href: "https://blog.logto.io/webauthn-base-knowledge/", children: "de basis van WebAuthn" }), " en een ", _jsx(_components.a, { href: "https://blog.logto.io/web-authn-and-passkey-101/", children: "101-gids" }), " behandeld. Als je net instapt, voel je vrij om deze fundamentele stukken te bekijken om bij te lezen."] }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsxs(_components.p, { children: ["Voordat we de codezee induiken, hier is een glimp van wat je te wachten staat aan het einde van de reis - een volledig functionele ", _jsx(_components.a, { href: "https://nextjs-webauthn-alpha.vercel.app/", children: "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."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/preview_fe67ff2888.webp", alt: "Preview" }) }), "\n", _jsxs(_components.p, { children: ["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 ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-webauthn", children: "GitHub-repository" }), ". Deze repository is je begeleidende gids en biedt de volledige broncode van onze implementatie."] }), "\n", _jsx(_components.p, { children: "Klaar om aan dit spannende avontuur te beginnen? Laten we beginnen!" }), "\n", _jsxs(_components.h2, { id: "vereisten", children: ["Vereisten", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vereisten", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Voordat we beginnen, laten we ervoor zorgen dat we alles hebben wat we nodig hebben:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Een Next.js-project" }), ": Als je nog geen Next.js-project hebt opgezet, hier is een ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "snelle gids" }), " om je op weg te helpen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.a, { href: "https://github.com/MasterKale/SimpleWebAuthn", children: "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 ", _jsx(_components.code, { children: "@simplewebauthn/browser" }), ", ", _jsx(_components.code, { children: "@simplewebauthn/server" }), " en ", _jsx(_components.code, { children: "@simplewebauthn/typescript-types" }), " te installeren."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Sessiebestandopslag" }), ": We gebruiken sessieopslag om WebAuthn-uitdagingen te beheren. We zullen ", _jsx(_components.a, { href: "https://vercel.com/docs/storage/vercel-kv", children: "Vercels KV" }), " gebruiken om dit te bereiken."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "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."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Nu, met onze gereedschappen en materialen bij de hand, zijn we klaar om te gaan bouwen." }), "\n", _jsxs(_components.h2, { id: "sessiebestandopslag-implementeren-met-vercels-kv", children: ["Sessiebestandopslag implementeren met Vercels KV", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sessiebestandopslag-implementeren-met-vercels-kv", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "kv-opslag-instellen", children: ["KV-opslag instellen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kv-opslag-instellen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["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: ", _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: "sessiebeheerfuncties-implementeren", children: ["Sessiebeheerfuncties implementeren", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sessiebeheerfuncties-implementeren", 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: "We exporteerden 2 functies:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "getCurrentSession" }), ": Gebruik de cookie-helper van Next.js om een sessie te maken voor het huidige verzoek en geef de waarde terug."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "updateCurrentSession" }), ": Data opslaan in de huidige sessie."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "gebruikersdatabase-implementeren-met-vercels-kv", children: ["Gebruikersdatabase implementeren met Vercels KV", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#gebruikersdatabase-implementeren-met-vercels-kv", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Net als bij onze sessie-implementatie, laten we een eenvoudige gebruikersdatabase implementeren." }), "\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 oorspronkelijke typen zijn \"Buffer\" wat niet wordt ondersteund door 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('Gebruiker bestaat al');\n }\n\n await kv.set(`${userPrefix}${email}`, { email, devices });\n return { email, devices };\n};\n" }) }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsxs(_components.h2, { id: "webauthn-functies-voorbereiden", children: ["WebAuthn-functies voorbereiden", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#webauthn-functies-voorbereiden", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Voordat we verdergaan, laten we het diagram van de registratie- en authenticatiestroom bekijken:" }), "\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: Vraag om een nieuwe passkey te registreren\n WebPage->>API Server: Verkrijg registratieopties (generateWebAuthnRegistrationOptions)\n API Server->>WebPage: opties\n WebPage->>WebPage: Roep de WebAuthn-API aan\n WebPage->>User: Vraag om authenticatie\n User->>WebPage: Voer auth uit\n WebPage->>API Server: Stuur WebAuthn API-reactie\n API Server->>API Server: Verifieer en sla op (verifyWebAuthnRegistration)\n API Server->>WebPage: Returnresultaat\n WebPage->>User: ✅\n" }) }), "\n", _jsx(_components.p, { children: "Zoals je kunt zien, moeten we 2 functies voorbereiden:" }), "\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: Vraag inloggen bij een e-mail\n WebPage->>API Server: Verkrijg authenticatieopties (generateWebAuthnLoginOptions)\n API Server->>WebPage: opties\n WebPage->>WebPage: Roep de WebAuthn-API aan\n WebPage->>User: Vraag om authenticatie\n User->>WebPage: Voer auth uit\n WebPage->>API Server: Stuur WebAuthn API-reactie\n API Server->>API Server: Verifieer (verifyWebAuthnLogin)\n API Server->>WebPage: Returnresultaat\n WebPage->>User: ✅\n" }) }), "\n", _jsx(_components.p, { children: "Net als bij registratie vereist het inloggen 2 functies:" }), "\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: "Hier is de code:" }), "\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: 'Gebruiker bestaat al',\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 * Ondersteun de twee meest voorkomende algoritmen: ES256 en 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: 'Sessie verlopen',\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: 'Registratie mislukt',\n };\n }\n\n const { credentialPublicKey, credentialID, counter } = registrationInfo;\n\n /**\n * Voeg het geretourneerde apparaat toe aan de lijst met apparaten van de gebruiker\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: 'Gebruiker bestaat al',\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: 'Gebruiker bestaat niet',\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: 'Sessie verlopen',\n };\n }\n\n const user = await findUser(email);\n\n if (!user) {\n return {\n success: false,\n message: 'Gebruiker bestaat niet',\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 niet geregistreerd op deze 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: "bouw-de-webpagina", children: ["Bouw de webpagina", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bouw-de-webpagina", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "We hebben de voorbereiding voltooid, laten we de pagina bouwen:" }), "\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 ?? 'Er is iets misgegaan!');\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 ?? 'Er is iets misgegaan!');\n return;\n }\n\n alert('Registratie succesvol!');\n } else {\n const response = await generateWebAuthnLoginOptions(email);\n\n if (!response.success || !response.data) {\n alert(response.message ?? 'Er is iets misgegaan!');\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 ?? 'Er is iets misgegaan!');\n return;\n }\n\n alert('Inloggen succesvol!');\n }\n };\n\n return (\n

\n \n

\n );\n}\n" }) }), "\n", _jsxs(_components.h2, { id: "conclusie", children: ["Conclusie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsxs(_components.h3, { id: "belangrijke-overwegingen-voor-productiedistributie", children: ["Belangrijke overwegingen voor productiedistributie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#belangrijke-overwegingen-voor-productiedistributie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "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 ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "userId" }) }), " of ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "username" }) }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "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.)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "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 ", _jsx(_components.a, { href: "https://www.w3.org/TR/webauthn/", children: "WebAuthn-documentatie" }), " en de ", _jsx(_components.a, { href: "https://github.com/MasterKale/SimpleWebAuthn", children: "documentatie van de Simple WebAuthn-bibliotheek" }), " voor begeleiding over het aanpassen van deze opties aan je specifieke behoeften."] }), "\n"] }), "\n", _jsx(_components.p, { children: "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:" }), "\n", _jsx(LogtoCloudButton, { children: "Probeer Logto multi-factor authenticatie" })] }); } 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."); }