No API Keys Empty State Block for React

No key is created and nothing is saved. The key is one made-up string kept in the page (its prefix is not any real service's), it opens nothing, and a reload clears the list. To wire it for real, ask your API for a key where the code says so, show what it returns once in the same field, and list the key's prefix and last four characters afterwards; never keep the whole key in the page's state once it has been shown.

It is how real key screens work: the full key exists only at creation, so the page shows it in a read-only field with a Copy button, says so, and masks it as soon as you press Done. The list afterwards shows the prefix, four dots and the last four characters. The demo's copy button really writes the made-up key to your clipboard, which is the only thing here that leaves the page, and a polite line says whether it worked.

No. The form, the revealed key and the list share one grid cell, so the cell is as tall as the tallest of them and the inactive two stay invisible and out of the tab order. The page is centred, so nothing under the heading may grow; this is why. Focus moves to the new heading after each step, and Start over puts it back on the name field.

They are the two scopes of the demo key: a line under the group says what each would allow (list and fetch, or also create, change and delete), and the list shows the scope you picked. The group always has one value. Nothing is enforced here, since no real key exists.

It strikes the row through, says "Revoked in this demo" and takes the pin out of the drawing, leaving the hole dashed again. The button stays in the row, quiet and marked as unavailable, so nothing shifts, and focus moves to Start over. Start over, in turn, returns to the empty form with the name cleared.

The gate sits above the heading at 140 px tall, the form stacks, and the buttons go full width. The key field scrolls sideways inside itself if the key is longer than the screen, and nothing makes the page scroll sideways at 320 px.