shadcn.io is not affiliated with official shadcn/ui
Developer API Login Block for Radix UI
A sign-in for a messaging API with Password and API key as two tabs, where the key tab checks a key's prefix and length and shows a curl line that rewrites itself with the key masked.
Installation
Overview
Let developers sign in with the credential they already have, with this developer API login block for React with Radix UI. It's the front door of Ternpost, a messaging API for apps: the page's side rails run the full height of the screen and one band crosses it between two rules, holding a centred column with the product's mark, a heading and the catalog's Tabs, "Password" and "API key". The password tab is an email and a Password Input. The key tab is a masked Password Input for a key (tp_live_ or tp_test_ plus 24 characters), a "Use a sample key" button that fills a made-up test key, and a curl line in a themed mono window that follows what is typed: the key is masked in it (tp_test_...ylvu), a test key points the line at the sandbox and a live key at production, and a Copy Button copies the line as it shows. The panels differ in height, so an unseen copy of both sizes the column and switching tabs never moves the page. Each tab has its own Shine Button, the only colored control. It's built from Tabs, Field, Input, Password Input, Copy Button, Button, Shine Button and Guides, with CSS transitions only. For developer platforms and APIs where a visitor may arrive with a password or with a key.
FAQ
What stays in the page, and what does the key do?
Everything stays in the page. The key is checked against a shape (its prefix and its length) and nothing else: it is never sent, stored or logged, and the sample key is made up and opens nothing. Pressing "Sign in with key" waits less than a second and shows what a real product would do next, in the column's own space, with a polite status message saying nothing was sent. In your app, send the key to your API in an Authorization header and show the account it belongs to.
What does the curl line show, and what does Copy copy?
A line that would call the API with the key you typed, rewritten as you type. The key is masked in it: its prefix and its last four characters once it is long enough, only the prefix while it is short, and a variable name ($TERNPOST_KEY) when what is typed is not a Ternpost key. Copy copies the line exactly as it shows, so a pasted key is never in the clipboard from this block; put the real key in your shell yourself.
How is the key checked?
A key is tp_live_ or tp_test_ followed by 24 lowercase letters and digits. While you type, the line under the field says what has been typed so far ("Test key, 12 of 32 characters"), and pressing Sign in with a key that isn't well formed puts one sentence in that line and moves focus to the field. A well formed key tells you whether it is a test key (calls go to the sandbox) or a live key (calls go to production).
What carries over when I switch tabs?
Everything you typed: the email, the password and the key all live in the block's own state, so switching tabs never loses them. The problems of one tab aren't shown on the other, and a polite message says which tab is showing. Tab reaches the selected tab, the arrow keys move between "Password" and "API key" and show the panel, and the panel's own fields follow in the tab order.
How does the column keep its height when the two panels differ?
An unseen copy of both panels sits in the same grid cell as the real one, so the cell is as tall as the taller panel whichever tab is showing. The copy is hidden from assistive technology, out of the tab order and uses its own ids, so nothing is announced twice. The page is centred, so any change in height would move the heading.