Passkey Flow Visualizer
Step-by-step walkthrough of WebAuthn registration and authentication ceremonies. Each step is annotated with the relevant byte structures and the AmbiSecure decoder you would use to inspect them. Annotation only — no live ceremony runs.
How to use this tool
What it does
Visualises the passkey registration and authentication ceremonies end to end.
When to use it
Use it to learn or explain how a passkey is created and later used, including the server's role.
Worked example
Step through a registration to see the challenge, attestation and stored public key.
Ceremony
About WebAuthn ceremonies
Two ceremonies make up the WebAuthn surface: navigator.credentials.create() for registration (fresh keypair + attestation) and .get() for authentication (signed assertion). The browser binds both to the relying-party origin; that binding is what kills the entire phishing class.
Spec
W3C WebAuthn Level 2 §4–6.
Companion tools
Reading
Frequently asked questions
What are the two WebAuthn ceremonies?
Registration, which creates a credential and returns an attestationObject, and authentication, which proves possession and returns an assertion with a signature. They share structure but differ in what is signed and returned.
What does the authenticator actually sign?
The concatenation of authenticatorData and the SHA-256 hash of clientDataJSON. Nothing else is covered, which is why both must be verified server-side rather than trusted from the client.
Where does the phishing resistance come from?
The origin recorded in clientDataJSON is written by the browser and cannot be forged by the page. A relying party that checks it will reject an assertion produced on a look-alike domain.
What is a discoverable credential?
One stored on the authenticator itself, so it can be presented without the relying party supplying a credential ID first. It is what makes usernameless sign-in possible.
Does anything I paste leave my browser?
Nothing. The tool is entirely client-side: the page ships a static script, does no network calls, and never transmits what you paste. You can confirm it by opening the network tab, or by loading the page and then going offline.