<UserProfile />

A full-featured account management component

Overview

The <UserProfile/> component is used to render a beautiful, full-featured account management UI that allows users to manage their profile and security settings. Learn more about the <UserProfile/> component, what it does, and how it is used by reading our User Profile component guide.

Embedding a <UserProfile /> component

Using the Next.js optional catch all route, you can embed the <UserProfile/> component. This allows you to redirect the user inside your application and handle any redirects.

1
import { UserProfile } from "@clerk/nextjs";
2

3
const UserProfilePage = () => (
4
  <UserProfile path="/user-profile" routing="path" />
5
  );
6

7
export default UserProfilePage;

Props

Name	Type	Description
appearance?	object	Controls the overall look and feel.
routing?	RoutingStrategy	The routing strategy for your pages. Supported values are: -hash (default): Hash based routing. -path: Path based routing.
path?	string	The path where the component is mounted when path-based routing is used. -e.g. /user-profile. This prop is ignored in hash-based routing.
additionalOAuthScopes?	Record<OAuthProvider, string[]>	Specify additional scopes per OAuth provider that your users would be prompted to approve if not already done so e.g. `<UserProfile additionalOAuthScopes={{google: ['foo', 'bar'], github: ['qux']}} />`

Custom Styling

The <UserProfile/> component can be highly customized through the appearance prop and can be styled using CSS Modules, Tailwind, inline CSS objects, or global CSS.

Localization

The <UserProfile/> component can be localized using the localization prop. This allows you to customize the language used within the <UserProfile/> component.