`<UserProfile />`

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;

/user-profile.tsx
import { UserProfile } from "@clerk/clerk-react";
 
const UserProfilePage = () => (
  <UserProfile path="/user-profile" routing="path" />
);
 
export default UserProfilePage;

routes/user/$.tsx
import { UserProfile } from "@clerk/remix";
 
export default function UserProfilePage() {
  return <UserProfile path="/user" routing="path" />;
}

Props

All props below are optional.

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`	`object`	Specify additional scopes per OAuth provider that your users would like to provide if not already approved. e.g. `{google: ['foo', 'bar'], github: ['qux']}`