v139 · Demo 2

Credential Availability Gate

Use mediation: "immediate" as a gate — show a sign-in form only when no credentials exist. Zero friction for returning users, instant fallback for new ones.

1
Page loads — try immediate credential check
Call credentials.get({ mediation: 'immediate' }) silently. No UI shown yet.
2
Branch on result…
Waiting for step 1.
3
Outcome
Waiting for step 2.

implementation pattern

async function smartSignIn() {
  // Step 1: Check silently — no UI, instant answer
  try {
    const cred = await navigator.credentials.get({
      mediation: 'immediate',
      password: true,
      publicKey: {
        challenge: new Uint8Array(32),
        rpId: location.hostname,
        allowCredentials: [],
        userVerification: 'preferred',
      }
    });

    // Step 2a: Credential found — sign in without a form
    if (cred) {
      await signInWithCredential(cred);
      return;
    }
  } catch (err) {
    if (err.name !== 'NotAllowedError') throw err;
    // NotAllowedError → no credentials for this site
  }

  // Step 2b: No credentials → show sign-in form
  document.getElementById('signin-form').style.display = 'block';
}

// Run on page load (or after a short delay)
smartSignIn();

see also