Device Approval Login Block for React

Everything. The device, the place, the time and the number are typed constants, each choice waits half a second and changes the page's state, and nothing is sent to a phone or read from one. In a product, create a request on your server when the sign-in starts, with a random two-digit number, show that number on the sign-in screen and push the request to the person's enrolled phone with the device and place your server saw. The phone shows the real number and two others; your server checks the choice, keeps the request single-use and short-lived, and only then lets the sign-in continue.

Because a plain Approve button is easy to press without reading, and a person who gets a request they did not start would approve it by habit. With number matching they have to find the number that only the real sign-in screen shows. A wrong number is treated as a sign that the request is not theirs, so the request ends and a new one has to be sent.

Nothing can be done from the sign-in screen yet. A disabled button explains nothing and is skipped by the keyboard, so this one stays focusable: pressing it says what is missing ("Tap 47 there to approve") and moves focus to the first number on the phone. Once the request has an ending, the button names the next step: Continue to Thermowick, Send a new request or Change your password.

By a glyph and a word in the same space: a tick with "Approved", a cross with "Request denied" or "Denied", each with one sentence under it. The page uses no green or red. The result takes focus on its heading, and the page's one status line says the same thing for screen readers.

No. It's a rounded greyscale panel of the product's own interface, at most 17rem wide, with no bezel, notch or status bar. On a phone the Phone label and the caption become screen-reader text and the Requested row drops out, so the button stays on the first screen.

Yes. Each number is a real button named by its digits, so Tab and Enter work and the phone is a figure named Phone. While a choice is being checked the other buttons stay in place but do nothing, and the unused pane is inert so it cannot take focus. Start over is always there and says so when there is nothing to start over yet.