Session Expired Error Block for React

Because this page explains, and the sign-in screens ask. Sign in again is a link to your sign-in route, where the login blocks live; putting a form here as well would give the visitor two places to sign in and make this page repeat them. The page's job is to say why the session ended, in times the visitor can check.

It is a demo control: in a real app the server tells you why the session ended and the page shows that one cause. Pressing an option changes the ruler, the legend and the explanation, and a polite status line says what the new cause is. Nothing is sent or stored; the three causes are the typed constant CAUSES.

From the times in each cause, typed as hh:mm in UTC: each is turned into minutes into the day, then into a percentage of the 90-minute axis, and written as a custom property that the bars read. So the bars, the brackets, the end tick and the legend can't disagree with the data. The bars glide when the cause changes, and stay put when reduced motion is on. The ruler is a drawing for the eyes (hidden from assistive technology); the legend and the explanation hold the same times in words.

No. The three explanations sit in one grid cell, the live one visible and the others invisible and inert, so the space is held for the longest; the legend always has three rows; and the idle bracket keeps its place when it isn't shown.

Thirty minutes, the typed constant IDLE_LIMIT. In the first cause the last activity is at 09:41 and the session ended at 10:11, exactly one idle limit later. Match it to your product's policy, and say it in the sentence the way this page does.

To #: point it at your sign-in route. It's a Shine Button with render set to an a element and nativeButton={false}. The page never calls history.back() or navigates by itself.