Docs

useUser()

The useUser() hook is a convenient way to access the current user's User object, which holds all of the information for a single user of your application and provides a set of methods to manage their account. This hook also provides boolean values to check if the user is signed in and if Clerk has loaded and initialized.

useUser() returns

  • Name
    isSignedIn
    Type
    boolean
    Description

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

  • Name
    isLoaded
    Type
    boolean
    Description

    A boolean that until Clerk loads and initializes, will be set to false. Once Clerk loads, isLoaded will be set to true.

  • Name
    user
    Type
    User
    Description

    The User object for the currently active user. If the user is not signed in, user will be null.

How to use the useUser() hook

Retrieve the current user data with the useUser() hook

The following example demonstrates how to use the useUser() hook to access the user object, which includes the current user's data, like the user's full name. The isLoaded and isSignedIn properties are used to handle the loading state and to check if the user is signed in, respectively.

For more information on the User object, see the reference.

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

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

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

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

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

Update the current user data with the useUser() hook

The following example demonstrates how to use the useUser() hook to access the user object, which includes the update method for updating the user's data.

For more information on the update() method, see the User reference.

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

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

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

  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 with the useUser() hook

To retrieve the latest user data after updating the user elsewhere, use the user.reload() method.

For more information on the reload() method, see the User reference.

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

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

  if (!isLoaded) {
    // Handle loading state however you like
    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}>Click me to 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