Passwordless.ID /
Webauthn Playground
This is a playground for the webauthn wrapper library. Nothing here is sent to any server, everything runs locally.
Registration
If enabled, the device attestation and clientData will be provided as base64 encoded binary data. Not available on some platforms.
await client.register("{{registration.username}}", "{{registration.challenge}}", {{registration.options}})
{{registration.result ?? '...'}}
And on the server side, verifying the registration leads to:
await server.verifyRegistration(registration, {challenge: "{{registration.challenge}}", origin: "{{origin}}"})
Resulting into:
{{registration.parsed ?? '...'}}
At this point, you should store the `credential` and associate it with the user account. You will need it later to verify authentication attempts.
Authentication
webauthn.authenticate(["{{authentication.credentialId}}"], "{{authentication.challenge}}", {{authentication.options}})
{{authentication.result ?? '...'}}
And on the server side, verifying the authentication leads to:
const credentialKey = { id: "{{registration?.parsed?.credential?.id ?? '...'}}", publicKey: "{{registration?.parsed?.credential?.publicKey ?? '...'}}", algorithm: "{{registration?.parsed?.credential?.algorithm ?? '...'}}" } const expected = { challenge: "{{authentication?.challenge ?? '...'}}", origin: "{{origin}}", userVerified: {{authentication?.options?.userVerification === 'required'}}, counter: -1 } const verified = await server.verifyAuthentication(res, credentialKey, expected)
Resulting into:
{{authentication.parsed ?? '...'}}
Please note that the parsed result is returned for the sake of completeness. It is already verified, including the signature.
Signature validation
This part is mainly for debugging purposes or validation.
{{parseAuthData(verification.authenticatorData)}}
{{parseClientData(verification.clientData)}}
signature = sign(algorithm, publicKey, authenticatorData + sha256(clientData))