useUser hook

The useUser hook retrieves the active User object. It is most commonly used to display the user's profile information, like their name or email address.

Usage

Use the useUser hook to retrieve the User object of the active user — a shortcut to the session.user property of the Clerk context.

The hook will throw an error if it's not called from a child of SignedIn. To retrieve the user object outside of SignedIn, use the alternates which will not render unless a User is active.

import { useUser } from "@clerk/clerk-react";
const Greeting = () => {
const user = useUser();
return (
<div>{user.firstName ? `Hello, ${user.firstName}!` : "Hello there!"}</div>
);
};

Alternates

If a hook is inconvenient, alternates patterns are available to retrieve the Clerk object.

WithUser (Function-as-child)

Use the function-as-child pattern with WithUser to retrieve the User object within a class component.

import { WithUser } from "@clerk/clerk-react";
class Greeting extends React.Component {
render() {
return (
<WithUser>
{(user) => (
<div>
{user.firstName ? `Hello, ${user.firstName}!` : "Hello there!"}
</div>
)}
</WithUser>
);
}
}

withUser (Higher-order component)

Use the withUser higher-order component to pass the Clerk object as a prop to any component.

import { withUser } from "@clerk/clerk-react";
class Greeting extends React.Component {
render() {
return (
<div>
{this.props.user.firstName
? `Hello, ${this.props.user.firstName}!`
: "Hello there!"}
</div>
);
}
}
const GreetingWithUser = withUser(Greeting);

WithUserProp Typescript utility

In Typescript, use the WithUserProp utility type to make the compiler aware of the user prop.

import { withUser, WithUserProp } from "@clerk/clerk-react";
class Greeting extends React.Component<WithUserProp<{}>> {
render() {
return (
<div>
{this.props.user.firstName
? `Hello, ${this.props.user.firstName}!`
: "Hello there!"}
</div>
);
}
}
const GreetingWithUser = withUser(Greeting);