Read current session data
A page needs to show account-specific information after authentication resolves.
Clerk · Hook
useSession
useSession() gives a React component the current Clerk session, authentication-loading state, sign-in state, and active-session helpers. Check loading and sign-in status before accessing session properties.
How it works
Call useSession() in a React component to obtain Clerk's loading state, sign-in state, current Session object, and helpers for changing the active session. Render session data only after loading completes and the user is signed in.
Syntax
const { isLoaded, session, isSignedIn } = useSession()Returns
An object containing isLoaded, isSignedIn, session, and helpers for setting the active session; session is undefined when there is no current session.
Key points
- useSession() exposes the authenticated user's current Session object to a React component.
- The hook also supplies helpers that support changing which session is active.
- Use isLoaded to decide whether Clerk has resolved the current authentication state.
- isLoaded begins false and changes to true after Clerk finishes its initial load.
- A Session exposes lastActiveAt, which can be used to show when the session was most recently active.
Common mistakes
- Do not treat isLoaded as permanently true; it can become false during authentication-state updates such as organization switching.
- session can be undefined, so access its properties only after confirming the user is signed in and Clerk has loaded.
Example: Display the active session
import { useSession } from '@clerk/react'
export default function Home() {
const { isLoaded, session, isSignedIn } = useSession()
if (!isLoaded) return <div>Loading...</div>
if (!isSignedIn) return <div>Sign in to view this page</div>
return <div>This session has been active since {session.lastActiveAt.toLocaleString()}</div>
}Wait for Clerk to load, reject signed-out users, then display the authenticated session's last-active time.
When to use it
Gate authenticated UI
A component must avoid displaying protected content to signed-out users.
Handle auth transitions
An interface needs to respond while Clerk loads or updates authentication state.
Interview questions
QWhat does useSession() provide?
useSession() exposes the current user's Session object together with helpers for setting the active session. It also returns isLoaded and isSignedIn so a component can handle loading and unauthenticated states before reading session data.
Follow-up: What should render while authentication state is unresolved? Return a loading UI until isLoaded is true, rather than assuming session is available.
QHow should isLoaded be handled?
isLoaded indicates whether Clerk has finished loading the current authentication state. It starts false, becomes true after loading, and may become false again while authentication state changes.
Follow-up: When might it revert to false? For example, while switching organizations through setActive().
QHow can a component safely use the returned session?
The hook returns the current session and isSignedIn. After checking both loading and sign-in state, a component can read Session properties such as lastActiveAt.
Follow-up: Why check isSignedIn before reading session? The session value may be undefined when no user is signed in.
Related
SessionsetActive()isLoadedisSignedIn