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

This function returns a discriminated union type. There are multiple variants of this type available which you can select by clicking on one of the tabs.

Initialization

Signed out

Signed in

Name
isLoaded
Type
false
Description
A boolean that indicates whether Clerk has completed initialization. Initially false, becomes true once Clerk loads.
Name
isSignedIn
Type
undefined
Description
A boolean that returns true if the user is signed in.
Name
user
Type
undefined
Description
The User object for the current user.

Name
isLoaded
Type
true
Description
A boolean that indicates whether Clerk has completed initialization. Initially false, becomes true once Clerk loads.
Name
isSignedIn
Type
false
Description
A boolean that returns true if the user is signed in.
Name
user
Type
null
Description
The User object for the current user.

Name
isLoaded
Type
true
Description
A boolean that indicates whether Clerk has completed initialization. Initially false, becomes true once Clerk loads.
Name
isSignedIn
Type
true
Description
A boolean that returns true if the user is signed in.
Name
user
Type
UserResource
Description
The User object for the current user.

Examples

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/Example.tsx

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

  if (!isLoaded) {
    return <div>Loading...</div>;
  }

  if (!isSignedIn) {
    return <div>Sign in to view this page</div>;
  }

  return <div>Hello {user.firstName}!</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.

React

Next.js

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>
    </>
  );
}

app/page.tsx

"use client";

import { useUser } from "@clerk/nextjs";

export default function HomePage() {
  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.