OTP Verification Login Block for React

Everything. The first code is 482913, printed under the field. A resend brings 706125, then 351840 and 917264, and the list starts again. Checking waits half a second, then "You're signed in" replaces the form in the same space, with a polite status message saying nothing was sent and no session was kept. In a product, send the code from your server, limit how often it can be asked for, and check it there too: the page only holds a short typed list.

Yes: on the sixth digit, whether typed one key at a time or pasted whole. The Verify button and Enter do the same thing, which is why they name an incomplete code ("Enter all 6 digits.") instead of doing nothing. A wrong code is cleared when it is refused, so the next try starts from an empty field, and anything that isn't a digit is dropped.

A code allows three tries: "Not that code. 2 tries left.", then "1 try left.", then "That code is used up. Send a new one." and the field is locked until a new code is sent, which gives three tries again. In a product the count belongs on your server, per code and per account, since a page can't be trusted to keep it.

Pressing it sends the next demo code and starts a 30-second wait: the label counts down ("Wait 30s"), presses are ignored but focus stays on the button, and a fill drains behind the label. The wait starts when it is pressed, not when the page opens, so anyone can reach the button. With reduced motion the fill is hidden and the count stays as text.

Never on load. After a wrong code it goes back to the first box; after the third it goes to the resend button, since the field can't take it; after a resend, to the field; and when the code is right, to the "You're signed in" heading, with Sign out returning it to the field.