Smart Card Login Block for React

No. There is no reader, PC/SC call, WebUSB or card behind it: the waits are 700 ms timers, the certificates are typed data and the PIN is one typed value printed in the hint. In a real deployment the browser or the operating system draws the certificate picker and the PIN prompt during the TLS handshake (client-certificate sign-in), and your page never sees either, so a real page can only describe these steps, as this one does.

Cards usually hold separate certificates for separate jobs, and a certificate's key usage says what it may do: one is for client authentication, one for signing documents and email. Choosing Signing and pressing "Use this certificate" shows a short reason ("Choose Authentication to sign in") in the page's problem line and keeps focus where you are; choose Authentication and it goes on to the PIN.

The demo PIN is 482916. A wrong PIN costs an attempt and the line says how many are left, "3 attempts before the card locks" counting down; the third wrong one locks the card, and the lock panel says that a real card would then be unlocked by the help desk. "Reset the card (demo)" returns to the PIN step with three attempts again. The page checks nothing but that one typed value.

It is read-only: you move with the panel's button, not by pressing a step. A finished step shows what it found (the reader, the card's last digits, the certificate you chose) and a step that is still to come says "Not yet". Under the large breakpoint the list becomes a row of four numbers with their names, and the descriptions are read to screen readers but not drawn.

To the next step's heading, so a screen reader reads where you are, and to the PIN field when the PIN step opens. A polite status line says what happened ("Reader found", "Card inserted", "Signed in, in this demo"), and each panel keeps its own button, so Enter in the PIN field presses the right one.