Session Timeout

Automatic session expiry.

html

<div class="timeout" data-seconds="60" data-urgent="false" style="--accent:#E8A020;" role="alertdialog" aria-label="You’re about to be signed out">
  <p class="timeout__heading">You’re about to be signed out</p>
  <p class="timeout__reason">You’ll be signed out for your security after 15 minutes of inactivity.</p>
  <p class="timeout__count"><span class="timeout__30">Signing out in <strong>0:30</strong></span><span class="timeout__60">Signing out in <strong>1:00</strong></span></p>
  <div class="timeout__actions">
    <button type="button" class="timeout__extend">Stay signed in</button>
    <button type="button" class="timeout__out">Sign out now</button>
  </div>
</div>
<style>
.timeout { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 320px; padding: 20px; border-radius: 14px; box-sizing: border-box; border: 1.5px solid var(--accent); }
.timeout[data-urgent="true"] { border-color: #D64545; background: #FBEAEA; }
.timeout__heading { margin: 0 0 6px; font-weight: 700; }
.timeout__reason { margin: 0 0 12px; font-size: 13px; color: #24143099; }
.timeout__count { margin: 0 0 16px; font-size: 13px; }
.timeout__30, .timeout__60 { display: none; }
.timeout[data-seconds="30"] .timeout__30 { display: inline; }
.timeout[data-seconds="60"] .timeout__60 { display: inline; }
.timeout__actions { display: flex; gap: 10px; }
.timeout__extend, .timeout__out { flex: 1; padding: 9px; border-radius: 8px; font-weight: 700; cursor: pointer; font: inherit; }
.timeout__extend { background: var(--accent); border: none; color: #241430; }
.timeout[data-urgent="true"] .timeout__extend { background: #D64545; color: #FAF7F2; }
.timeout__out { background: transparent; border: 1.5px solid #24143030; color: #241430; }
</style>

tailwind

<div class="w-[320px] p-5 rounded-2xl box-border border-[1.5px] font-sans text-sm text-[#241430] bg-[#FAF7F2] timeout-tw" data-seconds="60" data-urgent="false" style="border-color:#E8A020" role="alertdialog" aria-label="You’re about to be signed out">
  <p class="m-0 mb-1.5 font-bold">You’re about to be signed out</p>
  <p class="m-0 mb-3 text-[13px] text-[#241430]/60">You’ll be signed out for your security after 15 minutes of inactivity.</p>
  <p class="m-0 mb-4 text-[13px]"><span class="timeout-tw-30">Signing out in <strong>0:30</strong></span><span class="timeout-tw-60">Signing out in <strong>1:00</strong></span></p>
  <div class="flex gap-2.5">
    <button type="button" class="timeout-tw-extend flex-1 py-2.5 rounded-lg font-bold cursor-pointer border-none text-[#241430]" style="background:#E8A020">Stay signed in</button>
    <button type="button" class="flex-1 py-2.5 rounded-lg font-bold cursor-pointer bg-transparent border-[1.5px] border-[#24143030] text-[#241430]">Sign out now</button>
  </div>
</div>
<style>
.timeout-tw-30, .timeout-tw-60 { display: none; }
.timeout-tw[data-seconds="30"] .timeout-tw-30 { display: inline; }
.timeout-tw[data-seconds="60"] .timeout-tw-60 { display: inline; }
.timeout-tw[data-urgent="true"] { border-color: #D64545 !important; background: #FBEAEA; }
.timeout-tw[data-urgent="true"] .timeout-tw-extend { background: #D64545 !important; color: #FAF7F2; }
</style>

react

export function SessionTimeout({
  heading = "You’re about to be signed out",
  reason = "for your security after 15 minutes of inactivity",
  secondsLeft = "60",
  urgent = false,
  accent = "#E8A020",
}) {
  return (
    <div role="alertdialog" aria-label={heading}
      style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 320, padding: 20, borderRadius: 14, boxSizing: "border-box", border: `1.5px solid ${urgent ? "#D64545" : accent}` }}>
      <p style={{ margin: "0 0 6px", fontWeight: 700 }}>{heading}</p>
      <p style={{ margin: "0 0 12px", fontSize: 13, color: "#24143099" }}>You’ll be signed out {reason}.</p>
      <p style={{ margin: "0 0 16px", fontSize: 13 }}>Signing out in <strong>{secondsLeft === "30" ? "0:30" : "1:00"}</strong></p>
      <div style={{ display: "flex", gap: 10 }}>
        <button type="button" style={{ flex: 1, padding: 9, borderRadius: 8, fontWeight: 700, cursor: "pointer", font: "inherit", background: accent, border: "none", color: "#241430" }}>Stay signed in</button>
        <button type="button" style={{ flex: 1, padding: 9, borderRadius: 8, fontWeight: 700, cursor: "pointer", font: "inherit", background: "transparent", border: "1.5px solid #24143030", color: "#241430" }}>Sign out now</button>
      </div>
    </div>
  );
}