Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.devGet API keys

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 { ClerkProvider, useUser, SignIn } from "@clerk/clerk-react";
2
3
const frontendApi = process.env.REACT_APP_CLERK_FRONTEND_API;
4
5
function App() {
6
return (
7
<ClerkProvider frontendApi={frontendApi}>
8
<Greeting />
9
<SignedOut>
10
<SignIn />
11
</SignedOut>
12
</ClerkProvider>
13
);
14
}
15
16
function Greeting() {
17
// Use the useUser hook to get the Clerk.user object
18
// This hook causes a re-render on user changes
19
const { isLoaded, isSignedIn, user } = useUser();
20
21
if (!isLoaded || !isSignedIn) {
22
// You can handle the loading or signed state separately
23
return null;
24
}
25
26
return <div>Hello, {user.firstName}!</div>;
27
}
28
29
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 User object will be accessible in the wrapped component under the user prop.

import { withUser } from "@clerk/clerk-react";
// Your component must be a descendant
// of the <ClerkProvider /> component.
class Greeting extends React.Component {
render() {
return (
<div>
{this.props.user.firstName
? `Hello ${this.props.user.firstName}!`
: "Hello there!"}
</div>
);
}
}
// Wrap your component with the withUser HOC.
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.

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

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.

import { withUser, WithUserProp } from "@clerk/clerk-react";
type GreetingProps = {
greeting: string;
}
const Greeting = (props: WithUserProp<GreetingProps>) => {
const { user, greeting } = props;
return (
<h1>{ greeting }</h1>
<div>
{ user.firstName
? `Hello, ${user.firstName}!`
: "Hello there!" }
</div>
);
}
export const GreetingWithUser = withUser(Greeting);

Was this helpful?

Clerk © 2022