Missing API Key Error Block for React

The Copy button is real: it writes the file as it stands, with or without the sample line, to the clipboard. Generate a sample key only changes the window in the page: nothing is saved, requested or sent, and the sample is not a credential for anything. To wire it for real, drop the sample and show the line your SDK reports as missing, and send the visitor to your own key page from the one button.

A page that prints something that looks like a secret gets copied into real projects and trips secret scanners. The sample is a typed pw_test_demo_ value for a made-up product, it appears with the words "not a real key" next to it, and you should keep your own sample just as obviously fake. A real key is created on your keys page and never shown in an error page.

The window always draws six lines. Before, the sixth is an empty numbered line; after, the key line becomes two lines, the old one struck through and marked with a minus and the new one with a plus. Screen readers get the words Removed and Added, since the signs are decoration, so the window is the same height either way.

The line numbers are hidden from assistive technology, so only the code is read. The window scrolls sideways inside itself when a line is long, it takes a tab stop of its own and is named by its file name, and the code stays left to right in a right-to-left page, as code should. The missing line carries the word missing as well as the edge.

No. They are a read-only list, not a wizard: what to do, in order, with a short note each. The notes are hidden from sight on a phone to keep the button on the first screen, and stay available to screen readers.

The headline, the sentence and the button come first, then the steps as titles, then the window with the sample controls and the status line. Nothing makes the page scroll sideways down to 320 px; a long line scrolls inside the window.