Security Questions Login Block for React

Everything. The answers on file are Biscuit, Maple Street and Hollis, listed in the Collapsible beside the attempts; anything you type lives only in the page's state, is cleared when an attempt misses, and is never saved, sent or offered back by the browser (the fields turn autofill off). In a product, store each answer the way you store a password, as a salted hash of the normalised text, and check it on the server.

Only as a last resort. Many answers can be guessed or found on social media, and the same answer is often reused across sites. If you use them, let people write their own questions, treat the answers as passwords, count attempts on the server, and never make them the only way in. This block shows the mechanics (matching, counting and locking) rather than endorsing the pattern.

After removing accents, capital letters and spaces at the ends or doubled inside, so " maple STREET " and "Hóllis" both match. The page doesn't say which answer was wrong, only that fewer than two matched, so it can't be used to test one answer at a time. Pressing with fewer than two answers filled is named ("Answer at least 2 of the 3 questions.") and costs nothing.

There are three. Each press that doesn't get two correct answers uses one, shown by the dots and the words beside them; the third miss swaps the questions for "Try again later", which says when the form opens again as a fixed time (14:30 UTC), not a ticking clock, and offers a link to reset by email. "Reset the demo" gives the three attempts back so the block can be run again. A real lock belongs on the server, per account.

Show hint, at the end of each question's label, opens a typed hint under that field and turns into Hide hint; its state is exposed to assistive technology and the hint's line is always there, empty until opened, so nothing moves. Hints are the demo's own and say very little: a hint that gives the answer away defeats the question.

The two columns stack: the questions and the button first, so the main action is on the first screen, and the attempts panel under them. The "attempts left" message is also written under the button when a press misses, so it is seen where the press happened.