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.

The only required parameter when creating a new organization is the organization name, which can be any string. In React and Next.js applications, the useOrganizationList() hook returns the createOrganization method. In JavaScript applications, the same method is available directly on the Clerk object.

The createOrganization method can also be accessed through the Backend API.

Organization slug

When creating an organization, you can 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.

Usage


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