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'

const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(pubKey)
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>

createOrganization()

Creates an organization programatically.

Note

You can use the <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'

const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(pubKey)
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>

Feedback

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

Last updated on