Organization methods
These methods on the Clerk class allow you to create and read information about Organizations.
The following examples assume:
- you have followed the quickstart in order to add Clerk to your JavaScript application
- you have enabled the Organizations feature in your Clerk Dashboard
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.
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);
}<!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><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.
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.
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);
}<!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><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>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
| Type | Description |
|---|---|
Promise<OrganizationMembership[]> | This method returns a Promise which resolves to the list of OrganizationMemberships for the current user. |
Feedback
Last updated on