Session Expiry
The idle-timeout warning WCAG 2.2.1 asks for: warned, extendable, and not dismissable by accident.
- Feedback
- 1 file
- No extra npm packages
- Accessibility notes
pnpm dlx @dowel-ui/cli add session-expiryNo npm packages are needed beyond what Dowel already requires.
import { SessionExpiry } from "@/components/ui/session-expiry";<SessionExpiry>
| Prop | Type | Default |
|---|---|---|
expiresAt (required)When the session ends. Move it forward after a successful extend. | Date | — |
onExtend (required)Keep the session going. May return a promise; the button waits for it. | () => void | Promise<void> | — |
expiredActionWhat to offer once the session has ended: a sign-in link, usually. | ReactNode | — |
headingThe warning's heading. | string | "Your session is about to end" |
nowThe clock. Supply it to drive the countdown yourself, or in tests; omit and the component ticks once a second while mounted. | Date | — |
onExpireCalled once when the time runs out. | () => void | — |
onSignOutOffered as the other choice. Omit to offer only staying signed in. | () => void | — |
warnBeforeHow long before the end to warn, in milliseconds. Two minutes by default. | number | 120_000 |
childrenWhat is at stake, in the reader's language: "Unsaved edits will be lost." | ReactNode | — |
className | string | — |
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes