shadcn.io is not affiliated with official shadcn/ui
Invalid Token Error Block for Vue
A full-screen invalid-token page for an identity API: three ruled checks (Format failed with the parts drawn, Signature and Expiry not checked), a masked fingerprint to copy, Sign in again, and a Report to security list of exactly what a report would attach.
Installation
Overview
Tell people what failed without ever showing the token, with this invalid token error page for Vue with Ark UI. It's the hosted error screen of Keywright, an identity API: a whole screen with the page's rails and one band across it, its content a start-aligned column. Under the heading, three checks stand in rows ruled by Guides: Format failed, with "3 parts expected, 2 found" drawn as two parts present (header and payload, with their lengths, never their content) and one dashed and missing; Signature and Expiry not checked, because the first check failed. Below them, a masked fingerprint of the token with a Copy Button. A Shine Button Sign in again is the way forward, and Report to security opens a Collapsible with the list of exactly what a report would attach: the request id, the time, a partly hidden address and the fingerprint, plus the visitor's email only while a Switch says so. Send report records it in the page's state. It's built from Collapsible, Switch, Copy Button, Button, Shine Button and Guides, with a CSS entrance only. For any service that signs people in with tokens.
FAQ
Why does the page never show the token?
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".
What does Send report do, and what stays in the page?
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.
Why are Signature and Expiry 'not checked'?
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.
Why does the page start at the top instead of the middle?
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.