Conditional Rendering

Show or hide UI based on user roles and permissions.

Three components for permission-gated rendering. No hooks, no conditionals — wrap your UI and the component handles the rest.

import { Permission, WhenPermission } from '@buildbase/sdk/react';

<WhenPermission permission={Permission.WORKSPACE_BILLING_MANAGE}>
  <BillingSettings />
</WhenPermission>;

WhenPermission

Renders children if the user has the specified permission(s).

<WhenPermission permission={Permission.WORKSPACE_MEMBERS_INVITE}>
  <InviteForm />
</WhenPermission>

<WhenPermission
  permission={Permission.WORKSPACE_MEMBERS_REMOVE}
  fallback={<p>Contact an admin to remove members.</p>}
>
  <RemoveMemberButton />
</WhenPermission>

Prop	Type	Description
`permission`	`string` or `string[]`	Permission(s) required. Arrays require all.
`fallback`	`ReactNode`	Optional content when user lacks the permission

WhenRoles

Checks the user's organization-level role:

import { WhenRoles } from '@buildbase/sdk/react';

<WhenRoles roles={['admin', 'super-admin']}>
  <a href="/admin">Admin Dashboard</a>
</WhenRoles>;

WhenWorkspaceRoles

Checks the user's role within the active workspace:

import { WhenWorkspaceRoles } from '@buildbase/sdk/react';

<WhenWorkspaceRoles roles={['owner', 'admin']}>
  <a href="/settings">Workspace Settings</a>
</WhenWorkspaceRoles>;

When to use which

Component	Checks	Use for
`WhenPermission`	Granular permission	"Can this user manage billing?"
`WhenRoles`	Global org role	"Is this user a super-admin?"
`WhenWorkspaceRoles`	Workspace role	"Is this user the workspace owner?"

Note

Prefer WhenPermission for most access control. Role checks are useful when you need to gate on the role itself rather than a specific capability.

Composing with authentication

Nest inside WhenAuthenticated to handle both auth and authorization:

import {
  Permission,
  WhenAuthenticated,
  WhenPermission,
  WhenUnauthenticated,
} from '@buildbase/sdk/react';

function App() {
  return (
    <>
      <WhenAuthenticated>
        <Dashboard />
        <WhenPermission permission={Permission.WORKSPACE_BILLING_MANAGE}>
          <BillingSettings />
        </WhenPermission>
      </WhenAuthenticated>
      <WhenUnauthenticated>
        <LoginPage />
      </WhenUnauthenticated>
    </>
  );
}

Next Steps

Feature Flags — Gate features by plan or user.
Billing — Subscription plans and checkout.