UI/UX: Design the session expiry warning and re-authentication experience

[Baskarayelu]

Description

The app includes components/SessionExpiryProvider.tsx and components/SessionExpiryNotification.tsx, but the visual and interaction design for warning users about an expiring session and guiding them to re-authenticate is unclear. For a financial product, a poorly designed session-expiry experience can interrupt a remittance mid-flow and erode trust. We need a designed warning (countdown, stay-signed-in action), an expired state, and a graceful re-auth path that preserves the user's context where possible. Reference docs/session-expiry-integration-example.md and docs/frontend-session-handling.md.

Requirements and context

• UI/UX scope only.
• Reference components/SessionExpiryProvider.tsx, components/SessionExpiryNotification.tsx, docs/session-expiry-integration-example.md, docs/frontend-session-handling.md.
• Design the "session expiring" warning with countdown and "stay signed in."
• Design the "session expired" state and the re-auth entry point.
• Define non-intrusive placement that does not block an in-progress send.

Suggested execution

• Branch: uiux/session-expiry-experience
• Mock the warning, expired, and re-auth states.
• Document placement and timing relative to in-progress flows.
• Provide copy that is clear and reassuring.

Test and commit

• Visual QA at 375px and 1280px.
• npm run build
• npm run lint
• a11y: warning announced via live region, focus to primary action, dismissible.

Example commit message

feat(uiux): design session expiry warning and re-auth experience

Guidelines

• Document timing and placement decisions.
• Keep the warning consistent with the notification/toast patterns.
• Timeframe: 96 hours