Auth Buttons Navbar Block for React

Two places hold the demo. submit accepts any non-empty email and calls setUser({ email, name }); replace its body with your provider's call (an email link, a password, a social button) and set the user from the session you get back. endSession clears the user; call your provider's sign-out there. In an app that already has a session, start user from it and the bar renders signed in on load. Nothing is stored: the demo forgets the visitor on reload.

Sign in and Sign up open the same dialog with different words: its title and one line of help change, the field and the Continue button don't. Focus lands in the email field, Tab stays inside the dialog until it closes, and the field's label, the demo note and any error are tied to it for a screen reader. Continuing with an empty field shows "Enter an email to continue." and keeps focus on the field; typing clears it. Escape or the close button closes the dialog and puts focus back on the button that opened it.

The two buttons are replaced by one button naming the account (the avatar's initials and the name) that opens the menu. The menu is portalled over the page: an identity header with the name and email, Profile, Settings and Billing as links, then Sign out. Escape closes it and focus returns to the avatar button; choosing Sign out swaps Sign in and Sign up back and moves focus to Sign in (to Sign up on a phone, where Sign in lives in the sheet). A status line that is present from load says "Signed in as …" and "Signed out", once each. Opening the menu with Enter or Space puts focus on its first item; the arrow keys move between items, and Home and End jump to the first and last.

Below the md breakpoint the bar shows the wordmark, Sign up (or the avatar once signed in) and a menu button, and nothing wraps at 320 pixels. The menu button opens a sheet from the top whose header lines up with the bar, then the links with the current page tinted, then the same two states: Sign in and Sign up, or the account with Profile, Settings, Billing and Sign out. Choosing Sign in or Sign up in the sheet closes the sheet first and opens the dialog a moment later, so only one modal is ever open; Escape in that dialog returns focus to the menu button. Focus moves into the sheet and stays there until it closes.

PAGES at the top of the file holds the links (mark the page you're on with current: true, which gives it aria-current="page" and the stroke on the bar's bottom edge), and ACCOUNT holds the entries after the header: each is a label and an icon, and every href is #. The bar and the sheet read the same arrays, so they never drift apart. The menu's entries render the link they're given with render.

Nothing moves on load: the navbar is chrome and is simply there. The dialog, the menu and the sheet use the catalog's own entrances, a band of light sweeps across Sign up once on hover and keyboard focus, and the menu's chevron turns. With reduced motion the dialog, the menu and the sheet appear without sliding, zooming or fading (the dimmed backdrop behind a dialog still fades), and the light fades in where it stands.