Skip to main content

​
<OrganizationSwitcher />

The <OrganizationSwitcher /> is the cornerstone UI component for any B2B, multi-tenant application built on Wacht. It provides users with a clean, interactive dropdown menu to rapidly switch their active context between different organizations they belong to. Additionally, it serves as an intuitive portal for users to create brand new organizations or accept pending group invites directly from the interface.

​
Import

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

​
Usage

You will typically place this component adjacent to the <UserButton /> in your application’s primary navigation header. 
import { OrganizationSwitcher, UserButton } from "@wacht/react-router";

export function NavigationBar() {
  return (
    <nav className="flex items-center gap-4 py-3 px-6 bg-white border-b border-zinc-200 shadow-sm">
      <div className="flex-1 font-bold tracking-tight text-zinc-900">
        Acme SaaS
      </div>
      
      <div className="flex items-center gap-3">
        {/* Controls the active B2B tenant for the session */}
        <OrganizationSwitcher />
        
        {/* Manages the individual user identity */}
        <UserButton />
      </div>
    </nav>
  );
}

​
The “Context Switch” Architecture

When a user selects a different organization from the dropdown, it isn’t just updating a piece of state—Wacht executes a highly complex “Context Switch” behind the scenes:
  1. Session Update: The global Wacht session locally updates the activeOrganizationId.
  2. Token Minting: The SDK immediately connects to the Wacht backend to fetch a fresh JWT session token. This new token contains the user’s specific RBAC (Role-Based Access Control) permissions strictly scoped to the newly selected organization.
  3. Reactivity: Any React components or data-fetching libraries (like React Query or Apollo) that hook into Wacht’s session state will automatically re-render or re-validate. This guarantees that your application never accidentally bleeds data between tenants.

​
Conditional Rendering

The <OrganizationSwitcher /> is intelligent. If the currently authenticated user is not a member of any organizations, the component gracefully declines to mount and remains invisible. Because of this, you should ensure you provide a dedicated onboarding pathway—such as rendering a <CreateOrganizationForm /> on an empty dashboard—so brand new users can establish their first organizational context.

​
Building a Custom Switcher Interface

If you are a power user utilizing advanced UI libraries (like Radix UI or shadcn/ui) and need deeper control over the dropdown animations, items, or layout, you can bypass this pre-built component entirely. Instead, interface directly with our underlying tenency hooks: