Command Palette Login Block for React

So you can see it without a click. On load the palette is the catalog Command drawn inline on the stage, a plain shell that traps and focuses nothing, so the page around the preview keeps working. The trigger opens the real command dialog with the same rows, the same query and the same state, and the copy stays closed until a reload. In your app keep the command dialog and drop the copy: the "in-place" state, the scrim and its shell, the Escape and blur effects.

In the demo it only says what would come next ("GitHub chosen, in this demo. Next: GitHub would ask you to allow Runeboard.") and changes the method named on the drawn page. Nothing signs in and nothing is sent. For real, send the choice to your auth flow in the row's pick handler: an OAuth redirect for GitHub and Google, your SSO discovery for SSO, a request for a link for Magic link, and a route for the two account rows.

Type to filter the rows, use the arrow keys to move and Enter to choose. While the field is empty the digits 1 to 5 choose the five methods straight away (the cap on each row shows it); once something is typed the digits type like any other character. Ctrl or ⌘ K opens the palette while focus is inside the block, never anywhere else, because the site's own search owns that key on the page. Escape closes the palette and puts focus back on the trigger.

The list says so in a sentence that repeats what you typed and suggests what to try ("Nothing matches “zz”. Try a service or an action, like “github” or “reset”."), the foot says "No choices", and the palette keeps its size. Search reads each row's name and a few hidden keywords, so "sso" and "okta" both find the company sign-in.

The palette in place sits at the top of the stage, so the on-screen keyboard doesn't cover it, with the key hints hidden to make room. The real dialog uses the catalog's phone layout, also docked to the top. The trigger drops under the heading at full width and loses its key cap, because a phone has no Ctrl.

The trigger is named "Sign in with…" and says it opens a dialog; the palette is a labelled combobox with a list of groups, and the highlighted row is announced. The count is spoken in a polite region a moment after typing stops, not on every key, and the result of choosing is read from the status line under the page.