Invalid Token Error Block for React

Because a token is a credential: anyone who sees it can use it until it expires. The page shows the shape of what was found (the names and lengths of the parts) and a fingerprint, which is a hash of the token that can be shared safely. The Copy button writes the whole fingerprint to the clipboard, never the token, and the report list says "Never the token".

It records the report in the page's state and says "Report with 4 items recorded in this demo. Nothing was sent." (5 when the email is included). Undo takes it back. Changing the Switch after sending resets the report, because it is a different report. To wire it for real, post exactly the items that are listed to your security inbox where the code says so; the list is derived from the typed ATTACHMENTS, so what the visitor reads is what you send.

Because a validator stops at the first check that fails: a token that isn't in three parts has no signature to verify and no claims to read. Showing the later checks as not run is true to that, and it keeps the page from guessing. If your validator runs every check, change each row's state and detail to the real results.

Because the report makes it taller. Most pages in this set are centred in the screen, but a centred page would move its headline when the report opened or closed; starting at the top keeps everything above the disclosure where it was.

No: a component can't. Send the real HTTP status from your server, so clients see a 401, with the WWW-Authenticate header and the invalid_token error code that OAuth 2.0 bearer tokens use, and not a 200 with an error drawn on it.

To #: point it at your sign-in route. It's a Shine Button with render set to an a element and nativeButton={false}. On a phone the button is pinned to the foot of the screen until you reach it.