v148 · WebAuthn · passkeys · UX

Passkey Flow Visualizer

Compare the three WebAuthn mediation modes — Modal, Conditional, and Immediate — side by side. Run live navigator.credentials.get() probes and inspect the actual browser result, rejection, or timeout for this origin.

flow comparison

Each lane shows the steps for one mediation mode. "Run comparison" calls the real Credential Management API for each mode and records the observed result.

Modal mediation: "required" always shows UI
Time to UI: —
Conditional mediation: "conditional" autocomplete hint
1Page loads — credentials.get() called passively
2No UI shown — waits for user interaction
3User focuses autocomplete="webauthn" input
4Browser shows passkeys in autofill dropdown
5User taps passkey from dropdown
Time to UI: —
Immediate mediation: "immediate" Chrome 148 new
1Page loads
2credentials.get({mediation:"immediate"}) called
3Browser checks for known credentials
4If found: UI opens immediately, no click needed
5If not found: rejects with NotAllowedError instantly
Time to UI: —

time-to-UI comparison

Measured time from each live credential request to resolution, rejection, or an explicit timeout for pending conditional UI.

Modal
—
Conditional
—
Immediate
—

These values come from the live browser calls on this origin. Conditional UI is aborted after a short window if it remains pending.

passkey manager

Query registered credentials for this origin via navigator.credentials.get(). Credential details are not exposed by the API for privacy; this panel shows what Chrome surfaces.

Click "Detect credentials" to query this origin.

mediation: "immediate" support

Feature Status Notes

how it works

  1. All three modes call navigator.credentials.get({publicKey: {…}}) — only the mediation value differs.
  2. "required" always shows the picker, regardless of whether credentials exist.
  3. "conditional" waits passively; the browser inserts passkeys into autofill on autocomplete="username webauthn" inputs.
  4. "immediate" (Chrome 148) resolves if credentials exist, rejects with NotAllowedError instantly if not — no UI delay, no click required.
  5. This page reports actual API timing for the current browser, origin, authenticator state, and saved credentials.

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗