OAuth Apps Settings Block for React

Edit APPS at the top: each app has a name, its kind, the client ID, the last four characters of its secret (empty for a public app), its redirect URIs and its scopes. SCOPES lists every scope with its group, a hint and the phrase the consent sentence uses, and FRESH holds the secrets a roll hands out, in order. The list rows, the counts, the consent sentence and the "2 of 5" counters are all worked out from the app, so nothing is typed twice. Your API should send a secret only once, when it is made.

A full URL on https, or an http address on localhost or 127.0.0.1 for development. It refuses an empty entry, a wildcard, a fragment, text that isn't a URL, plain http anywhere else, an address that is already registered, and a sixth one, and it names the reason under the field, keeping what you typed. An app can't lose its last redirect URI: its Remove button stays on the page and says so instead. Matching must be exact when you wire it to a real authorization server, so keep wildcards out there too.

The button opens an alert dialog with focus on its cancel button, which doesn't close when you click outside it. Confirming makes the next secret from a short typed list, shows it once in monospace with a Copy button and says the old one works for 24 hours, until the day after the page's fixed date. Hide it, or opening another app, hides it for good and leaves only the last four characters. Nothing is generated, stored or sent: the secrets are fictional and the clipboard is the only real thing. To make it real, call your API from the confirm handler and show what it returns once.

A public app, such as one that runs in a browser or on a phone, can't keep a secret, so it signs in with PKCE instead and has nothing to roll. Its secret section says so and keeps the same height as a confidential app's, so switching apps doesn't move the redirect URIs below it. The kind comes from the app's data, so a confidential app gets the masked secret and Roll secret.

Below the large breakpoint the window shows one pane: the list, then the detail after you choose an app, with a Back button that returns focus to the app's row. The window keeps its fixed height and the detail scrolls inside it. The apps are native buttons with aria-current, the detail is a labelled region you can scroll from the keyboard, each scope checkbox is named by its scope and described by its hint, and the status line is a polite live region present from the start.