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>;

Parameters

  • Name
    organizationId
    Type
    string
    Description

    The ID of the organization to be found.

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>;

Parameters

  • 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.

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