Passkey Setup Page
Centered auth card prompting passkey enrollment with three benefit rows, a device save target panel, and a skip fallback that keeps the existing password active.
Centered auth card prompting passkey enrollment with three benefit rows, a device save target panel, and a skip fallback that keeps the existing password active.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Passkey Setup Page is a centered auth card for Acme with three benefit rows, each with a muted icon tile: Face ID or fingerprint with no password to remember, passkeys cannot be phished (that is the whole point), and the existing password stays active as a fallback for now. A device panel below the benefits shows the save target as This device via iCloud Keychain on MacBook Pro, Safari 17, syncing to all Apple devices automatically. The Create passkey button with a Fingerprint icon leads; a Skip for now link closes the card with a reminder that a passkey can be added any time from Security settings.
Benefits are one typed const array of icon and label pairs. The footer note that passkeys are stored on device and never sent to the server is the closure the security conscious user is looking for before they tap.
Reach for this block on the post-signup or security upsell flow, shown after a successful password sign-in when the user has no passkey registered yet. Wire the button to the WebAuthn create credential API.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the first-time passkey enrollment nudge. Other security setup cards:
Tip: name the device the passkey will save to before the user taps; an unknown save target is the top reason people skip passkey enrollment.