Custom Branding Login Block for React

Everything. The three tenants are typed in TENANTS and the rail is a demo control that only exists so you can see them; sign in waits under a spinner for less than a second, then shows "You're signed in" and the tenant's name, and a polite status message says nothing was sent. For real, pick the tenant from the request (a subdomain, a path or an invitation link), load its settings from your API into the same fields, and send the tenant with the email and password to your auth endpoint where the code says so. Remove the rail.

Because a customer's colour dropped into your theme has to pass contrast in light and dark, in every preset, and that is hard to promise for colours you don't choose. This page is branded by what is theirs to supply and safe to render: a mark, a name, a sentence, a pattern and the methods. Your primary button stays the one coloured control. If a customer needs their colour, offer a short list of tested accents rather than free choice.

As a tile with the tenant's initials or a short word, in one of three shapes, set from shape. They are placeholders: where the code marks the icon slot, drop in the customer's logo, with their permission and under their brand rules. The tile is aria-hidden, and the tenant's name is in the heading as text.

All three pages are laid in one grid cell, the chosen one shown and the other two unseen and inert, so the cell is as tall as the tallest and choosing never moves anything. Typing doesn't carry over to another tenant, since each is its own page: choosing one clears the fields. A polite status message says which tenant is showing and how it signs people in.

Yes. Tab runs through the rail first, where the arrow keys move between tenants and one is always chosen, then the page: the provider, the email, the password, its show and hide toggle, Forgot password, Sign in and the quiet link. Enter in either field signs in. Each problem is tied to its field, focus goes to the first, and after signing in it moves to the result's heading while a polite status message says what happened.

The rail becomes a row of three tenants that scrolls sideways above the page, the pattern is dropped and the page fills the width, so Sign in ends on the first screen. The row is a demo control; remove it in your app and the page is the same.