Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

<UserProfile /> component

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.

Properties

All props 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']}.

Usage with frameworks

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;

Usage with JavaScript

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

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

NameTypeDescription
nodeHTMLDivElement(opens in a new tab)The <div> element used to render in the <UserProfile /> component
props?UserProfilePropsThe properties to pass to the <UserProfile /> component

mountUserProfile() usage

main.js
import Clerk from '@clerk/clerk-js'; // Initialize Clerk with your Clerk publishable key const clerk = new Clerk('{{pub_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="{{pub_key}}" src="https://{{fapi_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

NameTypeDescription
nodeHTMLDivElement(opens in a new tab)The container <div> element with a rendered <UserProfile /> component instance.

unmountUserProfile() usage

main.js
import Clerk from '@clerk/clerk-js'; // Initialize Clerk with your Clerk publishable key const clerk = new Clerk('{{pub_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="{{pub_key}}" src="https://{{fapi_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

NameTypeDescription
props?UserProfilePropsThe properties to pass to the <UserProfile /> component

openUserProfile() usage

main.js
import Clerk from '@clerk/clerk-js'; // Initialize Clerk with your Clerk publishable key const clerk = new Clerk('{{pub_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="{{pub_key}}" src="https://{{fapi_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

main.js
import Clerk from '@clerk/clerk-js'; // Initialize Clerk with your Clerk publishable key const clerk = new Clerk('{{pub_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="{{pub_key}}" src="https://{{fapi_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.

Last updated on March 26, 2024

What did you think of this content?

Clerk © 2024