Docs

Organization methods

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

The following examples assume:

getOrganization()

Retrieves information for a specific organization.

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

getOrganization parameters

  • Name
    organizationId
    Type
    string
    Description

    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('YOUR_PUBLISHABLE_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="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();

    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.

Note

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

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

createOrganization() params

  • Name
    name
    Type
    string
    Description

    The name of the organization to be created.

  • Name
    slug?
    Type
    string
    Description

    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('YOUR_PUBLISHABLE_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="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();

    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>

Feedback

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