`<UserProfile />` Component

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

`mountUserProfile()`

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

Usage

import Clerk from '@clerk/clerk-js';
import { dark } from "@clerk/themes";
 
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div
    id="user-profile"
  ></div>
`;
 
const userProfileComponent = document.querySelector<HTMLDivElement>('#user-profile')!;
 
const clerk = new Clerk('pk_[publishable_key]');
await clerk.load();
 
clerk.mountUserProfile(userProfileComponent, {
  appearance: {
    baseTheme: dark
  }
});

<div id="user-profile"></div>
<script>
  const script = document.createElement('script');
  script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_key]');
  script.async = true;
  script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`;
 
  script.addEventListener('load', async function () {
    await window.Clerk.load();
 
    const userProfileComponent = document.querySelector('#user-profile');
 
    window.Clerk.mountUserProfile(userProfileComponent, {
      appearance: {
        baseTheme: dark
      }
    });
  });
  document.body.appendChild(script);
</script>

Props

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

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

`unmountUserProfile()`

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

Usage

import Clerk from '@clerk/clerk-js';
 
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div
    id="user-profile"
  ></div>
`
 
const userProfileComponent = document.querySelector<HTMLDivElement>('#user-profile')!;
 
const clerk = new Clerk('pk_[publishable_key]');
 
await clerk.load();
 
clerk.mountUserProfile(userProfileComponent);
 
// ...
 
clerk.unmountUserProfile(userProfileComponent);

<div id="user-profile"></div>
<script>
  const script = document.createElement('script');
  script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_key]');
  script.async = true;
  script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`;
 
  script.addEventListener('load', async function () {
    await window.Clerk.load();
 
    const userProfileComponent = document.querySelector('#user-profile');
 
    window.Clerk.mountUserProfile(userProfileComponent);
 
    // ...
 
    window.Clerk.unmountUserProfile(userProfileComponent);
  });
  document.body.appendChild(script);
</script>

Props

function unmountUserProfile(node: HTMLDivElement): void;

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

`openUserProfile()`

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

Usage

import Clerk from '@clerk/clerk-js';
import { dark } from "@clerk/themes";
 
const clerk = new Clerk('pk_[publishable_key]');
await clerk.load();
 
clerk.openUserProfile({
  appearance: {
    baseTheme: dark
  }
});

<script>
  const script = document.createElement('script');
  script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_key]');
  script.async = true;
  script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`;
 
  script.addEventListener('load', async function () {
    await window.Clerk.load();
 
    window.Clerk.openUserProfile({
      appearance: {
        baseTheme: dark
      }
    });
  });
  document.body.appendChild(script);
</script>

Props

function openUserProfile(props?: UserProfileProps): void;

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

`closeUserProfile()`

Closes the user profile overlay.

Usage

import Clerk from '@clerk/clerk-js';
import { dark } from "@clerk/themes";
 
const clerk = new Clerk('pk_[publishable_key]');
await clerk.load();
 
clerk.openUserProfile();
 
// ...
 
clerk.closeUserProfile();

<script>
  const script = document.createElement('script');
  script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_key]');
  script.async = true;
  script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`;
 
  script.addEventListener('load', async function () {
    await window.Clerk.load();
 
    window.Clerk.openUserProfile();
 
    // ...
 
    window.Clerk.closeUserProfile();
  });
  document.body.appendChild(script);
</script>

Props

function closeUserProfile(): void;

`UserProfileProps`

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']}`