Token Authentication Login Block for React

Everything stays in the page, and the example tokens are made up. Authenticate waits less than a second and shows the token masked, with a polite status message saying nothing was sent; the field is emptied, because a token is shown once. In your app, send the token to your auth endpoint in an Authorization header and show the account it belongs to. The detection is only a hint for the visitor: your server decides whether a token is good.

A pure function tidies the text (a leading "Bearer ", spaces, line breaks and quotes come off) and tries two shapes. A personal token is pw_pat_, then eight digits that must be a real calendar day, then 20 lowercase letters and digits. A JWT is three parts of base64url characters joined by dots whose header decodes to JSON naming an algorithm. Anything else is Unknown. Edit PERSONAL_SHAPE and readingOf for your own formats.

From the token itself and a typed rule: a personal token carries the day it was made, and lasts 90 days from it. The page counts from a typed "today" (AS_OF), never the clock, so the line reads the same for everyone. A JWT's expiry is inside its payload, which this page leaves to your server; the JWT debugger in this category reads it.

The chips are a labelled list, not controls: the one that fits is solid with a check, and the page says it in words a moment after typing stops ("Personal token, expires 10 Jan 2027, in 86 days."), once, never on every key. The "Token formats" button opens a list whose "Use" buttons each say which example they fill, and filling moves focus to the field.

A disabled button can't say why, and keyboard users can't reach it. Pressing it with an empty, unknown or expired token puts one sentence where the facts were and moves focus to the field. Typing clears the sentence and the facts come back, in the same space, so nothing moves.

The same column: the field, the three chips, the facts and Authenticate are on the first screen. The page starts at the top rather than centred, because opening the formats list grows it and nothing above may move.