SAML Redirect Login Block for React

Nothing redirects and nothing is sent. The steps, the addresses and the request are typed, and the page only walks through them; it says so in its polite status line. In a product, build a signed AuthnRequest on your server, redirect the browser to the identity provider's single sign-on URL with it (the HTTP-Redirect binding), receive the provider's signed response at your assertion consumer URL (the HTTP-POST binding), check the signature, the audience and the time conditions, and only then create the session. Replace the five steps' text with what your flow does and keep the same order.

No. Start redirect runs once: five beats of 700 ms, one step each, and the timer stops by itself after the last. Cancel stops it at once and returns to the start; the Step button does one step with no timer at all, for keyboard and screen reader users who want to read each one. When all five are done the button says Start again.

The service provider (this page) builds a request; the browser is sent to the identity provider with it; the person signs in there, by the provider's rules, with whatever second factor it demands; the provider posts a signed assertion back to the service provider's assertion consumer URL; and the service provider checks the signature and opens its own session. The Now at line follows: the sign-in page, the provider's address, the assertion consumer URL, then the home page.

It is the AuthnRequest the page would send: an ID, the issue time, the provider's destination, the assertion consumer URL, the binding for the answer and the issuer, which is the entity ID above. The disclosure opens it in a box that scrolls sideways and keeps its own direction in any language. All the addresses end in .example; none is real.

The steps sit above the facts, the descriptions under each step become screen reader text, the buttons stack under the steps so the main one is on the first screen, and the facts are trimmed to the entity ID, the assertion consumer URL and the provider. The steps, the buttons and the status are the same controls at every width.

Pressing Start redirect again would restart a run that is already going, so while it goes the button reads "Redirecting…" in a quiet style and ignores presses, but it is never disabled, so focus stays on it and nobody is stranded. Step and Cancel are quiet in the same way when they have nothing to do, and say why when pressed.