Conditional UI (autofill)

Discoverable credentials make usernameless login possible; conditional UI makes it invisible until the visitor wants it. Instead of a "Sign in with a passkey" button that pops a modal, a passkey ceremony sits quietly in the background from the moment the page loads, and only surfaces as an entry in the browser's native autofill dropdown on a normal-looking username field.

This needs a discoverable credential already registered in this session — see Discoverable credentials if you haven't yet.

1. Feature-detect, then start a conditional request

isConditionalMediationAvailable() is checked first — Safari and some older browsers don't support this yet. The request itself is the same navigator.credentials.get() as every other authentication ceremony on this site, with two additions: mediation: "conditional", and an AbortSignal so it can be cancelled (the demo aborts it on unmount).

const credential = (await navigator.credentials.get({
  publicKey,
  mediation: 'conditional',
  signal,
})) as PublicKeyCredential;
// 

The input field below has autocomplete="username webauthn" — that attribute is what tells the browser this field is a valid place to surface the autofill suggestion.

Try it