shadcn.io is not affiliated with official shadcn/ui
Hardware Key Login Block for Solid
A custody service's security-key page: a USB or NFC switch, three sign-in states, one button that waits for the key and then accepts it, and a drawing of a key and a port or a reader.
Installation
Overview
Ask for a FIDO2 security key without calling the browser's API, with this hardware key login block for Solid with Ark UI. It's the unlock page of Cairnvault, a crypto custody service: the page's rails run the full height of the screen and one band crosses it, split in two. At the start, a Segment Group chooses how the key connects, USB or NFC, over three rows that show the state of the sign-in: Ready, Waiting for your key, Signed in, the current one tinted and barred and the earlier ones ticked. The one Shine Button reads "Use security key"; pressed, a pulsing Status dot marks the wait and the same button now reads "Touch the key (demo)", or "Tap the key (demo)" for NFC, which signs in. Cancel ends the wait. At the end, behind a divider, a drawing follows the switch and the state: a key sliding into a port, or a key coming near a reader with two arcs. On a phone the drawing is gone and the rows stay. No key is asked for anything and the WebAuthn call is never made; each result says so. It's built from Segment Group, Status, Button, Shine Button and Guides. For custody, admin consoles and any account that requires a second factor you hold.
FAQ
Does this talk to a security key?
No. The page never calls navigator.credentials.get() and never asks the browser for a key; "Touch the key (demo)" stands in for the touch, and the result says no key was asked for anything. In a product, ask your server for a challenge where the code says so, call get() with it (listing the credential's transports, such as usb and nfc, helps the browser prompt for the right kind of key), send the signed answer back and let the browser draw its own prompt; this page shows what the states around that prompt could look like.
How do the four states work?
Ready, waiting, signed in and cancelled are one value. The first press moves from ready to waiting and keeps the same button, relabelled, so keyboard focus never leaves it; the second signs in and moves focus to the result's heading; Cancel returns to ready and puts focus back on the button. The rows, the drawing and the line under them all read that one value, and the page keeps its height through every state.
What is the pulsing dot, and can it be stopped?
It marks the wait, and it is the only thing on the page that loops. It stops when you press Cancel or the key is accepted, and it doesn't pulse at all under reduced motion; the row also says "Waiting for your key" in words, so the pulse carries nothing by itself.
What does the USB and NFC switch change?
The instruction on the first two rows, the label of the touch button (touch or tap) and the drawing. It is locked while the page waits for a key, because changing how a key connects mid-wait would mean asking for another one. The switch is a Segment Group with the same API on every base.