shadcn.io is not affiliated with official shadcn/ui
Token Authentication Login Block for React Aria
A sign-in for a data-pipeline service where you paste a token and chips say whether it is a personal token or a JWT, with its length and expiry worked out from a typed rule, and a list of token formats.
Installation
Overview
Tell people what they pasted before they sign in with it, with this token authentication login block for React with React Aria. It's the front door of Pipewren, a data-pipeline service: the page's side rails run the full height of the screen and one band crosses it between two rules, holding a column with the product's mark, a heading and a Textarea for the token. As you type or paste, a plain function reads the text and three outline Badges light the one that fits (Personal token, JWT or Unknown), with a line of facts under them: a personal token carries the day it was made and lasts 90 days, so the line says when it expires against the demo's own "today"; a JWT is three parts joined by dots and its header names the algorithm. A pasted "Bearer " prefix, spaces and quotes are tidied away. Authenticate, the Shine Button, refuses an empty, unknown or expired token in words and otherwise shows the token masked, once. A Collapsible "Token formats" lists typed examples that fill the field. It's built from Textarea, Badge, Collapsible, Field, Button, Shine Button and Guides, with CSS transitions only. For developer tools and APIs that accept more than one kind of token.
FAQ
What stays in the page, and how do I wire it for real?
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.
How does the page tell the kinds apart?
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.
Where does the expiry come from?
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.
How do the chips and the formats list work with a keyboard?
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.
Why is Authenticate never disabled?
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.