The UX Problem
Users hate losing work to unexpected logouts. We needed session timeouts for security, but with a user-friendly experience.
The SessionGuard Component
Our solution wraps the entire control center layout:
// src/components/control/session-guard.tsx
export function SessionGuard({ children }: { children: ReactNode }) {
const [showWarning, setShowWarning] = useState(false);
const [countdown, setCountdown] = useState(120);
// Check session every minute
// Show warning at 2 minutes remaining
// Show urgent warning at 1 minute
// Redirect to sign-in when expired
}Features
Progressive Warnings
- 15-minute idle timeout
- Warning modal at 2 minutes remaining
- Urgent warning at 1 minute
- Countdown timer showing seconds
Session Extension
Users can click "Stay Signed In" to extend their session without losing work.
Activity Detection
Mouse movement, keyboard input, and clicks reset the idle timer.
Implementation Details
We use the session cookie's expiration to track timeout. The backend extends the session on each validated request, so active users never see the warning.
