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. 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;

Props

All props below are optional.

NameTypeDescription
appearanceobjectControls the overall look and feel.
routingRoutingStrategyThe routing strategy for your pages. Supported values are:
  • Hash (default): Hash based routing.
  • Path: Path based routing.
pathstringThe path where the component is mounted when path-based routing is used.
e.g. /user-profile. This prop is ignored in hash-based routing.
additionalOAuthScopesobjectSpecify additional scopes per OAuth provider that your users would like to provide if not already approved.
e.g. {google: ['foo', 'bar'], github: ['qux']}

What did you think of this content?

Clerk © 2023