Designing session timeout and re-authentication UI in Figma: idle warnings, expired sessions, and step-up auth

Quick answer

Session timeout UI warns users before an idle session ends, handles expired sessions gracefully, and asks for step-up re-authentication before sensitive changes—distinct from the trusted-devices list in security settings. Design three surfaces: an idle warning modal with a visible countdown and “Stay signed in” action, a session expired full-page or modal that preserves return URLs, and a re-auth gate (password, passkey, or OTP) before payment edits, account deletion, or 2FA changes. Never silently drop users mid-checkout without saving context. Start from the Figma guides hub and pair with security settings, login, and checkout guides.

---

Who this is for

• Product designers building idle logout, banking-style re-auth, and checkout session recovery.
• Design system teams separating session expiry modals from login screens and MFA challenges.
• Engineers implementing sliding expiration, refresh tokens, activity pings, and sensitive-action guards.

---

Session UX surface comparison

Surface	Trigger	User goal
Idle warning modal	No activity for N minutes	Extend session without re-login
Session expired screen	Token invalid or idle timeout fired	Sign in again and return to task
Step-up re-auth modal	Sensitive action while session still valid	Prove identity again for one operation
Forced logout banner	Admin revoke, password change, sign-out-all	Explain why session ended
Background refresh	Silent token renewal	No UI—document in Dev Mode notes

Verdict: reuse login form components on the session-expired screen, but use a dedicated SessionTimeoutModal for idle warnings—different copy, different primary CTA, no “Create account” toggle.

---

Idle warning modal anatomy

Part	Spec	Notes
Headline	”Your session is about to expire”	Plain language
Countdown	MM:SS or circular progress	Updates every second
Body copy	”You’ve been inactive. Stay signed in to keep your cart.”	Context-aware
Primary CTA	”Stay signed in”	Extends session via activity ping
Secondary CTA	”Sign out now”	Clears session immediately
Dismiss on activity	Optional—keyboard/mouse resets timer	Document behavior

SessionTimeoutModal
├── Variant: context=default | checkout | admin
├── Variant: secondsRemaining=120 | 60 | 30
└── Layers:
    ├── WarningIcon
    ├── Headline
    ├── CountdownDisplay
    ├── ContextMessage
    ├── StaySignedInButton (primary)
    └── SignOutButton (secondary)

Show the modal before hard logout—common windows are 2 minutes warning after 15–30 minutes idle for ecommerce; shorter for banking or healthcare.

---

Session expired screen

When the session is already invalid, replace modal with a focused recovery screen.

Element	Spec
Headline	”Your session has expired”
Explanation	Why (idle, security, password changed)
Return context	”Sign in to return to checkout” + step indicator preserved visually
Auth form	Reuse AuthForm from login guide
Guest path	”Continue as guest” when checkout allows
Cart preservation note	”Your cart is saved for 7 days”

SessionExpiredScreen
├── Variant: returnUrl=checkout | account | default
├── Variant: authMode=password | passkey | social
└── Layers:
    ├── ExpiredIllustration (optional)
    ├── Headline
    ├── ReturnContextBanner
    ├── AuthForm (compact)
    └── GuestCheckoutLink (conditional)

Do not send users to marketing homepage without explanation—that spikes support tickets and abandoned carts.

---

Step-up re-authentication (sensitive actions)

Re-auth while the session is still valid differs from full session expiry.

Action	Re-auth method	UI pattern
Change password	Current password	Inline form on security page
Add/remove payment method	Password or OTP	Modal before save
Disable 2FA	Password + TOTP	Multi-step modal
Delete account	Password + OTP	See privacy settings
Export personal data	Password or email link	Confirm modal
Change primary email	OTP to old + new email	Two-step verify

StepUpReAuthModal
├── Variant: method=password | otp | passkey
├── Variant: action=changePayment | disableMfa | deleteAccount
└── Layers:
    ├── ActionSummary ("Confirm it's you")
    ├── ReAuthFields
    ├── ErrorMessage
    ├── ConfirmButton
    └── CancelButton

Place re-auth immediately before the destructive or sensitive submit—not on page load.

---

Checkout-specific session rules

Scenario	Design requirement
Idle during checkout	Warning mentions cart and address will be kept
Expired at payment step	Return to same checkout step after login
Guest checkout	Session tied to cart token—copy explains merge on login
Payment in progress	Never interrupt 3-D Secure or processor modal
Tab backgrounded (mobile)	Optional shorter idle on payment pages

Link to guest checkout when login merges guest cart into account.

---

Countdown and timer states

State	UI
Warning visible	Modal blocks interaction until choice or timeout
User clicks Stay signed in	Modal closes; reset idle clock; optional success toast
Timer hits zero	Transition to session expired or auto sign-out
User clicks Sign out	Immediate logout; redirect to home or login
Network error on extend	Inline error “Could not refresh session—sign in again”

Use aria-live="polite" on countdown for screen readers—announce at 60s, 30s, 10s only to avoid noise.

---

Relationship to trusted devices

The security settings trusted devices list shows active sessions users can revoke manually. Session timeout UI handles automatic expiry from inactivity.

Feature	Trusted devices list	Session timeout UI
User intent	Review and revoke sessions	Respond to idle or expiry
Timing	Anytime in settings	During active use
Copy focus	Device name, last active	Countdown, stay signed in
Overlap	Revoked session → forced logout banner	Same banner component

Share a ForcedLogoutBanner when admin or “sign out everywhere” ends the session mid-task.

---

Mobile layout

Pattern	Spec
Idle modal	Bottom sheet on mobile; full-width CTAs
Countdown	Large numeric timer—min 32px
Session expired	Full-screen; sticky sign-in button
Re-auth modal	Use passkey button when available
Checkout	Do not cover payment WebView

Test app switcher behavior—users idle while reading email; warning should appear on return.

---

Handoff checklist

Item	Dev Mode annotation
Idle threshold	e.g. 25 min idle → 2 min warning
Activity events	mouse, key, scroll, touch reset timer
Extend endpoint	POST /session/extend on Stay signed in
Return URL	?redirect= preserved through expired flow
Step-up scope	Single action token TTL 5 min
Hard logout	Clear cart rules documented
Concurrent tabs	Sync logout via storage event
a11y	Focus trap in modal; Esc does not dismiss without action policy

Document whether Stay signed in requires network or only client-side timer reset.

---

Common mistakes

Mistake	Why it hurts	Fix
Same UI as login page	Users think account was deleted	Distinct expired copy + return context
No warning before logout	Lost checkout work	Always show countdown modal
Re-auth on page load	Friction on every visit	Gate only sensitive submits
Interrupt 3DS flow	Payment failures	Pause idle timer during processor steps
Silent redirect to home	Confusion and abandonment	Session expired screen with return URL
Infinite “Stay signed in” clicks	Security theater	Rate-limit extends; max session age
Different OTP UI than MFA	Inconsistent UX	Reuse OTP input
No copy for password-change logout	Users think bug	Forced logout banner with reason

---

Recommended workflow

1. Define idle policy with engineering (warning duration, max session age).
2. Design SessionTimeoutModal with countdown and two CTAs.
3. Design SessionExpiredScreen reusing AuthForm with return banner.
4. Add StepUpReAuthModal variants for payment, MFA, and delete flows.
5. Spec checkout idle copy and payment-step exceptions.
6. Link forced logout to trusted-devices revoke and password change emails.
7. Prototype idle → warning → stay signed in → continue checkout on mobile.
8. Annotate activity events and token refresh in Dev Mode.

---

FAQ

How long should idle timeout be?

Ecommerce: 20–30 min idle with 2 min warning is common. Finance/health: shorter. Align with legal and fraud teams—not design alone.

Warn on every tab or only active tab?

Only the visible tab should show the modal; background tabs sync on logout. Note multi-tab behavior in handoff.

Passkeys for step-up re-auth?

Yes when the user has a passkey—offer “Confirm with passkey” as primary over password on supported browsers.

Session expired during OTP entry?

Preserve OTP screen state where possible; extend session when user requests new code if policy allows.

Same modal for staff admin tools?

Use context=admin variant with stricter copy and shorter timers; link to account dashboard patterns for consumer vs admin.

---

Next steps

• Design two-factor authentication and security settings UI in Figma — trusted devices and sign-out-all
• Design login, registration, and password recovery UI in Figma — reuse AuthForm on expired screen
• Design passkeys and passwordless login UI in Figma — step-up with passkey
• Design privacy settings and data management UI in Figma — re-auth before delete/export
• Design shopping cart and checkout UI in Figma — checkout session preservation