Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

<UserProfile />

UserProfile example

The <UserProfile /> component is used to render a beautiful, full-featured account management UI that allows users to manage their profile and security settings.

Usage

You can embed the <UserProfile /> component using the Next.js optional catch-all route(opens in a new tab). This allows you to redirect the user inside your application.

/app/user-profile/[[...user-profile]]/page.tsx
import { UserProfile } from "@clerk/nextjs"; const UserProfilePage = () => ( <UserProfile path="/user-profile" routing="path" /> ); export default UserProfilePage;
/pages/user-profile/[[...index]].tsx
import { UserProfile } from "@clerk/nextjs"; const UserProfilePage = () => ( <UserProfile path="/user-profile" routing="path" /> ); export default UserProfilePage;

Properties

All props below are optional.

NameTypeDescription
appearanceAppearance | undefinedOptional object to style your components. Will only affect Clerk Components and not Account Portal pages.
routing'hash' | 'path' | 'virtual'The routing strategy for your pages.
pathstringThe path where the component is mounted on when path-based routing is used e.g. /sign-in.
additionalOAuthScopesobjectSpecify additional scopes per OAuth provider that your users would like to provide if not already approved.
e.g. {google: ['foo', 'bar'], github: ['qux']}.

Customization

To learn about how to customize Clerk components, see the customization documentation.

In addition, you also can add custom pages and links. For more information, refer to the Custom Pages documentation.

Last updated on November 21, 2023

What did you think of this content?

Clerk © 2024