Skip to main content
useUser is a React hook that retrieves the currently authenticated user’s profile information. It fetches user data from the /auth/profile endpoint and provides loading and error states.

​
Usage

import { useUser } from '@auth0/nextjs-auth0';

function Profile() {
  const { user, error, isLoading, invalidate } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!user) return <div>Not authenticated</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <img src={user.picture} alt={user.name} />
      <p>Email: {user.email}</p>
    </div>
  );
}

​
Signature

function useUser(): {
  user: User | null | undefined;
  isLoading: boolean;
  error: Error | null;
  invalidate: () => void;
}

​
Return Value

The hook returns an object with the following properties:
​
user
User | null | undefined
The authenticated user object, or null if not authenticated, or undefined if still loading.See the User type for available properties.
​
isLoading
boolean
true while the user profile is being fetched, false otherwise.
​
error
Error | null
An error object if the profile fetch failed, or null if no error occurred.
​
invalidate
() => void
Function to manually revalidate the user data. Useful for refreshing the profile after updates.
const { invalidate } = useUser();

// After updating user profile
await updateProfile(newData);
invalidate(); // Refresh the user data

​
User Type

The User object contains standard OIDC profile claims:
​
sub
string
required
The user’s unique identifier.
​
name
string
The user’s full name.
​
nickname
string
The user’s nickname.
​
given_name
string
The user’s given/first name.
​
family_name
string
The user’s family/last name.
​
picture
string
URL of the user’s profile picture.
​
email
string
The user’s email address.
​
email_verified
boolean
Whether the user’s email has been verified.
​
org_id
string
The organization ID that the user belongs to. This field is populated when the user logs in through an organization.

​
Configuration

By default, the hook fetches from /auth/profile. You can customize this endpoint using the NEXT_PUBLIC_PROFILE_ROUTE environment variable: 
NEXT_PUBLIC_PROFILE_ROUTE=/api/custom-profile

​
Notes

  • The hook uses SWR for data fetching, which provides automatic caching and revalidation
  • The user data is shared across all useUser() calls in your application
  • You must wrap your application with <Auth0Provider> to use this hook
  • The hook makes a client-side fetch request, so it only works in React components

Build docs developers (and LLMs) love

Get started for freeTalk to us