Organization methods

These methods on the Clerk class allow you to create and read information about Organizations.

The following examples assume:

you have followed the quickstart in order to add Clerk to your JavaScript application
you have enabled the Organizations feature in your Clerk Dashboard

`getOrganization()`

Retrieves information for a specific organization.


function getOrganization(organizationId: string): Promise<Organization | undefined>;

`getOrganization` parameters

Name	Type	Description
`organizationId`	`string`	The ID of the organization to be found.

`getOrganization` example

The following example demonstrates how to retrieve information about the currently active organization.

main.js
import Clerk from '@clerk/clerk-js';
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('{{pub_key}}');
await clerk.load();
 
if (clerk.user) {
  if (clerk.organization.id) {
    await clerk.getOrganization(clerk.organization.id)
      .then((res) => console.log(res))
      .catch((error) => console.log("An error occurred:", error.errors));
  } else {
    // If there is no active organization,
    // mount Clerk's <OrganizationSwitcher />
    // to allow the user to set an organization as active
    document.getElementById("app").innerHTML = `
      <h2>Select an organization to set it as active</h2>
      <div id="org-switcher"></div>
    `;
 
    const orgSwitcherDiv = document.getElementById("org-switcher");
 
    clerk.mountOrganizationSwitcher(orgSwitcherDiv);
  }
} else {
  document.getElementById("app").innerHTML = `
    <div id="sign-in"></div>
  `;
 
  const signInDiv =
    document.getElementById("sign-in");
 
  clerk.mountSignIn(signInDiv);
}

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clerk + JavaScript App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

index.html
<div id="sign-in"></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();
 
    if (Clerk.user) {
      if (Clerk.organization.id) {
        await Clerk.getOrganization(Clerk.organization.id)
          .then((res) => console.log(res))
          .catch((error) => console.log("An error occurred:", error.errors));
      } else {
        // If there is no active organization,
        // mount Clerk's <OrganizationSwitcher />
        // to allow the user to set an organization as active
        document.getElementById("app").innerHTML = `
          <h2>Select an organization to set it as active</h2>
          <div id="org-switcher"></div>
        `;
 
        const orgSwitcherDiv = document.getElementById("org-switcher");
 
        Clerk.mountOrganizationSwitcher(orgSwitcherDiv);
      }
    } else {
      const signInDiv = document.getElementById("sign-in");
 
      Clerk.mountSignIn(signInDiv);
    }
  });
</script>

`createOrganization()`

Creates an organization programatically.

You can use Clerk's <CreateOrganization /> component if you prefer a prebuilt user interface.


function createOrganization({name, slug}: CreateOrganizationParams): Promise<Organization>;

`createOrganization()` params

Name	Type	Description
`name`	`string`	The name of the organization to be created.
`slug?`	`string`	The optional slug of the organization to be created.

`createOrganization` example

main.js
import Clerk from '@clerk/clerk-js';
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('{{pub_key}}');
await clerk.load();
 
if (clerk.user) {
  const createOrgButton = document.getElementById("create-org-button");
  createOrgButton.addEventListener("click", () => {
    clerk.createOrganization({ name: "test" })
      .then((res) => console.log(res))
      .catch((error) => console.log("An error occurred:", error.errors));
  });
} else {
  document.getElementById("app").innerHTML = `
    <div id="sign-in"></div>
  `;
 
  const signInDiv =
    document.getElementById("sign-in");
 
  clerk.mountSignIn(signInDiv);
}

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clerk + JavaScript App</title>
  </head>
  <body>
    <div id="app"></div>
    <button id="create-org-button">Create Organization</button>
    <script type="module" src="/main.js"></script>
  </body>
</html>

index.html
<div id="sign-in"></div>
<div id="create-org-button"></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();
 
    if (Clerk.user) {
      const createOrgButton = document.getElementById("create-org-button");
      createOrgButton.addEventListener("click", () => {
        Clerk.createOrganization({ name: "test" })
          .then((res) => console.log(res))
          .catch((error) => console.log("An error occurred:", error.errors));
      });
    } else {
      const signInDiv = document.getElementById("sign-in");
 
      Clerk.mountSignIn(signInDiv);
    }
  });
</script>

Last updated on April 1, 2024

getOrganization()

getOrganization parameters

getOrganization example

createOrganization()

createOrganization() params