useUser

Access the User object inside of your components.

Overview

The useUser hook returns the current user state: { isLoaded, isSignedIn, user } . You can use the user object to access the currently active User. It can be used to update the user or display information about the user's profile, like their name or email address.

While hooks are the recommended way to use the Clerk APIs, If you don't wish to use React hooks we also offer a couple of alternative methods to retrieve the currently signed in user.

Usage

A basic example that showcases the useUser hook in action is a greeting component that greets the signed in user by their first name. Note that your component must be a descendant of <ClerkProvider/>.

Typescript

For better type support, we highly recommend updating to at least Typescript 4.6. Applications using Typescript will benefit significantly from Typescript's new Control Flow Analysis for Dependent Parameters when using our hooks.

1
import { isLoaded, useUser, SignIn } from "@clerk/clerk-react";
2

3
function Greeting() {
4
  // Use the useUser hook to get the Clerk.user object
5
  // This hook causes a re-render on user changes
6
  const { isLoaded, isSignedIn, user } = useUser();
7
  
8
  if (!isLoaded || !isSignedIn) {
9
    // You can handle the loading or signed state separately
10
    return null;
11
  }
12
  
13
  return <div>Hello, {user.firstName}!</div>;
14
}
15

16
export default App;

Alternatives

There are times where using a hook might be inconvenient. For such cases, there are alternative ways to get access to the User object.

Clerk provides the <WithUser/> component and the withUser higher order component directive that will allow your wrapped components to get access to the currently signed in user.

withUser

The withUser function offers a Higher Order Component (HOC) that you can wrap your own components with, and they will have access to the active User object.

The User object will be accessible in the wrapped component under the user prop.

1
import { withUser } from "@clerk/clerk-react";
2

3
class Greeting extends React.Component {  
4
  render() {
5
    return (
6
      <div>
7
        {this.props.user.firstName
8
          ? `Hello ${this.props.user.firstName}!`
9
          : "Hello there!"}
10
      </div>
11
    );
12
  }
13
}
14

15
// Wrap your component with the withUser HOC.
16
export const GreetingWithUser = withUser(Greeting);

<WithUser />

If you really want to stretch JSX capabilities and you cannot use the withUser higher order component, we provide a <WithUser/> component that accepts a Function as a child. Inside this function, the active User object will be accessible.

1
import { WithUser } from "@clerk/clerk-react";
2

3
class Greeting extends React.Component {
4
  render() {
5
    return (
6
      <WithUser>
7
        {(user) => (
8
          <div>
9
            {user.firstName 
10
              ? `Hello, ${user.firstName}!` 
11
              : "Hello there!"}
12
          </div>
13
        )}
14
      </WithUser>
15
    );
16
  }
17
}

Usage with Typescript

If you're using Typescript, Clerk provides a WithUserProp type to make the compiler aware of the user prop for your components.

You can use the WithUserProp type in combination with both the withUser higher order component and the <WithUser/> component.

The example below uses the withUser higher order component.

1
import { withUser, WithUserProp } from "@clerk/clerk-react";
2

3
type GreetingProps = {
4
  greeting: string;
5
}
6

7
const Greeting = (props: WithUserProp<GreetingProps>) => {
8
  const { user, greeting } = props;
9
  return (
10
    <h1>{ greeting }</h1>
11
    <div>
12
      { user.firstName
13
        ? `Hello, ${user.firstName}!`
14
        : "Hello there!" }
15
    </div>
16
  );
17
}
18

19
export const GreetingWithUser = withUser(Greeting);