Create an organization
Organizations are created by your end users. Whichever signed-in user creates an organization takes on the Creator role for that organization.
There are two ways to create an organization:
- Using the
<CreateOrganization />component - Using the
createOrganization()method
Create an organization using the <CreateOrganization /> component
The simplest way to create an organization is to use Clerk's <CreateOrganization /> component. The <CreateOrganization /> component is used to render an organization creation UI that allows users to create brand new organizations within your application. See the component reference for more information.
Create an organization using the createOrganization() method
If you would like to create an organization programmatically, you can use the createOrganization() method. In React and Next.js applications, you can access the createOrganization method via the useOrganizationList() hook. In JavaScript applications, the same method is available directly on the Clerk object. The createOrganization method can also be accessed through the Backend SDK.
The only required parameter when creating a new organization is the organization name, which can be any string. You can also specify an optional slug for the new organization. If provided, the organization slug can contain only lowercase alphanumeric characters (letters and digits) and the dash "-". Organization slugs must be unique for the instance.
// Form to create a new organization. The current user
// will be given the Creator role.
import { useOrganizationList } from "@clerk/nextjs";
import { FormEventHandler, useState } from "react";
export default function CreateOrganization() {
const { createOrganization } = useOrganizationList();
const [organizationName, setOrganizationName] = useState("");
const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {
e.preventDefault();
createOrganization({ name: organizationName });
setOrganizationName("");
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="organizationName"
value={organizationName}
onChange={(e) => setOrganizationName(e.currentTarget.value)}
/>
<button type="submit">Create organization</button>
</form>
);
}// Form to create a new organization. The current user
// will receive the Creator role.
import { useOrganizationList } from "@clerk/clerk-react";
import { FormEventHandler, useState } from "react";
export default function CreateOrganization() {
const { createOrganization } = useOrganizationList();
const [organizationName, setOrganizationName] = useState("");
const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {
e.preventDefault();
createOrganization({ name: organizationName });
setOrganizationName("");
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="organizationName"
value={organizationName}
onChange={(e) => setOrganizationName(e.currentTarget.value)}
/>
<button type="submit">Create organization</button>
</form>
);
}<!-- Form to create an organization -->
<form id="new_organization">
<div>
<label>Name</label>
<br />
<input name="name" />
</div>
<button>Create organization</button>
</form>
<script>
const form = document.getElementById("new_organization");
form.addEventListener('submit', function(e) {
e.preventDefault();
const inputEl = form.getElementsByTagName("input")[0];
if (!inputEl) {
return;
}
try {
await window.Clerk.createOrganization({ name: inputEl.value });
} catch (err) {
console.error(err);
}
});
</script>Feedback
Last updated on