Skip to main content

​
<CreateOrganizationForm />

The <CreateOrganizationForm /> provides a professional, out-of-the-box interface for users to establish a new organization (sometimes called a Team, Tenant, or Account in B2B applications). When a user successfully creates an organization via this component, Wacht executes a complex lifecycle event:
  1. It provisions the new organization record in the database.
  2. It assigns the creating user as the organization’s “Owner”, instantly granting them maximum RBAC privileges for that tenant.
  3. Crucially, it automatically performs a context switch—updating the user’s active session token so that their activeOrganizationId points to the newly minted organization.

​
Import

import { CreateOrganizationForm } from "@wacht/react-router";

​
Usage

This component fits flawlessly into onboarding wizards, dedicated /organizations/new routes, or within modal dialogs in your application’s settings area. 
import { CreateOrganizationForm } from "@wacht/react-router";

export default function OrganizationSetupRoute() {
  return (
    <div className="flex flex-col items-center justify-center min-h-[70vh] p-4 bg-zinc-50">
      <div className="text-center mb-8">
        <h2 className="text-3xl font-extrabold tracking-tight text-zinc-900 mb-2">
          Create your Team
        </h2>
        <p className="text-zinc-500 max-w-md mx-auto">
          Establish an organization to collaborate with your team members, manage billing, and provision API keys.
        </p>
      </div>
      
      <div className="w-full max-w-md p-8 bg-white border border-zinc-200 rounded-2xl shadow-sm">
        <CreateOrganizationForm />
      </div>
    </div>
  );
}

​
Handling Completion

When a user successfully creates an organization, the component does not automatically redirect. Instead, you should utilize the onSuccess callback to route the user to their newly minted tenant dashboard. 
<CreateOrganizationForm 
  onSuccess={(org) => {
    navigate(`/dashboard/${org.id}`);
  }} 
/>