WebAuthn: passkey vs. plain credential — interactive playground

<div class="pg">
    <h1 class="pg-title">🔑 Passkey vs. plain WebAuthn credential</h1>
    <p class="pg-sub">
      Register a credential two ways, then try signing in with an empty username
      field. Only one of them lets the browser find you without being told your name first.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Register a credential</div>
      <div class="field-row">
        <span class="label">username</span>
        <input class="mono" type="text" id="regName" value="you@example.com" />
      </div>
      <label class="toggle" style="margin-top:10px">
        <input type="checkbox" id="residentKey" /><span class="switch"></span>
        <span>set <code>residentKey: "required"</code> when creating it</span>
      </label>
      <p class="hint">Leave this off first — it's the default nobody sets on purpose.</p>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="doRegister">navigator.credentials.create()</button>
        <button class="btn ghost" id="resetAll">Reset device</button>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="bug">Preset: the tutorial way</button>
        <button class="btn sm" data-preset="fix">Preset: an actual passkey</button>
      </div>
    </div>

<div class="two-col">
      <div class="panel">
        <div class="panel-label"><span class="n">2</span> This device's authenticator</div>
        <div class="device" id="device"><div class="device-empty">No credentials stored yet.</div></div>
        <p class="hint">A discoverable credential is saved <em>here</em>, on-device, with your name attached — the browser can list it later on its own.</p>
      </div>
      <div class="panel">
        <div class="panel-label"><span class="n">3</span> Live event log</div>
        <div class="log" id="log"></div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> Sign in — with an empty username field</div>
      <p class="hint">
        Simulates <code>navigator.credentials.get()</code> with no
        <code>allowCredentials</code> list — exactly what an empty, freshly
        loaded login page can send.
      </p>
      <div class="btn-row">
        <button class="btn good" id="doLogin">Sign in (username field empty)</button>
      </div>
      <div id="pickerWrap"></div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — register a credential above, then try signing in.</span>
      </div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.