WebAuthn Login Block for React

No. Create passkey waits 700 ms and shows "Passkey saved", and the result says this demo created no credential and made no request. The page never calls navigator.credentials.create(). In a product, fetch registration options from your server where the code says so, call create() with them, then send the new credential to the server to store its public key and its name.

The indicator is read-only: it shows where you are and ticks off what you have done, but you move with Continue and Back. Each pane shares one grid cell, so the page never changes height, and the pane you leave turns invisible and inert so nothing hidden takes focus. When a step changes, focus moves to its heading and a polite message says which step you are on. "Not now" ends the setup from any step, and "Start over" brings it back.

A passkey needs a name you can tell apart later, so the field starts with a sensible one for where it will live: Maya's MacBook, Maya's iPhone, Maya's security key. The default follows your choice until you type your own, and from then on it keeps what you wrote, even if you go back and choose again.

Here it only changes the sentence that "Not now" shows: Forgekeep would ask again on your next password sign-in, or would not. In a product, store the choice on the account, not in the browser, and still let people add a passkey later from their security settings, where the user can see and remove every one.

This device keeps the passkey on the computer or phone you are on, behind its screen lock. A phone or tablet means you scan a code with that other device and it keeps the passkey. A security key is a separate FIDO2 key you plug in or tap, which also works on devices that can't hold a passkey. The page doesn't detect what your device supports; a real one should, and hide the choices that can't work.