shadcn.io is not affiliated with official shadcn/ui
API Key Show Once Success Block for React Aria
A key confirmation inside an app panel: the secret masked with an eye toggle and a real copy button, a checkbox that turns it into its stored form, the key's scopes and dates, a request that uses it, and a Done button that waits for the box.
Installation
Overview
Show a secret once, and make sure it was kept, with this key confirmation panel for React with React Aria. It's the panel Textferry, an SMS API, shows right after a key is created: a header, then one framed form ruled by Guides. The first band holds the key in monospace, masked, with an eye Toggle that shows it, a Copy Button that copies the whole sample key, and a Checkbox, "I've stored this key", that turns the band into its stored form (the prefix, the last four characters, the day it was made) and says it can't be shown again. The second band is the key's name, mode, scopes and its two dates, the expiry worked out from the creation day. The third is a Syntax Text request with the key spliced in, or the environment variable once stored. The foot says what's missing and holds Done, the one Shine Button. For API keys, tokens, recovery codes and any secret that appears once.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was created: the key is a made-up sample whose prefix and shape are not any provider's. The eye, the copy button and the checkbox work on this page only (Copy key does put the sample on the clipboard). To wire it, create the key on your server, store only a hash of it, return the plain key once and build KEY from that response; after the box is ticked drop it from the page's memory and keep only the prefix and the last four characters.
What does ticking the box do?
It turns the secret band into its stored form in the same space, so the page keeps its height: the prefix, dots, the last four characters and the day the key was made, with a note that it can't be shown again. The eye and copy button go with the secret, the request below switches to an environment variable, the box locks, and focus moves to the stored row so a keyboard or screen reader user lands on the result. Reloading the preview brings the key back; a real page cannot.
Does the eye matter to Copy key?
No. Copy key always puts the whole key on the clipboard, shown or masked, so a visitor never has to reveal it just to copy it. The eye only changes what is on screen and in the request below; its label stays "Show the key" and its pressed state says which way it is. If the clipboard refuses (a page not served over HTTPS), a screen reader hears that the key could not be copied.
Why is Done dimmed?
Done is dimmed, not disabled, until the key is stored. Pressed too early it says "Tick the box first." in the foot's status line and puts focus on the checkbox; after the box is ticked it finishes in this demo and says so.
Where does the expiry date come from?
From the creation day plus the key's lifetime (90 days), worked out in UTC from the fixed day in AS_OF, never from the visitor's clock, so the page reads the same on the server and in every time zone. In your product both dates come from the key.
How does it look on a phone?
The secret band comes first: the key on its own line with the eye and Copy key under it, then the checkbox. The details stack one to a line, the request scrolls sideways inside its box (it is a named region a keyboard can reach), and the foot with its status line and Done is pinned to the bottom of the screen.