`<UserProfile />` component

Properties
Usage with frameworks
Usage with JavaScript
Customization

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

Properties

All props are optional.

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

Usage with frameworks

Next.js

React

Remix

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 Router

Pages Router

/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" />;
}

Usage with JavaScript

The following methods available on an instance of the Clerk class are used to render and control the <UserProfile /> component:

mountUserProfile()
unmountUserProfile()
openUserProfile()
closeUserProfile()

The following examples assume that you have followed the quickstart in order to add Clerk to your JavaScript application.

`mountUserProfile()`

Render the <UserProfile /> component to an HTML <div> element.

function mountUserProfile(node: HTMLDivElement, props?: UserProfileProps): void;

`mountUserProfile()` params

Name
node
Type
HTMLDivElement
Description
The <div> element used to render in the <UserProfile /> component
Name
props?
Type
UserProfileProps
Description
The properties to pass to the <UserProfile /> component

`mountUserProfile()` usage

NPM module

main.js

import Clerk from '@clerk/clerk-js';

// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY');
await clerk.load();

document.getElementById("app").innerHTML = `
  <div id="user-profile"></div>
`;

const userProfileDiv =
  document.getElementById("user-profile");

clerk.mountUserProfile(userProfileDiv);

index.html

<!-- Add a <div id="user-profile"> element to your HTML -->
<div id="user-profile"></div>

<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
  type="text/javascript"
></script>

<script>
  window.addEventListener("load", async function () {
    await Clerk.load();

    const userProfileDiv =
      document.getElementById('user-profile');

    Clerk.mountUserProfile(userProfileDiv);
  });
</script>

`unmountUserProfile()`

Unmount and run cleanup on an existing <UserProfile /> component instance.

function unmountUserProfile(node: HTMLDivElement): void;

`unmountUserProfile()` params

Name
node
Type
HTMLDivElement
Description
The container <div> element with a rendered <UserProfile /> component instance.

`unmountUserProfile()` usage

NPM module

main.js

import Clerk from '@clerk/clerk-js';

// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY');
await clerk.load();

document.getElementById('app').innerHTML = `
  <div id="user-profile"></div>
`

const userProfileDiv =
  document.getElementById('user-profile');

clerk.mountUserProfile(userProfileDiv);

// ...

clerk.unmountUserProfile(userProfileDiv);

index.html

<!-- Add a <div id="user-profile"> element to your HTML -->
<div id="user-profile"></div>

<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
  type="text/javascript"
></script>

<script>
  window.addEventListener("load", async function () {
    await Clerk.load();

    const userProfileDiv =
      document.getElementById('user-profile');

    Clerk.mountUserProfile(userProfileDiv);

    // ...

    Clerk.unmountUserProfile(userProfileDiv);
  });
</script>

`openUserProfile()`

Opens the <UserProfile /> component as an overlay at the root of your HTML body element.

function openUserProfile(props?: UserProfileProps): void;

`openUserProfile()` params

Name
props?
Type
UserProfileProps
Description
The properties to pass to the <UserProfile /> component

`openUserProfile()` usage

NPM module

main.js

import Clerk from '@clerk/clerk-js';

// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY');
await clerk.load();

document.getElementById('app').innerHTML = `
  <div id="user-profile"></div>
`

const userProfileDiv =
  document.getElementById('user-profile');

clerk.openUserProfile(userProfileDiv);

index.html

<!-- Add a <div id="user-profile"> element to your HTML -->
<div id="user-profile"></div>

<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
  type="text/javascript"
></script>

<script>
  window.addEventListener("load", async function () {
    await Clerk.load();

    const userProfileDiv =
      document.getElementById('user-profile');

    Clerk.openUserProfile(userProfileDiv);
  });
</script>

`closeUserProfile()`

Closes the user profile overlay.

function closeUserProfile(): void;

`closeUserProfile()` usage

NPM module

main.js

import Clerk from '@clerk/clerk-js';

// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY');
await clerk.load();

document.getElementById('app').innerHTML = `
  <div id="user-profile"></div>
`

const userProfileDiv =
  document.getElementById('user-profile');

clerk.closeUserProfile(userProfileDiv);

index.html

<!-- Add a <div id="user-profile"> element to your HTML -->
<div id="user-profile"></div>

<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
  type="text/javascript"
></script>

<script>
  window.addEventListener("load", async function () {
    await Clerk.load();

    const userProfileDiv =
      document.getElementById('user-profile');

    Clerk.closeUserProfile(userProfileDiv);
  });
</script>

Customization

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

In addition, you also can add custom pages and links to the <UserProfile /> navigation sidebar. For more information, refer to the Custom Pages documentation.

Edit on GitHub

<UserProfile /> component

Feedback

`<UserProfile />` component