Two-Factor Authenticator Login Block for React

From a typed list of eight, one per 30-second window, shown in turn and starting again at the end; nothing is calculated. The authenticator is a drawing of what a real app does, and the page sends and stores nothing. In a product the code is a time-based one-time password: your server and the person's app share a secret when two-factor is turned on, and both work out the same six digits from the secret and the clock.

Clocks drift and people type slowly, so a code is usually accepted for a little after its window ends. The page accepts the current code and the one before it, shows that previous code on the card ("Previous code, still accepted") and says in the result which one was used. A real server should do the same, no more than a window or so, and refuse a code it has already accepted.

It stops the demo's clock, and so the code and the ring, until it is pressed again, so there is time to type without the code changing. It is a toggle button: its pressed state is exposed to assistive technology and it fills with the text color when on, and a polite message says the codes are paused or running. Everything else on the page keeps working while it is paused.

This is the one block whose codes change on their own, so it has a visible way to stop them. With reduced motion the ring no longer animates; the digits still change every 30 seconds, and Pause is still there. Nothing else on the page loops.

Below the large breakpoint the authenticator is hidden, since it is a drawing and the form should come first. The hint under the field then prints the current demo code and says it changes every 30 seconds; on wide screens the hint points to the authenticator instead, so the code is shown once.

Type six digits, or paste them, then press Enter or the button: Enter works from any box. An empty or short code is named ("Enter all 6 digits.") and puts focus back in the field. The boxes keep the digits in order in an RTL page.