useSessionList

Access the full list of Client Sessions in your components.

Overview

The useSessionList hook provides access to all the sessions on the Client object. It returns an array of Session objects that have been registered on the client device.

Out of all the Session objects on the client, at least one will will be active. In a multi-session application there can be more than one active sessions, but in a single-session application there's only one active session. The rest of the sessions in the list can be in any of the rest session states.

Whatever the case, the Client.session attribute will hold the current user's active session.

Usage

Make sure you've followed the installation guide for Clerk React before running the snippets below.

The example below is very basic, but illustrates how to get a hold of all the sessions on a given Client. Please note that the useSessionList hook will throw an error unless your component is a descendant of the <ClerkLoaded/> component. The <SignedIn/> and <SignedOut/> components are already wrapped inside a <ClerkLoaded/> component, so any of these will be enough.

1
import { SignedIn, useSessionList } from "@clerk/clerk-react";
2

3
function App() {
4
  return (
5
    <SignedIn>
6
      <Activity />
7
    </SignedIn>
8
  );
9
}
10

11
function Activity() {
12
  const sessions = useSessionList();
13
  
14
  return (
15
    <div>
16
      Welcome back. You've been here 
17
      {sessions.length} times before.
18
    </div>
19
  );
20
}