Docs

useSessionList()

The useSessionList() hook returns an array of Session objects that have been registered on the client device.

useSessionList() returns

  • Name
    isLoaded
    Type
    boolean
    Description

    A boolean that is set to false until Clerk loads and initializes.

  • Name
    sessions
    Type
    Session[]
    Description

    Holds an array of Session objects that have been registered on the client device.

  • Name
    session
    Type
    Session | string | null
    Description

    The session resource or session ID (string version) to be set as active. If null, the current session is deleted.

  • Name
    organization
    Type
    Organization | string | null
    Description

    The organization resource or organization ID (string version) to be set as active in the current session. If null, the currently active organization is removed as active.

  • Name
    beforeEmit?
    Type
    (session?: Session | null) => void | Promise<any>
    Description

    Callback run just before the active session and/or organization is set to the passed object. Can be used to hook up for pre-navigation actions.

How to use the useSessionList() hook

The following example demonstrates how to use the useSessionList() hook to retrieve a list of sessions that have been registered on the client device. The isLoaded property is used to handle the loading state, and the sessions property is used to display the number of times the user has visited the page.

home.tsx
import { useSessionList } from "@clerk/clerk-react";

export default function Home() {
  const { isLoaded, sessions } = useSessionList();

  if (!isLoaded) {
    // handle loading state
    return null;
  }
  return (
    <div>
      <p>Welcome back. You have been here
      {sessions.length} times before.
      </p>
    </div>
  )
}

Feedback

What did you think of this content?