Docs

<OrganizationProfile /> component

Clerk's <OrganizationProfile /> component renders a full-featured organization management UI that allows users to manage their organization profile and security settings.

The <OrganizationProfile /> component is used to render a beautiful, full-featured organization management UI that allows users to manage their organization 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
    afterLeaveOrganizationUrl
    Type
    string
    Description

    Full URL or path to navigate to after leaving an organization.

  • Name
    routing
    Type
    'hash' | 'path' | 'virtual'
    Description

    The routing strategy for your pages.
    Defaults to 'path' in Next.js and Remix applications. Defaults to hash for all other SDK's.

  • Name
    path
    Type
    string
    Description

    The path where the component is mounted on when routing is set to path. It is ignored in hash- and virtual-based routing.
    For example: /organization-profile.

Usage with frameworks

You can embed the <OrganizationProfile /> component using the Next.js optional catch-all route. This allows you to redirect the user inside your application.

/app/organization-profile/[[...organization-profile]]/page.tsx
import { OrganizationProfile } from "@clerk/nextjs";

export default function OrganizationProfilePage() {
  return (
    <OrganizationProfile path="/organization-profile" />
  )
}
/pages/organization-profile/[[...index]].tsx
import { OrganizationProfile } from "@clerk/nextjs";

export default function OrganizationProfilePage() {
  return (
    <OrganizationProfile path="/organization-profile" />
  )
}
organization-profile.tsx
import { OrganizationProfile } from "@clerk/clerk-react";

export default function OrganizationProfilePage() {
  return <OrganizationProfile path="/organization-profile" />;
}
/pages/organization-profile/$.tsx
import { OrganizationProfile } from "@clerk/remix";

export default function OrganizationProfilePage() {
  return <OrganizationProfile path="/organization-profile" />;
}

Usage with JavaScript

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

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

mountOrganizationProfile()

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

function mountOrganizationProfile(node: HTMLDivElement, props?: OrganizationProfileProps): void;

mountOrganizationProfile() params

  • Name
    node
    Type
    HTMLDivElement
    Description

    The <div> element used to render in the <OrganizationProfile /> component

  • Name
    props?
    Type
    OrganizationProfileProps
    Description

    The properties to pass to the <OrganizationProfile /> component

mountOrganizationProfile() usage

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="organization-profile"></div>
`;

const orgProfileDiv =
  document.getElementById("organization-profile");

clerk.mountOrganizationProfile(orgProfileDiv);
index.html
<!-- Add a <div id="organization-profile"> element to your HTML -->
<div id="organization-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 orgProfileDiv =
      document.getElementById('organization-profile');

    Clerk.mountOrganizationProfile(orgProfileDiv);
  });
</script>

unmountOrganizationProfile()

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

function unmountOrganizationProfile(node: HTMLDivElement): void;

unmountOrganizationProfile() params

  • Name
    node
    Type
    HTMLDivElement
    Description

    The container <div> element with a rendered <OrganizationProfile /> component instance.

unmountOrganizationProfile() usage

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="organization-profile"></div>
`

const orgProfileDiv =
  document.getElementById('organization-profile');

clerk.mountOrganizationProfile(orgProfileDiv);

// ...

clerk.unmountOrganizationProfile(orgProfileDiv);
index.html
<!-- Add a <div id="organization-profile"> element to your HTML -->
<div id="organization-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 orgProfileDiv =
      document.getElementById('organization-profile');

    Clerk.mountOrganizationProfile(orgProfileDiv);

    // ...

    Clerk.unmountOrganizationProfile(orgProfileDiv);
  });
</script>

openOrganizationProfile()

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

function openOrganizationProfile(props?: OrganizationProfileProps): void;

openOrganizationProfile() params

openOrganizationProfile() usage

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="organization-profile"></div>
`

const orgProfileDiv =
  document.getElementById('organization-profile');

clerk.openOrganizationProfile(orgProfileDiv);
index.html
<!-- Add a <div id="organization-profile"> element to your HTML -->
<div id="organization-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 orgProfileDiv =
      document.getElementById('organization-profile');

    Clerk.openOrganizationProfile(orgProfileDiv);
  });
</script>

closeOrganizationProfile()

Closes the organization profile overlay.

function closeOrganizationProfile(): void;

closeOrganizationProfile() usage

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="organization-profile"></div>
`

const orgProfileDiv =
  document.getElementById('organization-profile');

clerk.closeOrganizationProfile(orgProfileDiv);
index.html
<!-- Add a <div id="organization-profile"> element to your HTML -->
<div id="organization-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 orgProfileDiv =
      document.getElementById('organization-profile');

    Clerk.closeOrganizationProfile(orgProfileDiv);
  });
</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 <OrganizationProfile /> (/docs/components/customization/organization-profile).

Feedback

What did you think of this content?
Edit this page on GitHub