After a user successfully authenticates with Auth0 in your React app, you can access their profile details using the useAuth0 hook. This hook provides several useful values, including the user object, which contains information about the authenticated user. To use this hook, first import it from the Auth0 React SDK, then call it inside your React component. The user object will be undefined until the user has logged in, so you should always check that it exists before attempting to render any profile information.

The user object returned by the useAuth0 hook typically includes several properties that you can display in a profile component. The most commonly used properties are:

• Name: the user's display name, available as user.name;
• Email: the user's email address, available as user.email;
• Picture: the user's profile picture URL, available as user.picture.

To render these details, you can create a profile component that checks for the presence of the user object and displays these properties. For example, you might render the user's avatar using the picture URL, display their name in a heading, and show their email address below.

import { useAuth0 } from "@auth0/auth0-react";

function UserProfile() {
  const { user, isAuthenticated, isLoading } = useAuth0();

  if (isLoading) {
    return <p>Loading profile...</p>;
  }

  if (!isAuthenticated || !user) {
    return null;
  }

  return (
    <div>
      <img
        src={user.picture}
        alt={user.name}
        style={{ width: 80, borderRadius: "50%" }}
      />
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}