AddThisFeature

Session Timeout Warning

Warn people before an idle session expires, instead of losing their work.

moderate Security & Reliability

What it adds

A countdown dialog that appears before an idle session ends, with an explicit way to stay signed in.

What your agent is told to do

5
  1. 1

    Track genuine user activity — clicks, keystrokes, navigation — and show a warning dialog a meaningful interval before the session would expire.

  2. 2

    Show a live countdown and a button that extends the session by making a real request to the server, not by resetting a local timer.

  3. 3

    Synchronise the timer and the eventual sign-out across every open tab, so extending in one tab clears the warning in all of them.

  4. 4

    On expiry, preserve the state of any open form and offer to restore it after the user signs back in.

  5. 5

    Do NOT count background polling, autosave, or websocket traffic as user activity. That is how a session stays alive on an unattended machine, which is the exact thing the timeout exists to prevent.

Edge cases it handles

6
  • The server can expire the session before the local countdown finishes — clock skew and restarts both cause it. Handle a 401 arriving early without showing a stale countdown.
  • A user who returns after the laptop slept must see the expired state, not a countdown resumed from where it paused.
  • If policy requires explicit reauthentication, extending must prompt for a password rather than silently renewing.
  • The warning must not steal focus from an input mid-typing, and Escape must not be the thing that lets the session lapse.
  • Announce the countdown to screen readers once, not on every tick.
  • Sign-out must clear the restored-work buffer on a shared machine.

Definition of done

8
  • A countdown warning appears before an idle session expires.
  • Extending the session performs a real server round-trip.
  • The warning and the sign-out are synchronised across tabs.
  • Background requests do not extend the session.
  • Unsaved form state is preserved and offered back after reauthentication.
  • Early server-side expiry is handled without a stale countdown.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.