<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.tsximport { UserProfile } from "@clerk/nextjs"; const UserProfilePage = () => ( <UserProfile path="/user-profile" routing="path" /> ); export default UserProfilePage;
/pages/user-profile/[[...index]].tsximport { UserProfile } from "@clerk/nextjs"; const UserProfilePage = () => ( <UserProfile path="/user-profile" routing="path" /> ); export default UserProfilePage;
/user-profile.tsximport { UserProfile } from "@clerk/clerk-react"; const UserProfilePage = () => ( <UserProfile path="/user-profile" routing="path" /> ); export default UserProfilePage;
routes/user/$.tsximport { 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:
|
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']} |