Passkey Login Block for React

No. The page never calls navigator.credentials, never reads a credential and never asks your browser for anything: the passkeys are a typed list, "Verifying with your device" is a timer of 800 ms, and the result says nothing was requested or sent. In a product, ask your server for a challenge, call navigator.credentials.get() with it where the code says so, send the signed answer back, and let the browser draw its own chooser; the page here shows what that sheet's choices and result would look like.

A modal open on load would trap focus and hide the page around it, so the docs show the chooser drawn in place, a non-modal dialog on the stage that traps nothing and takes no focus. Its Cancel, Close and Escape (while focus is inside the stage) close it and move focus to the header's button. In your app keep the real Dialog and drop the in-place copy: the in-place state, the scrim with its dialog and the Escape effect. Both wrappers share one content component and the block's state, so a choice made in place is still there in the real dialog.

It is a modal Dialog: focus moves into it, Tab stays inside, Escape or Cancel close it and focus returns to Use your passkey. Continue runs the same steps as in place, the dialog keeps its height through the three stages, and the polite status message is repeated inside it while it is open, because a modal hides the rest of the page from screen readers.

Show your password form first and offer the passkey button only when the browser reports support, with PublicKeyCredential.isConditionalMediationAvailable() for autofill. When a visitor has no passkey for your site, the browser's own sheet says so, and your page should say what to do next rather than leave a dead end: a password, or a link to add a passkey after signing in.

They describe passkeys in general. A passkey is bound to your site's domain, so a look-alike page can't use it (phishing resistant); there is nothing for the person to type; and the device checks a fingerprint, face or PIN before it signs (unlocked by your device). They say nothing about Tarnbridge itself, which is fictional.

The in-place chooser docks to the foot of the stage as a sheet, with only its body scrolling so the buttons stay put, and the badges and the privacy note are hidden to keep the stage and the button within the first screen. The real dialog keeps the catalog's phone layout.