Zachary Proser
INTERACTIVE EXPLAINER · EXP-0058 LAYERS · 24 COMPONENTS

EXPLODED INTERACTIVE · PASSKEY LOGIN

What happens when you sign in with a passkey?

Follow one passkey login from the username field through a WebAuthn challenge, the authenticator, an assertion signature, and the session cookie that comes back.

8 LAYERS / 24 COMPONENTS

Operate the passkey-login journey

START HERE
Follow one sign-in, step by step

Press Start tour to follow a typical passkey login from the username field to a session cookie. Each stop opens the component responsible for that part of the trip.

Exploded view: What happens when you sign in with a passkey?Interactive layers show a passkey sign-in moving from the login form through a challenge, the authenticator, and assertion verification. A session cookie returns after the server accepts the signature.ASSERT PATH DOWN / SESSION PATH BACK08 LAYERS · NOT TO SCALESESSION PATHASSERTSESS
ASSERT PATH SESSION PATH

The page marks a field for passkeys, starts a pending get, and fetches request options.

A typical site keeps a username field and adds autocomplete=username webauthn. On load it GETs PublicKeyCredentialRequestOptions and calls get() with mediation: conditional. Choosing a passkey resolves that promise instead of submitting the password form.

Entry
focus field
translate mechanism schematicA field annotation becomes an autofill hint.
  1. 01page load
  2. 02username field
  3. 03webauthn hint
  4. 04focus
A field annotation becomes an autofill hint.
COMPONENT / FORM

Login form

Reading the animation: A field hint tells the browser this form accepts passkeys.

Marks the username field so the browser may offer passkeys.

WORKED EXAMPLE

The username field is annotated for passkey autofill

input name=user autocomplete="username webauthn" autofocus
Field
username
autocomplete
username webauthn
autofocus
yes
Password field
still present

autocomplete must include webauthn. autofocus can open suggestions as soon as the page appears. A password field can stay on the form; choosing a saved password does not resolve the pending get.

In engineering terms: The login form is that slot. It does not hold the private key and does not draw the picker.

FOLLOW THIS EXAMPLE

  1. 01

    Render the username field.

  2. 02

    Set autocomplete to include webauthn.

  3. 03

    Optionally autofocus the field.

  4. 04

    Leave the password path in place.

Measurements, controls, and tradeoff
Useful evidence
Missing webauthn token, fields that never receive focus, and custom inputs that skip autocomplete.
Controls
autocomplete tokens, autofocus, and whether a password field stays.
Tradeoff
Keeping the password field covers mixed accounts and also leaves a phishing surface the passkey path was meant to shrink.
Hint
webauthn
Definitions and sources

TERMS IN THIS VIEW

Conditional UI
Browser or OS autofill that lists passkeys on a field marked autocomplete=webauthn. Uses mediation: conditional so the site draws no modal.
Mediation
Credential Management flag. conditional keeps get() pending until autofill. A button path omits it and opens a sheet immediately.
Passkey
The everyday name for a WebAuthn discoverable credential. An authenticator uses its private key and retains the credential id and user handle; a passkey provider may back up encrypted credential material for sync.

SOURCES + CONTINUE READING

  1. [01]Passkey form autofillweb.dev
  2. [02]Credential ManagementW3C

Why it matters: If this layer never starts the pending get, the field still looks like a login box and never offers a passkey.

Definitions for this layer

TERMS IN THIS VIEW

Conditional UI
Browser or OS autofill that lists passkeys on a field marked autocomplete=webauthn. Uses mediation: conditional so the site draws no modal.
Mediation
Credential Management flag. conditional keeps get() pending until autofill. A button path omits it and opens a sheet immediately.
WebAuthn
The W3C API browsers expose as navigator.credentials.create and get. Passkey login is a get() assertion ceremony.
ZACKPROSER.COM / EXPLODEDzackproser.com/demos/what-happens-when-you-sign-in-with-a-passkeyUPDATED 2026.08.21
Complete exploded diagram of a passkey sign-in

COMPLETE SYSTEM VIEW

Take the whole login path with you

Every layer and component is expanded in one high-resolution diagram for teaching, reference, and sharing.

Resolution
2400 × 3000 PNG
Contents
8 layers · 24 components
Attribution
URL included in the image

KEEP LEARNING

Trace the systems on either side

EXPLODED INTERACTIVEWhat happens when you fetch a URL?

The same HTTPS origin check that WebAuthn hashes into clientDataJSON, drawn as a full browser navigation.

EXPLODED INTERACTIVEWhat happens when you git push?

Another credential helper — HTTPS tokens and osxkeychain — on a different protocol.

EXPLODED INTERACTIVEWhat happens when an agent calls a tool?

When the caller is an agent, follow permission and vault injection instead of a human authenticator.