Parental Gate Login Block for React

Everything. The three questions, their answers and the PIN are typed constants printed as hints, and nothing is stored or sent. In a product, keep the parent PIN on your server (or in the device's keystore), compare it there, rate-limit wrong guesses, and ask the question from a larger set in a random order so a child cannot learn them. A gate like this protects against accidents, not against a determined child.

No, and the page says so under the button. A sum slows a young reader down and a PIN keeps a settings screen closed, but nothing here can tell who is holding the device or how old they are. If a law or a store policy asks for a real age check, use your platform's parental controls, an adult account or a verification service, and treat this gate as a convenience on top.

The page says "Not quite. Here is another one.", clears the field, puts focus back in it and shows the next of the three questions, wrapping round after the last. A right answer moves on to the PIN step. Pressing with nothing typed names the problem and focuses the field instead.

It is the catalog's code field with four slots: it takes digits only, a paste of the whole PIN fills all four, and Enter presses the button. A wrong PIN clears the slots, says so under them and focuses the first slot. A right one waits half a second and opens the settings state, with a button that closes the gate again.

Yes. Each step has a labelled field, the question is the label, each problem is read with its field, and the page's one status line speaks each result. The step that is not showing is hidden and inert, so the tab order only ever holds the current one.