UX Patterns Guide
UI + UX Trust, Safety, And Privacy established

Session timeout

Terminate authenticated interaction, hide sensitive content, explain that the session ended, show only safe recovery evidence, preserve allowed draft or return references, route through sign-in or reauthentication, and restore the intended task only after the new session is confirmed.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • An authenticated session has expired or been terminated while the user was on a protected task.
  • The product needs to protect private content on shared or unattended devices.
  • A return target, saved draft, transaction reference, or support-safe recovery path can reduce user effort after reauthentication.
  • Expired credentials would otherwise produce confusing permission, retry, or server-error states.

Avoid when

  • The session is still active and users can act before expiry; use session timeout warning.
  • The user never had an authenticated session in this flow; use sign in or login.
  • The user is authenticated but lacks a role or grant; use permission denied state.
  • The primary problem is a failed autosave with an active or restorable session; use autosave recovery.
  • The failure is an outage, offline state, or server error unrelated to authentication validity.

Problem it prevents

After a session expires, products often leak private content, preserve stale authenticated controls, mislabel the state as permission or network failure, lose return context, or force users to restart work that could have been preserved safely.

Pattern anatomy

What a strong implementation has to make clear

User need

The user had an authenticated session that has already ended because of inactivity, absolute lifetime, logout, reauthentication policy, identity-provider termination, risk event, or session revocation.

Pattern promise

Terminate authenticated interaction, hide sensitive content, explain that the session ended, show only safe recovery evidence, preserve allowed draft or return references, route through sign-in or reauthentication, and restore the intended task only after the new session is confirmed.

Required state

Expired session state with private content hidden.

Recovery path

The timeout overlay hides visually but private content remains in the DOM and accessible tree.

Access contract

Move focus to the timeout heading when protected content is replaced, and use text that says the session ended rather than relying on a lock icon.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A benefits form replaces private answers with Session ended after inactivity, shows reference SES-2048, says the draft was saved at 10:42, and offers Sign in to continue plus Start again.
  • A banking dashboard hides account balances after timeout, names the signed-out reason, clears action buttons, and returns to the transfer review only after reauthentication.
  • A user returns from a break, sees that their session ended, signs in again, and lands back on the same saved claim step with private fields restored only after authentication.
  • A shared-device user times out; the product hides the case details, clears unsafe actions, and leaves only a safe reference and sign-in route.
Weak implementation

Vague, hidden, hard to recover from

  • A modal says Timeout while the private page remains readable behind it.
  • The app shows Access denied with Retry, causing users to retry expired requests instead of signing in again.
  • A user comes back to a timed-out payment form, clicks Submit, and gets repeated server errors because expired controls stayed enabled.
  • A user signs in again after timeout and is dumped on a dashboard with no saved-task reference or way back to the interrupted work.
UI guidance
  • Show session timeout after the authenticated session has ended, with private content hidden, a clear reason such as inactivity or policy expiry, the last safe activity reference, and a primary sign-in or reauthentication path.
  • Separate recoverable task context from protected values: show safe identifiers, saved-draft status, return destination, and support reference without displaying private fields, tokens, account data, or stale authenticated controls.
UX guidance
  • Use session timeout when the session is no longer valid and the product must protect privacy while helping the user recover safely through sign-in, reauthentication, return-to-task restoration, or a saved-draft route.
  • Treat the timeout state as a security and continuity boundary: terminate authenticated actions, hide sensitive content, preserve allowed work references, and return users only after a fresh session is established.
Implementation contract

What the implementation must handle

States

  • Expired session state with private content hidden.
  • Inactivity timeout state with safe timestamp or duration explanation.
  • Absolute timeout or policy timeout state that requires reauthentication.
  • Signed-out recovery state with preserved return destination.

Interaction

  • The timeout state is driven by server or identity-provider session validity, not by a cosmetic client-only overlay.
  • When session validity fails, authenticated actions are stopped before they submit, download, export, preview, delete, approve, or mutate data.
  • Private content is hidden or cleared while preserving only safe recovery metadata such as reference, route, saved timestamp, or masked object name.
  • Sign in or reauthenticate creates a fresh session and validates whether the return target is still allowed before restoring content.

Accessibility

  • Move focus to the timeout heading when protected content is replaced, and use text that says the session ended rather than relying on a lock icon.
  • Do not expose hidden private values in accessible names, offscreen text, DOM-only labels, aria descriptions, or live-region messages.
  • Make Sign in again, Reauthenticate, Start again, Save-reference help, and safe exit controls reachable by keyboard in a predictable order.
  • After successful reauthentication, move focus to the restored task heading or the recovered-field status, not to the top of an unrelated landing page.

Review

  • Has the authenticated session already ended, or is this still a pre-expiry warning?
  • What private content must disappear immediately from the timed-out page?
  • Which safe reference, save timestamp, route, or draft identifier can be shown while signed out?
  • Which controls must be disabled or removed because they require an active session?
Interactive lab

Inspect the states before you copy the pattern

Recover from an already expired session

Move a session timeout state through expired, hidden private content, saved draft, reauthenticate, validate return, restored task, no recovery, start again, multiple-tab timeout, identity-provider timeout, and mobile compact states; compare with private leak, stale controls, access-denied copy, lost return, false saved, token log, and retry loop failures.

Session timeout
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Expired session state with private content hidden.

Keyboard / Access

Focus lands on the session-ended heading or primary sign-in action when the timeout state replaces a protected page.

Avoid Generating

Leaving the private page readable behind a timeout modal.
Evidence trail

Source-backed claims behind this guidance

NIST SP 800-63B Session Management

National Institute of Standards and Technology - checked

Supports inactivity timeout, overall timeout, termination, and reauthentication reset behavior.

Full agent/debug reference

Problem Context

  • The user had an authenticated session that has already ended because of inactivity, absolute lifetime, logout, reauthentication policy, identity-provider termination, risk event, or session revocation.
  • The current surface may contain private records, form answers, payments, admin actions, files, health data, financial data, or sensitive account state.
  • The product may be able to preserve a server-side draft, return URL, record reference, transaction reference, or local non-sensitive recovery note without keeping the expired session active.
  • The product must prevent stale submissions, stale downloads, stale previews, and privacy leaks while still making recovery understandable.

Selection Rules

  • Choose session timeout when the authenticated session has already expired or been terminated and the next valid path is sign-in, reauthentication, restart, or safe task restoration.
  • Use session timeout warning before expiry when users can still extend, save, sign out, or reauthenticate before the boundary is crossed.
  • Use sign in when the user begins unauthenticated access normally; use session timeout when an existing authenticated task was interrupted and needs a return target or saved-state explanation.
  • Use login for the credential-verification attempt and its outcomes; session timeout owns the expired-session screen before and after that attempt.
  • Use permission denied state only when the user is authenticated but lacks authorization; do not send expired sessions into request-access flows.
  • Use autosave recovery when the main issue is preserving failed or local-only work; session timeout may link to that recovery after reauthentication.
  • Hide private content, field values, thumbnails, account balances, comments, files, and action controls until the user reauthenticates.
  • Show safe context such as record type, masked account, draft timestamp, reference ID, or return destination when policy allows it.
  • Disable or remove stale authenticated controls; do not let Submit, Export, Delete, Approve, Download, or Pay fire against an expired session.
  • After successful reauthentication, restore the intended route, step, scroll position, focus target, and recoverable draft where policy permits.

Required States

  • Expired session state with private content hidden.
  • Inactivity timeout state with safe timestamp or duration explanation.
  • Absolute timeout or policy timeout state that requires reauthentication.
  • Signed-out recovery state with preserved return destination.
  • Saved draft available after timeout state.
  • No recoverable work state with honest restart path.
  • Reauthentication in progress state that does not reveal private data.
  • Reauthentication failed or canceled state that keeps the user signed out.
  • Restored task state after successful sign-in.
  • Multiple-tab or identity-provider timeout state where another session ended independently.

Interaction Contract

  • The timeout state is driven by server or identity-provider session validity, not by a cosmetic client-only overlay.
  • When session validity fails, authenticated actions are stopped before they submit, download, export, preview, delete, approve, or mutate data.
  • Private content is hidden or cleared while preserving only safe recovery metadata such as reference, route, saved timestamp, or masked object name.
  • Sign in or reauthenticate creates a fresh session and validates whether the return target is still allowed before restoring content.
  • Canceled or failed reauthentication leaves the user in a signed-out state with safe navigation, restart, or support routes.
  • Return restoration distinguishes server-saved work, local-only work, unrecoverable work, and policy-cleared work.
  • The page does not call the expired state permission denied, network error, not found, or service unavailable.

Implementation Checklist

  • Model expired authentication separately from unauthenticated first visit, authorization denial, network failure, and validation failure.
  • Store a safe return target, task reference, draft reference, and last confirmed save timestamp outside the expired session where policy allows.
  • Clear or hide sensitive DOM content, cached previews, media, inline files, and filled secret fields when session expiration is detected.
  • Intercept stale authenticated controls and redirect them to the timeout state instead of letting them retry with expired credentials.
  • Validate return targets after reauthentication to avoid open redirects, stale permissions, deleted objects, or cross-account restoration.
  • Support multiple tabs and federated identity sessions where one surface expires independently from another.
  • Log timeout shown, reauth started, reauth success, return restored, restart chosen, and abandoned recovery without logging private field values.
  • Test idle expiry, absolute expiry, identity-provider timeout, revoked session, back-button return, reload, mobile backgrounding, multiple tabs, failed reauth, canceled reauth, and shared-device privacy.

Common Generated-UI Mistakes

  • Leaving the private page readable behind a timeout modal.
  • Calling an expired session Access denied and offering request access.
  • Letting stale Submit, Export, Approve, Delete, Download, or Pay buttons remain active after timeout.
  • Dropping users on an unrelated dashboard after reauthentication even when a safe return target exists.
  • Promising that work is saved when only an expired client page still holds it.
  • Putting session tokens, raw URLs with secrets, form answers, or private object titles into timeout logs or support references.

Critique Questions

  • Has the authenticated session already ended, or is this still a pre-expiry warning?
  • What private content must disappear immediately from the timed-out page?
  • Which safe reference, save timestamp, route, or draft identifier can be shown while signed out?
  • Which controls must be disabled or removed because they require an active session?
  • After reauthentication, where should the user return and what data can be restored?
  • How does the state behave across refresh, back button, mobile backgrounding, and another tab ending the session?
Accessibility
  • Move focus to the timeout heading when protected content is replaced, and use text that says the session ended rather than relying on a lock icon.
  • Do not expose hidden private values in accessible names, offscreen text, DOM-only labels, aria descriptions, or live-region messages.
  • Make Sign in again, Reauthenticate, Start again, Save-reference help, and safe exit controls reachable by keyboard in a predictable order.
  • After successful reauthentication, move focus to the restored task heading or the recovered-field status, not to the top of an unrelated landing page.
  • Describe whether work was saved, local-only, unavailable, or cleared in visible text and screen-reader-readable status.
  • Avoid countdown-style repeated announcements after the session is already ended; announce stable signed-out and restoration outcomes.
Keyboard Behavior
  • Focus lands on the session-ended heading or primary sign-in action when the timeout state replaces a protected page.
  • Tab order moves through sign-in, reauthentication, saved-draft recovery, start-again, support, and safe exit actions without reaching hidden authenticated controls.
  • Enter or Space activates sign-in, reauthenticate, start again, and support controls using native button or link semantics.
  • Back and refresh keep private content hidden until session validity is restored.
  • Canceled reauthentication returns focus to the timeout heading and keeps recovery actions visible.
  • After restoration, focus returns to the interrupted task step or a status region that confirms what was restored.
Variants
  • Idle timeout signed-out state
  • Absolute timeout reauthentication state
  • Session revoked state
  • Identity-provider timeout state
  • Shared-device privacy timeout
  • Timed-out saved draft return
  • Timed-out no-recovery restart
  • Multiple-tab session ended
  • Mobile background timeout
  • Timed-out protected action interception

Verification

Last verified: