<OrganizationProfile />
component
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 | Type | Description |
---|---|---|
appearance | Appearance | undefined | Optional object to style your components. Will only affect Clerk Components and not Account Portal pages. |
afterLeaveOrganizationUrl | string | Full URL or path to navigate to after leaving an organization. |
routing | 'hash' | 'path' | 'virtual' | The routing strategy for your pages. |
path | string | The path where the component is mounted when path-based routing is used. For example: /organization-profile This prop is ignored in hash- and virtual-based routing. |
Usage with frameworks
You can embed the <OrganizationProfile />
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/organization-profile/[[...organization-profile]]/page.tsximport { OrganizationProfile } from "@clerk/nextjs"; export default function OrganizationProfilePage() { return ( <OrganizationProfile path="/organization-profile" /> ) }
/pages/organization-profile/[[...index]].tsximport { OrganizationProfile } from "@clerk/nextjs"; export default function OrganizationProfilePage() { return ( <OrganizationProfile path="/organization-profile" /> ) }
organization-profile.tsximport { OrganizationProfile } from "@clerk/clerk-react"; export default function OrganizationProfilePage() { return <OrganizationProfile path="/organization-profile" />; }
/pages/organization-profile/$.tsximport { 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:
mountOrganizationProfile()
unmountOrganizationProfile()
openOrganizationProfile()
closeOrganizationProfile()
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 | Type | Description |
---|---|---|
node | HTMLDivElement (opens in a new tab) | The <div> element used to render in the <OrganizationProfile /> component |
props? | OrganizationProfileProps | The properties to pass to the <OrganizationProfile /> component |
mountOrganizationProfile()
usage
main.jsimport 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="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="{{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 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 | Type | Description |
---|---|---|
node | HTMLDivElement (opens in a new tab) | The container <div> element with a rendered <OrganizationProfile /> component instance. |
unmountOrganizationProfile()
usage
main.jsimport 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="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="{{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 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
Name | Type | Description |
---|---|---|
props? | OrganizationProfileProps | The properties to pass to the <OrganizationProfile /> component |
openOrganizationProfile()
usage
main.jsimport 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="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="{{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 orgProfileDiv = document.getElementById('organization-profile'); Clerk.openOrganizationProfile(orgProfileDiv); }); </script>
closeOrganizationProfile()
Closes the organization profile overlay.
function closeOrganizationProfile(): void;
closeOrganizationProfile()
usage
main.jsimport 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="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="{{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 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).
Last updated on March 26, 2024