v148 · Demo 1
Immediate vs Conditional UI
Trigger each mediation mode and see how the browser responds — especially when no credentials exist for this page.
Checking Credential Management API support…
immediate NEW
Show UI only if credentials exist. Reject NotAllowedError immediately otherwise.
Not triggered yet.
conditional
Fill autocomplete suggestions silently. Resolves only if user picks from a list.
Not triggered yet.
required
Always show the credential picker, even if empty.
Not triggered yet.
| mediation | credentials exist | no credentials | user dismisses |
|---|---|---|---|
"immediate" ← new |
Resolves with credential | Rejects: NotAllowedError |
Rejects: NotAllowedError |
"conditional" |
Fills autocomplete (passive) | Promise stays pending | Promise stays pending |
"required" |
Shows picker, resolves on pick | Shows picker (empty) | Rejects: NotAllowedError |
"optional" |
Resolves (may show picker) | Resolves with null |
Resolves with null |
the key distinction
// "immediate" — new in Chrome 148
// Resolves → credentials found, UI shown
// Rejects with NotAllowedError → no credentials (can fall through to sign-in form)
try {
const cred = await navigator.credentials.get({
mediation: 'immediate',
password: true,
publicKey: { /* WebAuthn options */ }
});
signInWith(cred);
} catch (err) {
if (err.name === 'NotAllowedError') {
showSignInForm(); // no credentials → show form
}
}
// "conditional" — passive, doesn't reject on empty
// Promise stays pending until user picks from autocomplete
await navigator.credentials.get({ mediation: 'conditional', /* … */ });
// "required" — always shows the picker modal
await navigator.credentials.get({ mediation: 'required', /* … */ });see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗