Reactで、自動ログアウトの前に残り時間を知らせて延長する方法

import { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react';

export type Phase = 'active' | 'warning' | 'expired';

type Options = {
  timeoutMs: number; // 操作がないまま、この時間がたったらログアウトする
  warningMs: number; // ログアウトのこの時間前から、警告を出す
  onTimeout: () => void;
  storageKey?: string;
};

// 操作とみなすイベント
const ACTIVITY_EVENTS = ['pointerdown', 'pointermove', 'keydown', 'wheel'] as const;

// localStorage が使えないときは、このタブの中だけで動く
function readShared(key: string): number | null {
  try {
    const n = Number(localStorage.getItem(key) ?? NaN);
    return Number.isFinite(n) ? n : null; // 値がないときや数値でないときは使わない
  } catch {
    return null;
  }
}
function writeShared(key: string, deadline: number) {
  try {
    localStorage.setItem(key, String(deadline));
  } catch {}
}

export function useIdleTimeout({ timeoutMs, warningMs, onTimeout, storageKey = 'session-deadline' }: Options) {
  const [phase, setPhase] = useState<Phase>('active');
  const [remainingSec, setRemainingSec] = useState(0);
  const deadlineRef = useRef(0); // ログアウトする時刻（Date.now() の値）
  const phaseRef = useRef<Phase>('active');
  const handleTimeout = useEffectEvent(onTimeout);

  // 期限を決め直し、ほかのタブにも知らせる
  const setDeadline = useCallback(
    (deadline: number) => {
      deadlineRef.current = deadline;
      writeShared(storageKey, deadline);
    },
    [storageKey],
  );

  // 今の時刻と期限の差から、状態を決め直す
  const check = useCallback(() => {
    if (phaseRef.current === 'expired') return;
    const shared = readShared(storageKey);
    if (shared !== null) deadlineRef.current = shared; // ほかのタブで延びていれば合わせる
    const remaining = deadlineRef.current - Date.now();
    const next: Phase = remaining <= 0 ? 'expired' : remaining <= warningMs ? 'warning' : 'active';
    phaseRef.current = next;
    setPhase(next);
    setRemainingSec(next === 'warning' ? Math.ceil(remaining / 1000) : 0);
  }, [storageKey, warningMs]);

  useEffect(() => {
    if (phase === 'expired') handleTimeout();
  }, [phase]);

  useEffect(() => {
    setDeadline(Date.now() + timeoutMs); // 開いた時点を、最初の操作とみなす
    check();
    const id = setInterval(check, 500);

    const onActivity = () => {
      if (phaseRef.current !== 'active') return; // 警告中の操作では延ばさない
      const next = Date.now() + timeoutMs;
      if (next - deadlineRef.current < 1000) return; // 書き込みは1秒に1回まで
      setDeadline(next);
    };
    // バックグラウンドのタブではタイマーが遅れるので、戻ってきたらすぐ確かめる
    const onVisible = () => {
      if (document.visibilityState === 'visible') check();
    };
    for (const type of ACTIVITY_EVENTS) window.addEventListener(type, onActivity, { passive: true });
    document.addEventListener('visibilitychange', onVisible);
    return () => {
      clearInterval(id);
      for (const type of ACTIVITY_EVENTS) window.removeEventListener(type, onActivity);
      document.removeEventListener('visibilitychange', onVisible);
    };
  }, [check, setDeadline, timeoutMs]);

  const extend = useCallback(() => {
    if (phaseRef.current === 'expired') return;
    setDeadline(Date.now() + timeoutMs);
    check();
  }, [check, setDeadline, timeoutMs]);

  const logout = useCallback(() => {
    setDeadline(0); // 期限を過去にする。ほかのタブも次の確認でログアウトする
    check();
  }, [check, setDeadline]);

  return { phase, remainingSec, extend, logout };
}

開いた直後                    9:00:00.0 | マイページ | ダイアログ: 閉じている | 保存された期限 9:10:00.0
15分飛ばした                  9:15:00.0 | ログアウトしました | ダイアログ: 閉じている | 保存された期限 9:10:00.0
onTimeout が呼ばれた回数: 1
ダイアログの開閉: []

開いた直後                        9:00:00.0 | マイページ | ダイアログ: 閉じている | 保存された期限 9:10:00.0
8分59.5秒後                     9:08:59.5 | マイページ | ダイアログ: 閉じている | 保存された期限 9:10:00.0
9分後                          9:09:00.0 | マイページ | ダイアログ: 開いている（あと 60 秒） | 保存された期限 9:10:00.0
  フォーカスのある要素: ログインを続ける
警告中にマウスとキーを操作                9:09:00.0 | マイページ | ダイアログ: 開いている（あと 60 秒） | 保存された期限 9:10:00.0
さらに30秒後                      9:09:30.0 | マイページ | ダイアログ: 開いている（あと 30 秒） | 保存された期限 9:10:00.0
「ログインを続ける」を押した               9:09:30.0 | マイページ | ダイアログ: 閉じている | 保存された期限 9:19:30.0
8分59.5秒後                     9:18:29.5 | マイページ | ダイアログ: 閉じている | 保存された期限 9:19:30.0
さらに0.5秒後                     9:18:30.0 | マイページ | ダイアログ: 開いている（あと 60 秒） | 保存された期限 9:19:30.0
Esc キーを押した                   9:18:30.0 | マイページ | ダイアログ: 閉じている | 保存された期限 9:28:30.0
9分59.5秒後（何もしない）              9:28:29.5 | マイページ | ダイアログ: 開いている（あと 1 秒） | 保存された期限 9:28:30.0
さらに0.5秒後                     9:28:30.0 | ログアウトしました | ダイアログ: 閉じている | 保存された期限 9:28:30.0
onTimeout が呼ばれた回数: 1
ダイアログの開閉: 9:09:00.0 開いた / 9:09:30.0 閉じた / 9:18:30.0 開いた / 9:18:30.0 閉じた / 9:27:30.0 開いた / 9:28:30.0 閉じた

3分後                            9:03:00.0 | マイページ | ダイアログ: 閉じている | 保存された期限 9:10:00.0
3秒間マウスを150回動かした                9:03:03.0 | マイページ | ダイアログ: 閉じている | 保存された期限 9:13:02.0
  その間の localStorage への書き込み: 3 回
さらに8分58.5秒後                    9:12:01.5 | マイページ | ダイアログ: 閉じている | 保存された期限 9:13:02.0
さらに0.5秒後                       9:12:02.0 | マイページ | ダイアログ: 開いている（あと 60 秒） | 保存された期限 9:13:02.0

import { useEffect, useRef } from 'react';

type Props = {
  open: boolean;
  remainingSec: number;
  onExtend: () => void;
  onLogout: () => void;
};

export function TimeoutDialog({ open, remainingSec, onExtend, onLogout }: Props) {
  const ref = useRef<HTMLDialogElement>(null);

  useEffect(() => {
    const dialog = ref.current!;
    if (open && !dialog.open) dialog.showModal();
    if (!open && dialog.open) dialog.close();
  }, [open]);

  return (
    <dialog
      ref={ref}
      aria-labelledby="timeout-title"
      aria-describedby="timeout-desc"
      onCancel={(e) => {
        e.preventDefault(); // Esc キーでは閉じずに、延長として扱う
        onExtend();
      }}
    >
      <h2 id="timeout-title">まもなく自動でログアウトします</h2>
      <p id="timeout-desc">
        操作がないため、あと <strong className="sec">{remainingSec}</strong> 秒でログアウトします。
      </p>
      <button type="button" onClick={onExtend}>ログインを続ける</button>
      <button type="button" onClick={onLogout}>今すぐログアウト</button>
    </dialog>
  );
}

9分後                  9:09:00.0 | マイページ | ダイアログ: 開いている（あと 60 秒） | 保存された期限 9:10:00.0
Esc キーを押した           9:09:00.0 | マイページ | ダイアログ: 閉じている | 保存された期限 9:19:00.0
さらに59.5秒後            9:09:59.5 | マイページ | ダイアログ: 閉じている | 保存された期限 9:19:00.0
さらに0.5秒後             9:10:00.0 | マイページ | ダイアログ: 閉じている | 保存された期限 9:19:00.0

9分後                  9:09:00.0 | マイページ | ダイアログ: 開いている（あと 60 秒） | 保存された期限 9:10:00.0
Esc キーを押した           9:09:00.0 | マイページ | ダイアログ: 閉じている | 保存された期限 9:10:00.0
さらに59.5秒後            9:09:59.5 | マイページ | ダイアログ: 閉じている | 保存された期限 9:10:00.0
さらに0.5秒後             9:10:00.0 | ログアウトしました | ダイアログ: 閉じている | 保存された期限 9:10:00.0

import { useState } from 'react';
import { TimeoutDialog } from './TimeoutDialog';
import { useIdleTimeout } from './useIdleTimeout';

function Session({ onTimeout }: { onTimeout: () => void }) {
  const { phase, remainingSec, extend, logout } = useIdleTimeout({
    timeoutMs: 10 * 60 * 1000,
    warningMs: 60 * 1000,
    onTimeout,
  });
  return (
    <main>
      <h1>マイページ</h1>
      <p>操作がないまま10分たつと、自動でログアウトします。</p>
      <TimeoutDialog open={phase === 'warning'} remainingSec={remainingSec} onExtend={extend} onLogout={logout} />
    </main>
  );
}

export function App() {
  const [loggedIn, setLoggedIn] = useState(true);
  if (!loggedIn) {
    return (
      <main>
        <h1>ログアウトしました</h1>
        <button type="button" onClick={() => setLoggedIn(true)}>もう一度ログイン</button>
      </main>
    );
  }
  return (
    <Session
      onTimeout={() => {
        console.log('onTimeout が呼ばれた');
        setLoggedIn(false);
      }}
    />
  );
}

2つのタブを開いた直後
  タブA 9:00:00.0 | マイページ | ダイアログ: 閉じている | 保存された期限 9:10:00.0
  タブB 9:00:00.0 | マイページ | ダイアログ: 閉じている | 保存された期限 9:10:00.0
5分後にタブAをクリックした（0.5秒後）
  タブA 9:05:00.5 | マイページ | ダイアログ: 閉じている | 保存された期限 9:15:00.0
  タブB 9:05:00.5 | マイページ | ダイアログ: 閉じている | 保存された期限 9:15:00.0
9分30秒後
  タブA 9:09:30.0 | マイページ | ダイアログ: 閉じている | 保存された期限 9:15:00.0
  タブB 9:09:30.0 | マイページ | ダイアログ: 閉じている | 保存された期限 9:15:00.0
14分後
  タブA 9:14:00.0 | マイページ | ダイアログ: 開いている（あと 60 秒） | 保存された期限 9:15:00.0
  タブB 9:14:00.0 | マイページ | ダイアログ: 開いている（あと 60 秒） | 保存された期限 9:15:00.0
タブAで「ログインを続ける」を押した（0.5秒後）
  タブA 9:14:00.5 | マイページ | ダイアログ: 閉じている | 保存された期限 9:24:00.0
  タブB 9:14:00.5 | マイページ | ダイアログ: 閉じている | 保存された期限 9:24:00.0
さらに9分後
  タブA 9:23:00.5 | マイページ | ダイアログ: 開いている（あと 60 秒） | 保存された期限 9:24:00.0
  タブB 9:23:00.5 | マイページ | ダイアログ: 開いている（あと 60 秒） | 保存された期限 9:24:00.0
タブAで「今すぐログアウト」を押した（0.5秒後）
  タブA 9:23:01.0 | ログアウトしました | ダイアログ: 閉じている | 保存された期限 0
  タブB 9:23:01.0 | ログアウトしました | ダイアログ: 閉じている | 保存された期限 0
onTimeout が呼ばれた回数: タブA 1 / タブB 1

開いた直後                  9:00:00.0 | マイページ | ダイアログ: 閉じている | 保存された期限 （localStorage が使えない）
9分後                    9:09:00.0 | マイページ | ダイアログ: 開いている（あと 60 秒） | 保存された期限 （localStorage が使えない）
「ログインを続ける」を押した         9:09:00.0 | マイページ | ダイアログ: 閉じている | 保存された期限 （localStorage が使えない）
8分59.5秒後               9:17:59.5 | マイページ | ダイアログ: 閉じている | 保存された期限 （localStorage が使えない）
さらに0.5秒後               9:18:00.0 | マイページ | ダイアログ: 開いている（あと 60 秒） | 保存された期限 （localStorage が使えない）
さらに60秒後                9:19:00.0 | ログアウトしました | ダイアログ: 閉じている | 保存された期限 （localStorage が使えない）
onTimeout が呼ばれた回数: 1