Push Approval Number Matching Login Block for React

Nothing is sent. The two buttons labelled "Demo:" stand in for the person's phone and are the only way to answer, and the numbers are fixed (47 and 12 for Push, 83 and 29 for Text, 6 and 2 for Call). In a product your server makes the number, shows it to the browser that asked, and offers the phone that number among two others; it accepts only the matching tap, once, and ties the request to the sign-in attempt that started it.

A plain Approve button can be worn down: an attacker with a stolen password sends request after request until a tired person taps yes. With number matching the person has to read a number off the screen they are actually signing in on, so a request they didn't start has no number to match.

It starts when Send is pressed, not when the page loads, and shows the time remaining under the number. When it reaches zero the request expires: the status box says so and the button reads "Send again", which starts a new request with a new timer. With reduced motion the ticking digits are hidden and a sentence says the request expires in 60 seconds.

A matching answer signs in and shows who approved it and the number matched. A wrong number cancels the request: "That was not the number.", and the button reads "Send again". No answer expires it. Choosing a different method while a request waits cancels it too, with a polite message, so two requests are never live at once.

A disabled button gives a keyboard user nothing to learn from. Before a request exists the Demo buttons stay pressable and look quiet; pressing one says "Send a request first." and moves focus to the Send button. The Send button does the same while a request waits: it stays in place, quiet, and pressing it says it is waiting.

The big number is decorative and the same number is in the sentence under it ("Tap 47 on your phone."). One polite status message speaks each change: the request sent, the cancel, the expiry, the sign-in. The result takes focus on its heading.