Build a session expiration warning

Warn near expiry, extend safely, and sign out exactly once at the deadline.

MediumReact Session Management

50 min0% acceptance

Description

Build SessionExpiryWarning from an absolute expiry time and injected clock scheduler. Display an accurate countdown only inside the warning window, perform one extend request at a time, adopt a successful new deadline, recover from extension errors, and automatically or manually sign out exactly once.

Requirements

Export a SessionExpiryWarning component from src/App.tsx.
Show the warning only when remaining time is positive and within warningMs.
Derive a nonnegative countdown from the injected clock without cumulative timer drift.
Disable duplicate extension requests while one is pending.
Adopt the validated deadline returned by a successful extension.
Report extension failure and keep the original deadline active so the user can retry.
Call signOut exactly once when the active deadline is reached.
A sign-out action cancels countdown work and invokes signOut once.
Cancel scheduled countdown callbacks on deadline changes and unmount.

Warning threshold

Input

Five-minute warning; clock moves from 5:01 to 5:00 remaining

Expected output

The dialog appears at 5:00 with an accessible countdown

Explanation

Visibility derives from the current deadline and clock.

Extended session

Input

Extend resolves with a deadline 30 minutes later

Expected output

The warning closes and countdown uses the new deadline

Explanation

A successful extension replaces the prior expiry.

Constraints

Use epoch milliseconds
Use only clock.now and clock.schedule
Reject extension deadlines that are not later than the current clock

Hints

Hint 1

Store the active deadline, not a decrementing seconds counter.

Hint 2

Schedule the next boundary then recompute from now when it fires.

Hint 3

Guard the terminal sign-out path with a ref shared by manual and automatic actions.

Reactsessionscountdown