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 active org in the o 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.

For the full feature — roles, permissions, invitations, and dashboard setup — see Organizations & roles.

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 o.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 active org in the o 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.

OrganizationRequired

<OrganizationRequired> is the B2B “membership required” gate. When your environment requires organization membership and the signed-in user has no active organization, it renders the org picker (or your own fallback) instead of the children; otherwise it renders the children.

Whether the gate is active is driven by the environment’s organization settings (configured in the dashboard) — you don’t pass a flag. It reads the active org from the JWT, so picking an org clears the gate live (the switch re-mints the token) with no reload. Creating an org from the picker does not activate it — the user must then select it.

Only acts for a signed-in user, so wrap it in <SignedIn> and let signed-out users see your sign-in shell first:

Usage

import { SignedIn, SignedOut, SignIn, OrganizationRequired } from '@torii-js/torii-react';

function App() {
  return (
    <>
      <SignedOut><SignIn /></SignedOut>
      <SignedIn>
        <OrganizationRequired>
          <Dashboard />
        </OrganizationRequired>
      </SignedIn>
    </>
  );
}

Props

Prop	Type	Description
children	ReactNode	The protected app — rendered once the user has an active organization (or when membership isn’t required / orgs are off).
fallback	ReactNode	Custom gate UI. When omitted, renders <OrganizationList> (its create affordance follows the env’s “allow user-created organizations” setting).