clerk-orgs

oleh clerk

Multi-tenant B2B SaaS dengan perpindahan organisasi, kontrol akses berbasis peran, dan SSO perusahaan. Mendukung perutean dinamis berbasis organisasi melalui slug URL, pemeriksaan akses berbasis peran (org:admin, org:member), dan pembuatan peran kustom melalui dasbor. Menyertakan komponen OrganizationSwitcher untuk pemilihan organisasi di sisi pengguna dan rendering bersyarat <Show> untuk UI yang dibatasi peran. Menyediakan konteks organisasi sisi server melalui pembantu auth() dengan verifikasi keanggotaan dan pemeriksaan izin. Memungkinkan...

npx skills add https://github.com/clerk/skills --skill clerk-orgs

Organizations (B2B SaaS)

STOP — prerequisite. Organizations must be enabled before any org-related API, hook, or component works. Two paths: (1) Dashboard → Organizations settings, or (2) clerk enable orgs (see "Agent-first: Programmatic org management" below). Pick the Membership mode deliberately: Membership required (default since 2025-08-22) routes signed-in users through the choose-organization task and disables personal accounts, while Membership optional keeps personal accounts available for B2C + B2B coexistence. Pick optional if you need personal subscriptions alongside org subscriptions.

Version: This skill targets current SDKs (@clerk/nextjs v7+, @clerk/react v6+ — Core 3). Core 2 differences are noted inline with > **Core 2 ONLY (skip if current SDK):** callouts — see clerk skill for the full version table.

Should this app use Organizations?

Decide before enabling anything. Read the project, count the signals, then ask the developer - do not enable Organizations silently.

Signals this app is multi-tenant (recommend Organizations):

  • A model that groups users: Team, Workspace, Tenant, Company, Account
  • The same foreign key on most tables: workspace_id, team_id, account_id
  • Routes scoped to a tenant: /[workspace], /[slug]/settings, /t/:tenantId
  • "Invite your team", "members", "seats", or "admin" in UI copy or the README
  • A *_members join table, or hand-rolled role / permission columns
  • Per-seat or per-company pricing

Weaker signals - enough to raise the question, not to answer it:

  • Sharing or collaboration between individual users: a Share, Collaborator, or SharedWith table keyed on two user IDs
  • A role or permission column with no tenant to scope it to
  • "Collaborators", "shared with you", "invite a friend" in copy

Signals this app is single-user (do not recommend):

  • Every table hangs off user_id with no container above it, and nothing is shared
  • No invitation, membership, or sharing concept anywhere
  • Pricing is per person, or there is none

How to act:

What you foundWhat to do
2 or more strong signalsRecommend Organizations and name the signals you saw. New app: clerk init --template b2b-saas. Existing app: clerk enable orgs.
1 strong signal, or any weaker signalRaise it as an option, state the tradeoff, let the developer choose. Sharing between individual users is not multi-tenancy - a Share table pointing at two user IDs has no tenant - but it is often where a product grows one.
Nothing aboveDon't bring it up.

Never enable Organizations without asking. Enabling it also turns on Membership required, which routes every signed-in user through organization selection and disables personal accounts. That is wrong for any app that also serves individuals. If the app needs both, it wants Membership optional.

Quick Start

  1. Enable Organizations — via Dashboard → Organizations settings or clerk enable orgs (see Agent-first section). Pick Membership required (B2B-only) or Membership optional (B2C + B2B).
  2. Create an org — via <OrganizationSwitcher />, <CreateOrganization />, or programmatically with clerkClient().organizations.createOrganization().
  3. Protect routes — read orgId / orgSlug from auth() and gate with has({ role }) or has({ permission }).
  4. Manage members — send invitations via Backend API or the built-in <OrganizationProfile /> tab.
  5. Cap membership — set maxAllowedMemberships at org creation or pick a seat-limited Billing Plan (see clerk-billing skill).

What Do You Need?

TaskReference
System permissions catalog, custom roles, role setsreferences/roles-permissions.md
Invitation lifecycle (create, list, revoke, built-in UI)references/invitations.md
Enterprise SSO setup, provider field access, domain verificationreferences/enterprise-sso.md
Next.js adaptations for orgs (per-page role/permission checks, slug invariants, orgId-scoped writes)references/nextjs-patterns.md
Org errors and symptoms (undefined orgId, has() returning false, no Personal Account)references/errors.md

References

ReferenceDescription
references/roles-permissions.mdDefault + custom roles, System Permissions catalog, permission naming
references/invitations.mdBackend API for invitations + built-in UI
references/enterprise-sso.mdSAML/OIDC per-org, domain verification, correct field access
references/nextjs-patterns.mdNext.js adaptations specific to orgs. For generic Next.js patterns see clerk-nextjs-patterns skill.
references/errors.mdError signatures with root causes and fixes

Dashboard shortcuts

ActionURL
Enable Organizations + Membership modehttps://dashboard.clerk.com/last-active?path=organizations-settings
Manage roles + permissionshttps://dashboard.clerk.com/last-active?path=organizations-settings/roles
Create/edit an organizationhttps://dashboard.clerk.com/last-active?path=organizations
Webhooks for org eventshttps://dashboard.clerk.com/last-active?path=webhooks

Agent-first: Programmatic org management

Org settings (enable toggle, membership cap, admin delete, domains) are patchable via PLAPI Instance Config. Org CRUD + memberships + invitations live in BAPI. Useful for agents seeding orgs, replicating settings across instances, or version-controlling org structure.

Pre-req: a linked project (clerk auth login + clerk link, see clerk-cli) — or an unclaimed app from clerk init: clerk enable orgs and org CRUD via clerk api work with no login at all.

Enable Organizations + settings via CLI

clerk enable orgs

For additional settings (membership cap, verified domains, admin delete), patch the instance config:

clerk api --platform PATCH /v1/platform/applications/<app_id>/instances/<ins_id>/config \
  -d '{"organization_settings":{"max_allowed_memberships":50,"domains_enabled":true,"admin_delete_enabled":true}}'

Create / list / delete orgs (BAPI)

# Create:
clerk api -X POST /v1/organizations \
  -d '{"name":"Acme","slug":"acme","created_by":"user_xxx","max_allowed_memberships":10}'

# List:
clerk api '/v1/organizations?limit=20'

# Get one:
clerk api /v1/organizations/<org_id>

# Update:
clerk api -X PATCH /v1/organizations/<org_id> -d '{"name":"Acme Inc."}'

# Delete:
clerk api -X DELETE /v1/organizations/<org_id>

Memberships

# Add a user to an org:
clerk api -X POST /v1/organizations/<org_id>/memberships \
  -d '{"user_id":"user_xxx","role":"org:admin"}'

# List members:
clerk api '/v1/organizations/<org_id>/memberships?limit=50'

# Update role:
clerk api -X PATCH /v1/organizations/<org_id>/memberships/<user_id> \
  -d '{"role":"org:member"}'

# Remove:
clerk api -X DELETE /v1/organizations/<org_id>/memberships/<user_id>

Invitations

# Send:
clerk api -X POST /v1/organizations/<org_id>/invitations \
  -d '{"email_address":"alice@example.com","role":"org:member","redirect_url":"https://app.com/accept"}'

# List pending:
clerk api '/v1/organizations/<org_id>/invitations?status=pending'

# Revoke:
clerk api -X POST /v1/organizations/<org_id>/invitations/<inv_id>/revoke \
  -d '{"requesting_user_id":"user_xxx"}'

Notes

  • This handles org config + CRUD. Subscription / billing for orgs (org plans, seat-limit pricing) flows through clerk-billing skill.
  • Roles + permissions catalog is editable in references/roles-permissions.md. Custom role creation goes through clerk config patch (instance-level role definitions) — see Dashboard's role editor for the UX equivalent.
  • For SSO / verified domain provisioning, see references/enterprise-sso.md.

Documentation

Key Patterns

Examples use @clerk/nextjs by default. For other frameworks swap the import to @clerk/react (Vite/CRA), @clerk/astro/components, @clerk/vue, @clerk/expo, @clerk/react-router, or @clerk/tanstack-react-start — the feature-level APIs (has(), orgId, <OrganizationSwitcher />, <Show>) are identical across SDKs. Framework-specific patterns (middleware, redirects) live in references/nextjs-patterns.md.

1. Read Organization from Auth

Server-side access to active organization:

import { auth } from '@clerk/nextjs/server'

const { orgId, orgSlug, orgRole } = await auth()
if (!orgId) {
  // user has no active org — either not in any, or viewing Personal Account
}

auth() is Next.js-specific. Equivalent server-side accessors per SDK: auth(event) (Nuxt via event.context.auth()), context.locals.auth() (Astro), getAuth(req) (Express, after clerkMiddleware()). Client-side: useAuth() (React-based SDKs) or composables (Vue/Nuxt). All return the same orgId / orgSlug / orgRole shape.

2. Dynamic Routes with Org Slug

Route-per-org pattern works in any framework supporting file-based dynamic routes. Next.js example:

app/orgs/[slug]/page.tsx
app/orgs/[slug]/settings/page.tsx

Always verify the URL slug matches the active org slug — otherwise users can hit /orgs/other-org/... with a stale orgSlug in their session:

import { auth } from '@clerk/nextjs/server'
import { redirect } from 'next/navigation'

export default async function OrgPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const { orgSlug } = await auth()
  if (orgSlug !== slug) {
    redirect('/dashboard')  // or whatever your "no-access" flow is
  }
  return <div>Welcome to {orgSlug}</div>
}

In Next.js, add a loading.tsx next to a page like this one that gates its render with redirect(): with Cache Components (the create-next-app default), next build fails on request data read outside a <Suspense> boundary.

3. Role-Based Access Control

const { has } = await auth()

if (!has({ role: 'org:admin' })) {
  return <div>Admin access required</div>
}

Permission checks use the same has() surface, for custom Permissions you create in the Dashboard:

if (!has({ permission: 'org:invoices:create' })) {
  redirect('/unauthorized')
}

On the server, has({ permission }) works only with custom Permissions: System Permissions (org:sys_*) aren't in the session token, so checking one there always returns false. Clerk documents permission checks in <Show when={{ permission }}> for custom Permissions only. To require a System Permission, check a role that carries it (has({ role: 'org:admin' })).

Permission naming convention. System Permissions prefix with org:sys_; custom Permissions use org:<resource>:<action>. The full System Permissions catalog lives in references/roles-permissions.md — the short list is:

  • org:sys_memberships:{read, manage}
  • org:sys_profile:{manage, delete}
  • org:sys_domains:{read, manage}
  • org:sys_billing:{read, manage}

Do NOT invent names like org:create, org:manage_members, org:update_metadata — those are not real permission slugs. See references/roles-permissions.md for custom roles and the permission table.

4. Conditional Rendering with <Show>

In a Next.js Server Component, <Show> reads the session from the request, so wrap it in <Suspense>. In a Client Component, it reads client-side auth state and needs no boundary.

import { Show } from '@clerk/nextjs'
import { Suspense } from 'react'

export function AdminControls() {
  return (
    <Suspense>
      <Show when={{ role: 'org:admin' }}>
        <AdminPanel />
      </Show>

      <Show when={{ permission: 'org:invoices:create' }}>
        <NewInvoiceButton />
      </Show>
    </Suspense>
  )
}

Core 2 ONLY (skip if current SDK): Use <Protect role="org:admin"> / <Protect permission="..."> instead of <Show>. <Show> replaced both <Protect> and <SignedIn>/<SignedOut> in Core 3.

Astro template syntax for the same component (imported from @clerk/astro/components):

<Show when={{ role: 'org:admin' }}>
  <AdminPanel />
</Show>

5. OrganizationSwitcher

import { OrganizationSwitcher } from '@clerk/nextjs'

export function OrgSwitcher() {
  return (
    <OrganizationSwitcher
      hidePersonal
      afterCreateOrganizationUrl="/orgs/:slug/dashboard"
      afterSelectOrganizationUrl="/orgs/:slug/dashboard"
    />
  )
}

Key props:

  • hidePersonal: boolean — hide the Personal Account option. Defaults to false. Pass true for B2B-only apps.
  • afterCreateOrganizationUrl, afterSelectOrganizationUrl, afterLeaveOrganizationUrl, afterSelectPersonalUrl — navigation hooks. :slug is substituted at runtime.
  • createOrganizationMode, organizationProfileMode — 'modal' | 'navigation' (default 'modal').

The full prop list lives in the component reference.

6. Session Task — Choose Organization

When Membership required is enabled (the default), users without an org are routed through a choose-organization session task after sign-in. Clerk handles this automatically inside <SignIn />, but you can host the UI yourself:

// app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs'
import type { ReactNode } from 'react'

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ClerkProvider taskUrls={{ 'choose-organization': '/session-tasks/choose-organization' }}>
          {children}
        </ClerkProvider>
      </body>
    </html>
  )
}
// app/session-tasks/choose-organization/page.tsx
import { TaskChooseOrganization } from '@clerk/nextjs'

export default function Page() {
  return <TaskChooseOrganization redirectUrlComplete="/dashboard" />
}

TaskChooseOrganization ships as an imported component in the React-based SDKs (@clerk/nextjs, @clerk/react, @clerk/react-router, @clerk/tanstack-react-start). For the JS Frontend SDK (@clerk/clerk-js) the equivalent is clerk.mountTaskChooseOrganization(node) / clerk.unmountTaskChooseOrganization(node).

Core 2 ONLY (skip if current SDK): Session tasks aren't available. Force an org selection at sign-in by redirecting to a page that renders <OrganizationSwitcher hidePersonal />.

Default Roles + System Permissions

The default roles are org:admin and org:member. Read roles and permissions for their exact System Permissions, custom roles (up to 10 per instance), Creator/Default role settings, and Role Sets.

Billing Checks

has() also supports plan and feature checks when Clerk Billing is enabled:

const { has } = await auth()

has({ plan: 'gold' }) // subscription plan
has({ feature: 'widgets' }) // feature entitlement

Core 2 ONLY (skip if current SDK): has() only supports role and permission. Billing checks aren't available.

See clerk-billing for the full Billing surface and seat-limit plan model.

Enterprise SSO

Per-org SAML/OIDC. Configured in Dashboard → Configure → Enterprise Connections (or per-org: Organizations → select org → SSO Connections). The SSO connection owns its domain directly; no separate Verified Domain is required (and the two features are mutually exclusive on the same domain). Auto-join on first SSO sign-in uses JIT Provisioning, not Verified Domains. Key fact: the provider field lives on enterpriseConnection, not on enterpriseAccounts[0] directly. See references/enterprise-sso.md for the full flow and correct field access.

// Strategy name for Enterprise SSO (Core 3)
strategy: 'enterprise_sso'

Core 2 ONLY (skip if current SDK): Uses strategy: 'saml' and user.samlAccounts instead of user.enterpriseAccounts.

Gotchas

maxAllowedMemberships caps seats

const clerk = await clerkClient()
await clerk.organizations.createOrganization({
  name: 'Acme Corp',
  createdBy: userId,
  maxAllowedMemberships: 10,
})

// Update later:
await clerk.organizations.updateOrganization(orgId, {
  maxAllowedMemberships: 25,
})

For tier-based seat limits tied to a subscription, use a seat-limited Billing Plan (see clerk-billing).

Billing gates Permissions at the Feature level

When Clerk Billing is enabled, has({ permission: 'org:posts:edit' }) returns false if the Feature associated with that permission is not included in the organization's active Plan — even if the user has the Permission assigned via their role. Ensure the Feature is attached to the active Plan in Dashboard → Billing → Plans → Features.

Metadata updates REPLACE, not merge

updateOrganization({ publicMetadata }) overwrites all public metadata. Read first, spread, then write:

const org = await clerk.organizations.getOrganization({ organizationId: orgId })
await clerk.organizations.updateOrganization(orgId, {
  publicMetadata: { ...org.publicMetadata, newField: 'value' },
})

Applies identically to privateMetadata and to user metadata via clerkClient.users.updateUser.

Error Signatures (diagnose fast)

If org roles, permissions, or UI behave unexpectedly, check the organization error signatures before changing code. Configuration and session state cause many of these symptoms.

Authorization pattern

Validate orgSlug === params.slug on every org-scoped page; the session's active organization is authoritative.

For a complete slug-scoped admin-page example, read Next.js organization patterns.

Invitations

For a server-side invitation example and the full lifecycle (list, revoke, bulk create, built-in UI), read references/invitations.md. Check a role that carries org:sys_memberships:manage; has() cannot check System Permissions directly.

See Also

  • clerk-setup — Initial Clerk install
  • clerk-billing — Seat-limit plans, per-plan billing, has({ plan }) / has({ feature })
  • clerk-webhooks — Sync org events to your database (organization.created, organizationMembership.*)
  • clerk-backend-api — Full Backend API reference
  • clerk-nextjs-patterns — Framework-specific middleware, server actions, caching

Lebih banyak skill dari clerk

clerk-testing
clerk
Utilitas pengujian E2E untuk alur autentikasi Clerk di Playwright dan Cypress. Mendukung framework Playwright dan Cypress dengan pola pengaturan khusus framework (globalSetup untuk Playwright, perintah kustom untuk Cypress). Menyediakan utilitas clerkSetup() dan setupClerkTestingToken() untuk menginisialisasi lingkungan pengujian dan melewati deteksi bot. Menyertakan persistensi storageState untuk menggunakan kembali sesi terautentikasi di seluruh pengujian, mengurangi waktu eksekusi pengujian. Membutuhkan kunci API pengujian ( pk_test_* ,...
clerk-swift
clerk
Autentikasi Swift/iOS asli menggunakan ClerkKit dengan alur autentikasi bawaan atau kustom. Mendukung dua mode implementasi: komponen AuthView bawaan atau alur native kustom sepenuhnya, dipilih berdasarkan kebutuhan proyek. Memerlukan pengaturan langsung kunci publik Clerk yang valid dalam konfigurasi aplikasi; secara default tidak menggunakan plist atau pengalihan file lingkungan. Panggilan /v1/environment wajib dilakukan setelah pemasangan paket untuk menentukan ketersediaan fitur (misalnya dukungan Apple Sign In) berdasarkan...
mosaic
clerk
Work on Mosaic UI: styling a component with slot recipes (`defineSlotRecipe` / `useRecipe` / slots / variants), or building a flow — authoring a state machine…
clerk-billing
clerk
Clerk Billing untuk manajemen langganan - merender PricingTable milik Clerk
clerk-nextjs-patterns
clerk
Pola Next.js tingkat lanjut untuk autentikasi, middleware, Server Actions, dan caching berbasis pengguna dengan Clerk. Membedakan auth() sisi server dari hook useAuth() sisi klien; mencampurkannya adalah kesalahan umum yang menyebabkan kerusakan. Mencakup strategi middleware (public-first vs protected-first), perlindungan rute API, dan kode status HTTP yang tepat (401 vs 403). Termasuk pola caching berbasis pengguna dengan unstable_cache dan melindungi Server Actions dari mutasi yang tidak sah. Menyediakan kompatibilitas Core 2...
clerk-expo-patterns
clerk
Pola Expo / React Native dengan Clerk — Cache token SecureStore, OAuth
changesets
clerk
Create or refresh a `.changeset/<slug>.md` for the current branch, or report that none is required. Triggers on "/changesets create", "add a changeset",…
clerk-astro-patterns
clerk
Pola Astro dengan Clerk — middleware, halaman SSR, komponen island,