Organization

The organization plugin adds multi-tenant organization management to your Solid/Zaidan authentication UI. Users can create, switch between, and manage organizations with members, invitations, and roles.

It contributes:

• An organizations tab to <Settings /> listing every organization the user belongs to plus pending invitations to them
• An <Organization /> shell mounted at /organization/$slug/$path with settings and people tabs
• An <OrganizationSwitcher /> dropdown to switch the active organization, manage it, or create a new one
• An organizationCards plugin slot rendered inside <OrganizationSettings /> so other plugins (e.g. api-key) can attach org-scoped cards
• Solid hooks and mutations for organization endpoints such as useActiveOrganization, useListOrganizations, useInviteMember, and useUpdateMemberRole

Setup

import { betterAuth } from "better-auth"
import { organization } from "better-auth/plugins"

export const auth = betterAuth({
  // ...
  plugins: [
    organization() 
  ]
})

import { createAuthClient } from "@better-auth-ui/solid"
import { organizationClient } from "better-auth/client/plugins"

export const authClient = createAuthClient({
  plugins: [organizationClient()] 
})

npx shadcn@latest add https://better-auth-ui.com/r/solid/organization.json

import type { QueryClient } from "@tanstack/solid-query"
import { useNavigate, useParams } from "@tanstack/solid-router"
import type { JSX } from "solid-js"
import { Show } from "solid-js"

import { AuthProvider } from "@/components/auth/auth-provider"
import { organizationPlugin } from "@/lib/auth/organization-plugin"
import { authClient } from "@/lib/auth-client"

export type ProvidersProps = {
  children?: JSX.Element | (() => JSX.Element)
  queryClient?: QueryClient
}

export function Providers(props: ProvidersProps) {
  const navigate = useNavigate()
  const params = useParams({ strict: false })
  const organizationSlug = () => {
    const slug = params().slug

    if (typeof slug === "string" && slug.length > 0) return slug

    return null
  }

  return (
    <Show keyed when={organizationSlug() ?? "personal"}>
      <AuthProvider
        authClient={authClient}
        redirectTo="/settings/account"
        navigate={navigate}
        queryClient={props.queryClient}
        plugins={[
          organizationPlugin({ slug: organizationSlug() }) 
        ]}
      >
        {props.children}
      </AuthProvider>
    </Show>
  )
}

import { OrganizationSwitcher } from "@/components/auth/organization/organization-switcher"
import { UserButton } from "@/components/auth/user/user-button"

export function Header() {
  return (
    <header class="flex items-center justify-between gap-3 p-4">
      <OrganizationSwitcher />
      <UserButton />
    </header>
  )
}

import { ensureSession as ensureSessionClient } from "@better-auth-ui/solid"
import { ensureSession as ensureSessionServer } from "@better-auth-ui/solid/server"
import { viewPaths } from "@better-auth-ui/core"
import { createFileRoute, notFound, redirect } from "@tanstack/solid-router"
import { createIsomorphicFn } from "@tanstack/solid-start"
import { getRequestHeaders } from "@tanstack/solid-start/server"

import { Settings } from "@/components/auth/settings/settings"
import { auth } from "@/lib/auth"
import { authClient } from "@/lib/auth-client"
import { organizationPlugin } from "@/lib/auth/organization-plugin"

const validSettingsPaths = [
  ...Object.values(viewPaths.settings),
  ...Object.values(organizationPlugin().viewPaths.settings ?? {}) 
]

export const Route = createFileRoute("/settings/$path")({
  async beforeLoad({ params: { path }, context: { queryClient }, location }) {
    if (!validSettingsPaths.includes(path)) {
      throw notFound()
    }

    const ensureSession = createIsomorphicFn()
      .server(() =>
        ensureSessionServer(queryClient, auth, { headers: getRequestHeaders() })
      )
      .client(() => ensureSessionClient(queryClient, authClient))

    const session = await ensureSession()

    if (!session) {
      throw redirect({
        to: "/auth/$path",
        params: { path: "sign-in" },
        search: { redirectTo: location.href }
      })
    }

    return { session }
  },
  component: SettingsPage
})

function SettingsPage() {
  const params = Route.useParams()

  return (
    <div class="mx-auto w-full max-w-3xl p-4 md:p-6">
      <Settings path={params().path} />
    </div>
  )
}

import { ensureSession as ensureSessionClient } from "@better-auth-ui/solid"
import { ensureSession as ensureSessionServer } from "@better-auth-ui/solid/server"
import { createFileRoute, notFound, redirect } from "@tanstack/solid-router"
import { createIsomorphicFn } from "@tanstack/solid-start"
import { getRequestHeaders } from "@tanstack/solid-start/server"

import { Organization } from "@/components/auth/organization/organization"
import { auth } from "@/lib/auth"
import { authClient } from "@/lib/auth-client"
import { organizationPlugin } from "@/lib/auth/organization-plugin"

const validOrganizationPaths = Object.values(
  organizationPlugin().viewPaths.organization ?? {}
)

export const Route = createFileRoute("/organization/$slug/$path")({
  async beforeLoad({ params: { path }, context: { queryClient }, location }) {
    if (!validOrganizationPaths.includes(path)) {
      throw notFound()
    }

    const ensureSession = createIsomorphicFn()
      .server(() =>
        ensureSessionServer(queryClient, auth, { headers: getRequestHeaders() })
      )
      .client(() => ensureSessionClient(queryClient, authClient))

    const session = await ensureSession()

    if (!session) {
      throw redirect({
        to: "/auth/$path",
        params: { path: "sign-in" },
        search: { redirectTo: location.href }
      })
    }

    return { session }
  },
  component: OrganizationPage
})

function OrganizationPage() {
  const params = Route.useParams()

  return (
    <div class="mx-auto w-full max-w-3xl p-4 md:p-6">
      <Organization path={params().path} slug={params().slug} />
    </div>
  )
}

That's it — users can now create organizations from /settings/organizations, switch between them via the header switcher, and manage members and invitations at /organization/$slug/$path.

Slug-based routes

The Solid/Zaidan organization UI uses slug-based routes for organization pages. This avoids relying on stale session-active organization state when users open multiple organizations or navigate directly to a saved link.

This unlocks:

• Shareable, bookmarkable per-org URLs that don't depend on session state
• Fetching the organization identified by the URL without round-tripping setActive
• Letting members keep multiple organizations open in separate tabs without thrashing the active organization

You wire this up by passing the URL slug into organizationPlugin({ slug }). The UI plugin then:

1. Drives useActiveOrganization() to fetch the org matching that slug
2. Rewrites links from <OrganizationSwitcher />, <Organizations />, and the <Organization /> tabs to include /$slug/
3. Swaps the switcher's behavior from setActive to navigate — clicking an organization takes the user to its slug-prefixed route

import { useNavigate, useParams } from "@tanstack/solid-router"
import { Show } from "solid-js"

import { AuthProvider } from "@/components/auth/auth-provider"
import { organizationPlugin } from "@/lib/auth/organization-plugin"
import { authClient } from "@/lib/auth-client"

export function Providers(props: ProvidersProps) {
  const navigate = useNavigate()
  const params = useParams({ strict: false }) 
  const organizationSlug = () => {
    const slug = params().slug

    if (typeof slug === "string" && slug.length > 0) return slug

    return null
  }

  return (
    <Show keyed when={organizationSlug() ?? "personal"}>
      <AuthProvider
        authClient={authClient}
        navigate={navigate}
        queryClient={props.queryClient}
        plugins={[organizationPlugin({ slug: organizationSlug() })]} 
      >
        {props.children}
      </AuthProvider>
    </Show>
  )
}

import { ensureSession as ensureSessionClient } from "@better-auth-ui/solid"
import { ensureSession as ensureSessionServer } from "@better-auth-ui/solid/server"
import { createFileRoute, notFound, redirect } from "@tanstack/solid-router"
import { createIsomorphicFn } from "@tanstack/solid-start"
import { getRequestHeaders } from "@tanstack/solid-start/server"

import { Organization } from "@/components/auth/organization/organization"
import { auth } from "@/lib/auth"
import { authClient } from "@/lib/auth-client"
import { organizationPlugin } from "@/lib/auth/organization-plugin"

const validOrganizationPaths = Object.values(
  organizationPlugin().viewPaths.organization ?? {}
)

export const Route = createFileRoute("/organization/$slug/$path")({
  async beforeLoad({ params: { path }, context: { queryClient }, location }) {
    if (!validOrganizationPaths.includes(path)) {
      throw notFound()
    }

    const ensureSession = createIsomorphicFn()
      .server(() =>
        ensureSessionServer(queryClient, auth, { headers: getRequestHeaders() })
      )
      .client(() => ensureSessionClient(queryClient, authClient))

    const session = await ensureSession()

    if (!session) {
      throw redirect({
        to: "/auth/$path",
        params: { path: "sign-in" },
        search: { redirectTo: location.href }
      })
    }

    return { session }
  },
  component: OrganizationPage
})

function OrganizationPage() {
  const params = Route.useParams()

  return (
    <div class="mx-auto w-full max-w-3xl p-4 md:p-6">
      <Organization path={params().path} slug={params().slug} />
    </div>
  )
}

Internal links — the switcher, organization rows in /settings/organizations, and the tab bar inside <Organization /> — automatically include /$slug/ once organizationPlugin({ slug }) is wired in.

Customize where the switcher navigates

When slug-based routing is enabled, clicking an organization in <OrganizationSwitcher /> navigates to /organization/$slug/settings by default, and clicking the personal account navigates to auth.basePaths.settings.

If you'd rather land on a custom route, pass the setActive prop to take over navigation entirely. The plugin's default navigation is skipped — you receive the picked organization (or null for personal) and own what happens next:

import { useNavigate } from "@tanstack/solid-router"

import { OrganizationSwitcher } from "@/components/auth/organization/organization-switcher"

export function Header() {
  const navigate = useNavigate()

  return (
    <OrganizationSwitcher
      setActive={(organization) => {
        navigate({
          to: organization ? `/${organization.slug}/dashboard` : "/dashboard"
        })
      }}
    />
  )
}

setActive also works outside slug-aware routes — in that mode the default behavior is authClient.organization.setActive, and passing setActive lets you intercept the picker.

Options

organizationPlugin({
  // Pass a string slug for org routes, null for non-org routes, or omit it to use session fallback.
  slug: "acme",
  // Disable the slug-availability check that runs while typing a slug.
  checkSlug: false,
  // Override path segments (defaults shown).
  viewPaths: {
    settings: { organizations: "organizations" },
    organization: { settings: "settings", people: "people" }
  },
  // Disable logo upload, or customize the resize / size.
  logo: { enabled: false },
  // Replace the default role labels.
  roles: { owner: "Owner", admin: "Admin", member: "Member" },
  // Add labels for custom server roles without redefining built-ins.
  additionalRoles: { billing: "Billing" }
})

Localization

Read these inside custom slot components via useAuthPlugin(organizationPlugin).localization.

Solid Hooks

The copied Zaidan components read the configured client from <AuthProvider> with useAuth(). If you build custom organization UI with the low-level @better-auth-ui/solid hooks, pass your configured authClient as shown in the linked Solid API docs.

Queries

• useActiveOrganization() — Full organization for the URL slug when organizationPlugin({ slug }) is set, or the active session organization when slug is omitted
• useListOrganizations() — All organizations the signed-in user belongs to
• useListOrganizationMembers() — Members of the active organization
• useListOrganizationInvitations() — Invitations for the active organization
• useListUserInvitations() — Pending invitations addressed to the signed-in user
• useHasPermission() — Check the current member's permission against the active organization

Mutations

• useCreateOrganization() — Create a new organization
• useUpdateOrganization() — Update name / slug / logo of the active organization
• useDeleteOrganization() — Delete an organization
• useSetActiveOrganization() — Switch the active organization outside slug-aware routing
• useLeaveOrganization() — Leave an organization
• useInviteMember() — Invite a member by email
• useRemoveMember() — Remove a member
• useUpdateMemberRole() — Update a member's role
• useCancelInvitation() — Cancel a pending invitation
• useAcceptInvitation() — Accept an invitation
• useRejectInvitation() — Reject an invitation
• useCheckOrganizationSlug() — Check whether an organization slug is available

Components

These previews use seeded Storybook fixtures and do not call live Better Auth endpoints.

<OrganizationSwitcher />

Dropdown that shows the active organization, lets the user switch between organizations, and exposes a "Create organization" entry. Drop it in your app shell — typically next to <UserButton />.

import { OrganizationSwitcher } from "@/components/auth/organization/organization-switcher"

import { OrganizationDemoWrapper } from "./organization-demo-wrapper"

export function OrganizationSwitcherDemo() {
  return (
    <OrganizationDemoWrapper>
      <OrganizationSwitcher />
    </OrganizationDemoWrapper>
  )
}

<Organization />

The full organization management shell mounted at /organization/$slug/$path. Renders settings (profile + danger zone) and people (members + invitations) tabs for the organization identified by the slug.

import { Organization } from "@/components/auth/organization/organization"

import { OrganizationDemoWrapper } from "./organization-demo-wrapper"

export function OrganizationDemo() {
  return (
    <OrganizationDemoWrapper>
      <Organization path="settings" slug="acme" />
    </OrganizationDemoWrapper>
  )
}

<OrganizationSettings />

The contents of the settings tab — <OrganizationProfile />, any plugin-contributed organizationCards (e.g. <OrganizationApiKeys /> from the api-key plugin), then <OrganizationDangerZone />. Drop it into a custom layout if you don't want the tabbed shell.

import { OrganizationSettings } from "@/components/auth/organization/organization-settings"

import { OrganizationDemoWrapper } from "./organization-demo-wrapper"

export function OrganizationSettingsDemo() {
  return (
    <OrganizationDemoWrapper>
      <OrganizationSettings />
    </OrganizationDemoWrapper>
  )
}

<OrganizationProfile />

Editable profile card for the active organization: logo, display name, and slug. Submits via useUpdateOrganization.

import { OrganizationProfile } from "@/components/auth/organization/organization-profile"

import { OrganizationDemoWrapper } from "./organization-demo-wrapper"

export function OrganizationProfileDemo() {
  return (
    <OrganizationDemoWrapper>
      <OrganizationProfile />
    </OrganizationDemoWrapper>
  )
}

<OrganizationDangerZone />

Danger-zone card with <LeaveOrganization /> and <DeleteOrganization /> rows.

import { OrganizationDangerZone } from "@/components/auth/organization/organization-danger-zone"

import { OrganizationDemoWrapper } from "./organization-demo-wrapper"

export function OrganizationDangerZoneDemo() {
  return (
    <OrganizationDemoWrapper>
      <OrganizationDangerZone />
    </OrganizationDemoWrapper>
  )
}

<OrganizationPeople />

The contents of the people tab — <OrganizationMembers /> on top, <OrganizationInvitations /> below.

import { OrganizationPeople } from "@/components/auth/organization/organization-people"
import { OrganizationDemoWrapper } from "./organization-demo-wrapper"

export function OrganizationPeopleDemo() {
  return (
    <OrganizationDemoWrapper>
      <OrganizationPeople />
    </OrganizationDemoWrapper>
  )
}

<OrganizationMembers />

Searchable, sortable, filter-by-role table of the active organization's members with an invite control and per-row role / remove actions.

import { OrganizationMembers } from "@/components/auth/organization/organization-members"
import { OrganizationDemoWrapper } from "./organization-demo-wrapper"

export function OrganizationMembersDemo() {
  return (
    <OrganizationDemoWrapper>
      <OrganizationMembers />
    </OrganizationDemoWrapper>
  )
}

<OrganizationInvitations />

Pending invitations for the active organization as a table aligned with <OrganizationMembers />. Includes role / status filters and a per-row cancel action.

import { OrganizationInvitations } from "@/components/auth/organization/organization-invitations"
import { OrganizationDemoWrapper } from "./organization-demo-wrapper"

export function OrganizationInvitationsDemo() {
  return (
    <OrganizationDemoWrapper>
      <OrganizationInvitations />
    </OrganizationDemoWrapper>
  )
}

<OrganizationsSettings />

The user-level organizations panel rendered at /settings/organizations. Lists every organization the user belongs to (with a "Create organization" button and empty state) plus invitations addressed to the user.

import { OrganizationsSettings } from "@/components/auth/organization/organizations-settings"

import { OrganizationDemoWrapper } from "./organization-demo-wrapper"

export function OrganizationsSettingsDemo() {
  return (
    <OrganizationDemoWrapper>
      <OrganizationsSettings />
    </OrganizationDemoWrapper>
  )
}

<Organizations />

List of organizations the user belongs to with a "Create organization" button and per-row Manage control. Embedded inside <OrganizationsSettings />.

<UserInvitations />

Invitations addressed to the signed-in user across every organization, with Accept / Reject actions. Embedded inside <OrganizationsSettings />.

import { UserInvitations } from "@/components/auth/organization/user-invitations"
import { OrganizationDemoWrapper } from "./organization-demo-wrapper"

export function UserInvitationsDemo() {
  return (
    <OrganizationDemoWrapper>
      <UserInvitations />
    </OrganizationDemoWrapper>
  )
}

<CreateOrganizationDialog />

Modal dialog with the new-organization form. Owned by <OrganizationSwitcher /> and <Organizations />; mount it directly when you want to open the create flow from your own surface.

<InviteMemberDialog />

Modal dialog for inviting a new member by email. Owned by <OrganizationMembers /> and <OrganizationInvitations />; mount it directly to drive the invite flow from a custom action.

<DeleteOrganizationDialog />

Confirmation dialog for deleting an organization (owner permission, server-side).

Related APIs

• Solid organization queries
• Solid organization mutations