g3n-data
Support繁中
← All tools

Passkey Flow Visualizer

Explore registration and sign-in between server, browser and authenticator; optionally run a disclosed local WebAuthn demo.

passkey-flowLOCAL WORKSPACE

1. Configure and explore

Inputs stay in this tab; no browser persistence, page-URL encoding or network requests.

Explore the steps without creating credentials. The separate device demo opens a system prompt and creates a real passkey for this site; no server verification or account.

Optional: local device demo (creates a real credential)

Credential ID exists only in this tab's memory and is lost on reload. Clear does not delete the authenticator credential; remove local educational demo in your password manager. Timeout: 60 seconds; cancellation supported.

1 / 5

2. Results and interpretation

Choose a sample, fill the fields or explore the flow.

ServerBrowserAuthenticator

  1. Generate a random one-use challenge; bind it to the user's session, expected origin and RP ID.

  2. Call navigator.credentials.create({publicKey}); enforce the secure-context and RP/origin rules.

  3. Ask for user consent/verification; create a credential key pair. The private key stays with the authenticator/provider.

  4. Return clientDataJSON and attestationObject to the relying party over HTTPS.

  5. Verify type, challenge, origin, RP ID hash, user presence/verification and supported algorithm; store the public key and credential ID.

Server steps in this diagram are educational; this page has no verification server.

Preview: first 32,000 characters. Copy, download and expanded text retain all content. Select complete text if copying fails.

1. Server
Generate a random one-use challenge; bind it to the user's session, expected origin and RP ID.

2. Browser
Call navigator.credentials.create({publicKey}); enforce the secure-context and RP/origin rules.

3. Authenticator
Ask for user consent/verification; create a credential key pair. The private key stays with the authenticator/provider.

4. Browser
Return clientDataJSON and attestationObject to the relying party over HTTPS.

5. Server
Verify type, challenge, origin, RP ID hash, user presence/verification and supported algorithm; store the public key and credential ID.
Expand complete selectable text
1. Server
Generate a random one-use challenge; bind it to the user's session, expected origin and RP ID.

2. Browser
Call navigator.credentials.create({publicKey}); enforce the secure-context and RP/origin rules.

3. Authenticator
Ask for user consent/verification; create a credential key pair. The private key stays with the authenticator/provider.

4. Browser
Return clientDataJSON and attestationObject to the relying party over HTTPS.

5. Server
Verify type, challenge, origin, RP ID hash, user presence/verification and supported algorithm; store the public key and credential ID.

The diagram is educational. Device demo has no account or server verification; remove its credential from your password manager after testing.

Data / rules date: 2026-10-21 · Official source

How to use this tool

Choose registration or authentication, move through each step and inspect responsibilities. The separate device demo creates a real credential only after an explicit click.

When not to use it

The diagram is educational. Device demo has no account or server verification; remove its credential from your password manager after testing.

Read the guide →