Device sessions

Pro

Everywhere you're signed in, with how each session signed in (browser, device code, or a token from the environment), where, and when it was last used. Sign out one, or all but this one.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/device-sessions

Brings in: button, locale, ops, relative-time, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import * as React from "react"
import { DeviceSessions } from "@/components/device-sessions"
import type { DeviceSession } from "@/lib/ops"

const ago = (m: number) => new Date(Date.now() - m * 60_000).toISOString()

export default function Example() {
  const [sessions, setSessions] = React.useState<DeviceSession[]>([
    { id: "d1", device: "Chrome on macOS", method: "browser", location: "Boston, US", signedInAt: ago(60 * 24 * 3), lastActiveAt: ago(0), current: true },
    { id: "d2", device: "keel CLI on dev laptop", method: "device", location: "Boston, US", signedInAt: ago(60 * 24 * 9), lastActiveAt: ago(60 * 5) },
    { id: "d3", device: "CI: release pipeline", method: "environment", signedInAt: ago(60 * 24 * 20), lastActiveAt: ago(60 * 26) },
  ])
  return (
    <DeviceSessions
      className="max-w-xl"
      sessions={sessions}
      onSignOut={(id) => setSessions((s) => s.filter((x) => x.id !== id))}
      onSignOutOthers={() => setSessions((s) => s.filter((x) => x.current))}
    />
  )
}

<DeviceSessions>

Prop	Type	Default	Description
sessionsrequired	`DeviceSession[]`	—	Every signed-in session, including the current one.
onSignOut	`((id: string) => void) \| undefined`	—	Shows Sign out on each other session; called with its id.
onSignOutOthers	`(() => void) \| undefined`	—	Shows a button to sign out every session but this one, when there are others.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under deviceSessions in <LocaleProvider strings={{ … }}>; the table is exported as deviceSessionsStrings.

Key	English
label	Signed-in sessions
heading	Where you’re signed in
signOutOthers	{ one: "Sign out {count} other session", other: "Sign out {count} other sessions" }
thisSession	This session
methodBrowser	Browser sign-in
methodDevice	Device code (CLI)
methodEnvironment	Token from environment
activeNow	active now
lastUsed	last used {when}
signOut	Sign out
signOutDevice	Sign out {device}