Docs

You are viewing an archived version of the docs.Go to latest version

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

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>

Warning

Clerk.getOrganizationMemberships() is deprecated and will be removed in the Core 2 version of Clerk. Use User.getOrganizationMemberships() instead.

function getOrganizationMemberships(): Promise<OrganizationMembership[]>;

Get a list of all organizations your current user is a part of in the form of an array of OrganizationMemberships.

Returns

TypeDescription
Promise<OrganizationMembership[]>This method returns a Promise which resolves to the list of OrganizationMemberships for the current user.

Feedback

What did you think of this content?

Last updated on