Remember Device Login Block for React

Nothing is stored: no cookie is set and the choice is gone on reload. Sign-in waits under a spinner for less than a second, then shows "You're signed in", whether this browser is trusted and until when, and a polite status message says nothing was stored. A real product sets a signed, HttpOnly cookie only when trust is on, with an expiry the server checks, and skips the code step only while that cookie is valid. Post the form to your auth endpoint where the code says so.

From a typed "today" (midnight UTC on 2026-10-14) plus the number of days, in UTC, and written with Intl.DateTimeFormat, so the server and every visitor's time zone print the same day. It never reads the clock when the page renders. In a product the server decides the expiry and sends the date back, and the page only prints it.

Trust starts off, so someone has to choose it, and the warning sits beside the switch where the choice is made. Beyond the page: make the cookie revocable from a list of trusted browsers in the account's settings, drop every trusted browser when the password changes or a security event happens, and ask for the password again before sensitive actions even on a trusted browser.

They are common defaults, a week for caution, a month as the usual, and a quarter for a personal laptop; pick the set that matches how risky an unlocked mailbox is for your users. The choices are the DURATIONS array: each has its number of days, its label and a value, and the date line follows the one that is chosen.

Hiding it would leave a hole in the middle of a centered page, and revealing it would move the Sign in button under the pointer. It stays in place, quiet and out of reach of the keyboard, with no selected segment until the switch is on; then the choice wakes up with 30 days selected, and a polite message reads the new date out.

A disabled button can't explain itself, and keyboard users can't reach it. Pressing Sign in with an empty or malformed email, or no password, marks those fields invalid, writes one sentence under each and moves focus to the first. Typing clears that field's problem, and each field keeps a line for its problem even when there is none.