Biometric Auth Login Block for React

No. The page never touches a sensor and never calls navigator.credentials: a full hold is the button's own two-second fill finishing, Scan is a 700 ms wait, and the result says that no sensor was read and nobody was signed in. In a product the pad becomes the button that starts a WebAuthn request with user verification required, where the code says so; the browser and the operating system draw the real biometric prompt, and your page only receives a signed answer to check on the server.

The Long Press Button confirms only when its fill has run for the full duration, so a tap or an early release never signs in. Small listeners on the pad's wrapper only watch for the press starting and ending, to tell an early lift from a full hold. A press that lasts is a pointer held down, or Space or Enter held on the focused pad. Because holding is hard for many people, Scan always does the same thing with one press, and after a second early lift the line under the pad points to it.

The fill fades in instead of sweeping across, the pad still needs the full two seconds, and nothing else on the page moves. The header and the body fade up once on load, and that entrance is switched off too.

There is one polite status line, present from load. It says "Scanning. Keep holding the pad" when a hold starts, "Lifted too soon" when it ends early, and the result when it matches; the line you can see under the pad is hidden from assistive technology so nothing is read twice. The result's heading takes focus, and "Scan again" returns focus to the pad.

A fingerprint fails often: wet or worn fingers, a cold day, a sensor that is dirty or missing. A sign-in that offers only the body leaves those people locked out, so the quiet link under the button goes to your password form; point it at your own route.