`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

Variables	Description
`isSignedIn`	A boolean that returns `true` if the user is signed in.
`isLoaded`	A boolean that until Clerk loads and initializes, will be set to `false`. Once Clerk loads, `isLoaded` will be set to `true`.
`user`	The `User` object for the currently active user. If the user is not signed in, `user` will be `null`.