Session Timeout

#Installation & usage

Use a Session Timeout where a session is sensitive enough to end by itself (banking, admin consoles, health records) and the person must be told before it does. Wrap the app: the signed-out page replaces it once the session ends.

'use client'

import { SessionTimeout } from '@youj/react'

export function Shell({ children }: { children: React.ReactNode }) {
  return (
    <SessionTimeout
      timeout={15 * 60_000}
      warnBefore={2 * 60_000}
      onExtend={() => fetch('/api/session/extend', { method: 'POST' })}
      onTimeout={() => fetch('/api/session/end', { method: 'POST' })}
      onSignOut={() => fetch('/api/session/end', { method: 'POST' })}
      onSignIn={() => location.assign('/sign-in')}
    >
      {children}
    </SessionTimeout>
  )
}

warnBefore defaults to 2 minutes, as the UK government's session-timeout pattern recommends. onTimeout fires when inactivity ends the session and onSignOut when the person chooses Sign out now; both usually end the session on the server. The clock only knows about the page: renewing the session server-side stays in onExtend.

What counts as activity. Pointer, key, scroll and a tab being shown again, throttled to once a throttle (1 second). Narrow it with events. Once the warning is up activity is ignored: only Stay signed in extends, so a stray mouse move can't hide a sign-out the person hasn't read.

Hidden tabs. The clock stores the time of the last activity and works out what is left from Date.now(), never by counting ticks. A tab that was asleep past the deadline signs out the moment it wakes.

Several tabs. Tabs on the same channel share one clock over a BroadcastChannel: activity or Stay signed in in any tab resets all of them, and a sign-out in one signs out the rest (without calling onTimeout again; the tab that ended it did). Give each app its own channel, or pass false to keep tabs apart. Where BroadcastChannel isn't available each tab times out on its own.

The page as a function. children may be a function of the session (status, secondsLeft, extend, simulateIdle…), for a header that shows the time left or a button that simulates idling in a demo.

#Description

#Code