API Key Show Once Success Block for React

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.

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.

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.

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.

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.

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.