Captcha Verification Login Block for React

Nothing real: it is a typed script. The press waits 800 milliseconds, then either verifies or, with the demo switch on, opens a question whose answers are typed in the file. No service is called, no token is made and nothing is learned about the visitor. For real, put your provider's widget or token call where the code says so (an invisible or checkbox challenge from your bot-protection provider), keep the bar's states, and send the token with the sign-in so your server can verify it before it checks the password. The demo's printed answer under the question is only there so a keyboard user and a test can pass.

Picture challenges are hard or impossible for many people to pass, depend on one sense, and teach bots faster than they stop them. This check asks for one press, and escalates to a short typed question only when a risk signal says to. Both are readable by a screen reader and usable from a keyboard. A real deployment should also offer a way past the check, such as an email link, for anyone who still can't pass it.

A disabled button can't say why, and keyboard users can't reach it to find out. Here it stays enabled: pressing it before the check passes marks the bar with an icon, writes "Verify you are human to sign in." under it and moves focus to the checkbox, which reads it. Empty or malformed fields are named the same way, the first problem takes focus, and each field keeps a line for its problem so nothing moves.

With the demo switch on, the check ends in a question that drops from the bar, over the button and links under it, which stop being reachable while it is open. Focus moves to the answer field, Enter or Check answer tests it, and Escape or Cancel steps back to the bar. A wrong answer says so, shows the next question from the typed list and keeps focus in the field; the right one verifies and puts focus back on the bar. Pressing a verified bar clears it so you can run the check again.

Yes. Tab runs through the email, the password and its toggle, the check bar, Sign in, the quiet link and the demo switch; Space ticks the check. The bar's state ("One press", "Checking…", "One more step", "Verified") is its description, a polite status message announces each change, and the question's field is labelled by the question itself. After signing in, focus moves to the result's heading.

The bar is the full width of the form and 56 pixels high, a large target, and Sign in ends on the first screen. The question drops from the bar over the controls under it instead of pushing them down, so the page never changes height.