OrganizationList

<OrganizationList> is the prebuilt active-organization picker. It lists every organization the signed-in user belongs to inside a styled card (the same chrome as <SignIn>, with the “Powered by” footer) and switches the active organization when one is picked.

Selecting an org calls switchActiveOrganization, which re-mints the access token with the new org_id claim and persists the choice server-side, so a reload keeps the same active org. Everything, the org list, labels, theme, is read from <ToriiProvider> context.

When to use

• Use <OrganizationList> as a post-sign-in gate (“choose an organization to continue”) or a standalone switcher surface.
• It’s the B2B counterpart to the account widgets; reach for it when your app is multi-tenant and the user can belong to more than one org.

Usage

import { SignedIn, OrganizationList, useOrganizations } from '@torii-js/torii-react';

function OrgGate({ children }: { children: React.ReactNode }) {
  const { activeOrganizationId } = useOrganizations();
  return (
    <SignedIn>
      {activeOrganizationId ? children : <OrganizationList />}
    </SignedIn>
  );
}

Props

All optional: the card is fully wired by context.

Prop	Type	Description
onSelected	(organizationId: string) => void	Fired with an org id after the active org switches successfully and after a new org is created via the inline create form. In the create case the new org may not yet be the active org, so don’t assume the id passed here is now active. Route here if your app keeps the org in the URL.
onError	(error: Error) => void	Fired when switching the active org fails.
onCreate	() => void	Overrides the “Create organization” button. When provided, the button fires this (e.g. route to a custom create flow) instead of opening the built-in inline create form.
hideCreate	boolean	Hides the create affordance entirely.

Behaviour

• Active-org driven: the currently-active org (the JWT org_id claim) is marked with an “Active” badge.
• Create: by default the button toggles an inline create form. Pass onCreate to take over, e.g. to route to a richer onboarding flow.
• Runtime-gated: renders null until the SDK runtime is ready, so it never flashes unstyled.
• Branded footer: the “Powered by” footer follows the same tier rules as the auth cards.

Theming

Honours the appearance prop on <ToriiProvider>. Relevant slots: card, headerTitle, headerSubtitle, listItem, secondaryButton, poweredBy. See elements.

OrganizationSwitcher

<OrganizationSwitcher> is the compact nav-dropdown counterpart to <OrganizationList>. Where <OrganizationList> is a full card surface for a post-sign-in gate, the switcher is a single active-org control you drop into a navbar or header: it shows the current org and opens a menu to switch to another one. It renders null when the signed-in user has no organizations, so it stays out of the way for single-tenant users.

Switching re-mints the access token with the new org_id claim and persists the choice server-side, exactly like <OrganizationList>. The list, labels, and theme are read from <ToriiProvider> context.

Usage

import { OrganizationSwitcher } from '@torii-js/torii-react';

function Navbar() {
  return (
    <OrganizationSwitcher
      onSwitched={(organization) => console.log('now active:', organization.name)}
    />
  );
}

Props

All optional: the dropdown is fully wired by context.

Prop	Type	Description
onSwitched	(organization: ClientOrganizationSummary) => void	Fired after the active org switches successfully, with the full org summary (not just the id) of the now-active org.
onError	(error: Error) => void	Fired when switching the active org fails.
onCreateOrganization	() => void	When provided, the menu shows a “Create” entry that invokes this callback (e.g. open your own create dialog). Omit to hide the entry.
onManageOrganization	() => void	When provided, the active-org header shows a “Manage” action that invokes this callback (e.g. route to org settings). Omit to hide it.