Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

useUser()

The useUser() hook is a convenient way to access the current User data where you need it. This hook provides the user data and helper methods to manage the current active session.

Usage

Note that your component must be a descendant of <ClerkProvider />.

Retrieve the current user data

pages/index.tsx
import { useUser } from "@clerk/nextjs"; export default function Home() { const { isSignedIn, user, isLoaded } = useUser(); if (!isLoaded) { return null; } if (isSignedIn) { return <div>Hello {user.fullName}!</div>; } return <div>Not signed in</div>; }
home.tsx
import { useUser } from "@clerk/clerk-react"; export default function Home() { const { isSignedIn, user, isLoaded } = useUser(); if (!isLoaded) { return null; } if (isSignedIn) { return <div>Hello {user.fullName}!</div>; } return <div>Not signed in</div>; }

Update the current user data

app/page.tsx
import { useUser } from "@clerk/nextjs"; export default function Home() { const { user } = useUser(); if (!user) return null; const updateUser = async () => { await user.update({ firstName: "John", lastName: "Doe", }); }; return ( <> <button onClick={updateUser}>Click me to update your name</button> <p>user.firstName: {user?.firstName}</p> <p>user.lastName: {user?.lastName}</p> </> ); }
home.tsx
import { useUser } from "@clerk/clerk-react"; export default function Home() { const { user } = useUser(); if (!user) return null; const updateUser = async () => { await user.update({ firstName: "John", lastName: "Doe", }); }; return ( <> <button onClick={updateUser}>Click me to update your name</button> <p>user.firstName: {user?.firstName}</p> <p>user.lastName: {user?.lastName}</p> </> ); }

Reload user data

If you need to retrieve the latest user data after updating the user elsewhere, use the user.reload() method.

app/page.tsx
import { useUser } from "@clerk/nextjs"; export default function Home() { const { user } = useUser(); if (!user) return null; const updateUser = async () => { // updated data via an api point const updateMeta = await fetch("/api/updateMetadata"); if (!updateMeta.message == "success") { throw new Error("Error updating"); } user.reload(); }; return ( <> <button onClick={updateUser}>Click me to update your metadata</button> <p>user role: {user?.publicMetadata.role}</p> </> ); }
home.tsx
import { useUser } from "@clerk/clerk-react"; export default function Home() { const { user } = useUser(); if (!user) return null; const updateUser = async () => { // updated data via an api point const updateMeta = await fetch("/api/updateMetadata"); if (!updateMeta.message == "success") { throw new Error("Error updating"); } user.reload(); }; return ( <> <button onClick={updateUser}>Click me to update your metadata</button> <p>user role: {user?.publicMetadata.role}</p> </> ); }

Return value

VariablesDescription
isSignedInA boolean that returns true if the user is signed in.
isLoadedA boolean that until Clerk loads and initializes, will be set to false. Once Clerk loads, isLoaded will be set to true.
userThe User object for the currently active user. If the user is not signed in, user will be null.

What did you think of this content?

Clerk © 2023