Docs

useUser()

The useUser() hook provides access to the current user's User object, which contains all the data for a single user in your application and provides methods to manage their account. This hook also allows you to check if the user is signed in and if Clerk has loaded and initialized.

Returns

  • Name
    isLoaded
    Type
    boolean
    Description
  • Name
    isSignedIn
    Type
    boolean
    Description

    A boolean that returns true if the user is signed in.

  • Name
    user
    Type
    User | null
    Description

    The User object for the current user. If the user isn't signed in, user will be null.

How to use the useUser() hook

Get the current user

The following example uses the useUser() hook to access the User object, which contains the current user's data such as their full name. The isLoaded and isSignedIn properties are used to handle the loading state and to check if the user is signed in, respectively.

src/Home.tsx
import { useUser } from '@clerk/clerk-react'

export default function Home() {
  const { isSignedIn, user, isLoaded } = useUser()

  if (!isLoaded) {
    // Handle loading state
    return null
  }

  if (isSignedIn) {
    return <div>Hello {user.fullName}!</div>
  }

  return <div>Not signed in</div>
}

Update user data

The following example uses the useUser() hook to access the User object, which calls the update() method to update the current user's information.

src/Home.tsx
import { useUser } from '@clerk/clerk-react'

export default function Home() {
  const { isLoaded, user } = useUser()

  if (!isLoaded) {
    // Handle loading state
    return null
  }

  if (!user) return null

  const updateUser = async () => {
    await user.update({
      firstName: 'John',
      lastName: 'Doe',
    })
  }

  return (
    <>
      <button onClick={updateUser}>Update your name</button>
      <p>user.firstName: {user?.firstName}</p>
      <p>user.lastName: {user?.lastName}</p>
    </>
  )
}

Reload user data

The following example uses the useUser() hook to access the User object, which calls the reload() method to get the latest user's information.

src/Home.tsx
import { useUser } from '@clerk/clerk-react'

export default function Home() {
  const { isLoaded, user } = useUser()

  if (!isLoaded) {
    // Handle loading state
    return null
  }

  if (!user) return null

  const updateUser = async () => {
    // Update data via an API endpoint
    const updateMetadata = await fetch('/api/updateMetadata')

    // Check if the update was successful
    if (updateMetadata.message !== 'success') {
      throw new Error('Error updating')
    }

    // If the update was successful, reload the user data
    await user.reload()
  }

  return (
    <>
      <button onClick={updateUser}>Update your metadata</button>
      <p>user role: {user?.publicMetadata.role}</p>
    </>
  )
}

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on