Session Timeout

Practical patterns for warning before logout and protecting work in progress.

01 — Foundation

Timeouts protect users — warn before they bite

Sudden logout without warning destroys trust and unfinished work.

Session timeouts exist for security. The interface job is to warn early enough that people can extend their session or save work — not surprise them with a blank login screen mid-sentence.

02 — Warning

The warning dialog

Give time, clear choices, and accessible focus management.

  • warn before expiry — “You will be signed out in 2 minutes”
  • primary action to stay signed in; secondary to sign out now if offered
  • use native dialog with focus trap — see Modal / Dialog
  • do not rely on colour alone — readable text and visible countdown

03 — Work

Protect in-progress work

Security should not silently discard forms and drafts.

  • autosave or draft persistence where losing work would be costly — see Autosave
  • after timeout, return users near where they left off when safe
  • explain what happened on return — “Your session expired. Sign in to continue.”

04 — Accessibility

Timing and assistive technology

Countdowns and dialogs must be perceivable without mouse hover.

  • announce the warning to screen readers when the dialog opens
  • respect user needs — avoid resetting timers on every minor pointer move unless policy requires it
  • keyboard access for extend and dismiss actions

05 — Review

Before you approve

A short checklist for session timeout UX in code review.

  • users receive a clear warning with time to act
  • extend session works reliably; focus is managed in the dialog
  • work loss is minimised; post-timeout messaging is specific