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

Feedback

What did you think of this content?

Last updated on