feat(clerk-js,ui): gate self-serve Directory Sync on its own organization flag

.changeset/self-serve-directory-sync-org-flag.md

@@ -0,0 +1,8 @@
+---
+'@clerk/shared': minor
+'@clerk/clerk-js': minor
+'@clerk/ui': minor
+'@clerk/mosaic': patch
+---
+
+Add `selfServeDirectorySyncEnabled` to `OrganizationResource`. Self-serve Directory Sync is now enabled per organization by this setting instead of following `selfServeSSOEnabled`. In `<OrganizationProfile />`, the Security page now appears for organizations that have only Directory Sync enabled, and their admins can manage the connection's directory. Organizations that have self-serve SSO without Directory Sync no longer see the Directory Sync section.

packages/clerk-js/src/core/resources/Organization.ts

@@ -82,6 +82,7 @@ export class Organization extends BaseResource implements OrganizationResource {
   pendingInvitationsCount = 0;
   maxAllowedMemberships!: number;
   selfServeSSOEnabled = false;
+  selfServeDirectorySyncEnabled = false;
   exclusiveMembership = false;
 
   constructor(data: OrganizationJSON | OrganizationJSONSnapshot) {
@@ -509,6 +510,7 @@ export class Organization extends BaseResource implements OrganizationResource {
     this.maxAllowedMemberships = data.max_allowed_memberships || 0;
     this.adminDeleteEnabled = data.admin_delete_enabled || false;
     this.selfServeSSOEnabled = data.self_serve_sso_enabled || false;
+    this.selfServeDirectorySyncEnabled = data.self_serve_directory_sync_enabled || false;
     this.exclusiveMembership = data.exclusive_membership || false;
     this.createdAt = unixEpochToDate(data.created_at);
     this.updatedAt = unixEpochToDate(data.updated_at);
@@ -529,6 +531,7 @@ export class Organization extends BaseResource implements OrganizationResource {
       max_allowed_memberships: this.maxAllowedMemberships,
       admin_delete_enabled: this.adminDeleteEnabled,
       self_serve_sso_enabled: this.selfServeSSOEnabled,
+      self_serve_directory_sync_enabled: this.selfServeDirectorySyncEnabled,
       exclusive_membership: this.exclusiveMembership,
       created_at: this.createdAt.getTime(),
       updated_at: this.updatedAt.getTime(),

packages/clerk-js/src/core/resources/__tests__/Organization.test.ts

@@ -56,6 +56,7 @@ describe('Organization', () => {
       maxAllowedMemberships: 3,
       adminDeleteEnabled: true,
       selfServeSSOEnabled: true,
+      selfServeDirectorySyncEnabled: false,
       createdAt: expect.any(Date),
       updatedAt: expect.any(Date),
       publicMetadata: {
@@ -64,6 +65,33 @@ describe('Organization', () => {
     });
   });
 
+  it('parses self_serve_directory_sync_enabled and keeps it in the snapshot', () => {
+    const organization = new Organization({
+      object: 'organization',
+      id: 'test_id',
+      name: 'test_name',
+      public_metadata: {},
+      slug: 'test_slug',
+      image_url: '',
+      created_at: 12345,
+      updated_at: 5678,
+      members_count: 1,
+      pending_invitations_count: 0,
+      admin_delete_enabled: true,
+      max_allowed_memberships: 3,
+      has_image: false,
+      self_serve_sso_enabled: false,
+      self_serve_directory_sync_enabled: true,
+    });
+
+    expect(organization.selfServeSSOEnabled).toBe(false);
+    expect(organization.selfServeDirectorySyncEnabled).toBe(true);
+    expect(organization.__internal_toSnapshot()).toMatchObject({
+      self_serve_sso_enabled: false,
+      self_serve_directory_sync_enabled: true,
+    });
+  });
+
   describe('enterprise connections', () => {
     it('fetches enterprise connections from the org-scoped path', async () => {
       const enterpriseConnectionsJSON: EnterpriseConnectionJSON[] = [

packages/mosaic/src/features/switcher/__tests__/switcher.pages.test.tsx

@@ -8,17 +8,18 @@ import type { CustomPagesOptions } from '../switcher.pages';
 import { useCustomPages, useOrganizationProfilePages, useUserProfilePages } from '../switcher.pages';
 
 let selfServeSSOEnabled: boolean;
+let selfServeDirectorySyncEnabled: boolean;
 let environment: {
   commerceSettings: { billing: { user: { enabled: boolean }; organization: { enabled: boolean } } };
   apiKeysSettings: { user_api_keys_enabled: boolean; orgs_api_keys_enabled: boolean };
-  userSettings: { enterpriseSSO: { self_serve_sso: boolean } };
+  userSettings: { enterpriseSSO: { self_serve_sso: boolean; self_serve_directory_sync: boolean } };
 };
 
 vi.mock('@clerk/shared/react', async importOriginal => {
   const actual = await importOriginal<typeof SharedReact>();
   return {
     ...actual,
-    useClerk: () => ({ organization: { selfServeSSOEnabled } }),
+    useClerk: () => ({ organization: { selfServeSSOEnabled, selfServeDirectorySyncEnabled } }),
   };
 });
 
@@ -66,10 +67,11 @@ const docs: CustomProfileItem = {
 beforeEach(() => {
   emitted = undefined;
   selfServeSSOEnabled = false;
+  selfServeDirectorySyncEnabled = false;
   environment = {
     commerceSettings: { billing: { user: { enabled: false }, organization: { enabled: false } } },
     apiKeysSettings: { user_api_keys_enabled: false, orgs_api_keys_enabled: false },
-    userSettings: { enterpriseSSO: { self_serve_sso: false } },
+    userSettings: { enterpriseSSO: { self_serve_sso: false, self_serve_directory_sync: false } },
   };
 });
 
@@ -113,6 +115,15 @@ describe('useOrganizationProfilePages', () => {
     selfServeSSOEnabled = true;
     expect(renderHook(() => useOrganizationProfilePages()).result.current).toEqual(['general', 'members', 'security']);
   });
+
+  it('adds security when the active organization allows self-serve Directory Sync without SSO', () => {
+    environment.userSettings.enterpriseSSO.self_serve_sso = true;
+    environment.userSettings.enterpriseSSO.self_serve_directory_sync = true;
+    expect(renderHook(() => useOrganizationProfilePages()).result.current).toEqual(['general', 'members']);
+
+    selfServeDirectorySyncEnabled = true;
+    expect(renderHook(() => useOrganizationProfilePages()).result.current).toEqual(['general', 'members', 'security']);
+  });
 });
 
 describe('useCustomPages', () => {

packages/mosaic/src/features/switcher/switcher.pages.tsx

@@ -1,6 +1,7 @@
 import {
   disabledOrganizationAPIKeysFeature,
   disabledOrganizationBillingFeature,
+  disabledSelfServeDirectorySyncFeature,
   disabledSelfServeSSOFeature,
   disabledUserAPIKeysFeature,
   disabledUserBillingFeature,
@@ -51,7 +52,7 @@ export function useOrganizationProfilePages(): OrganizationProfilePageId[] {
   if (!disabledOrganizationAPIKeysFeature(clerk, environment)) {
     pages.push('apiKeys');
   }
-  if (!disabledSelfServeSSOFeature(clerk, environment)) {
+  if (!disabledSelfServeSSOFeature(clerk, environment) || !disabledSelfServeDirectorySyncFeature(clerk, environment)) {
     pages.push('security');
   }
   return pages;

packages/shared/src/internal/clerk-js/__tests__/componentGuards.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest';
+
+import type { Clerk, EnvironmentResource } from '@/types';
+
+import { disabledSelfServeDirectorySyncFeature, disabledSelfServeSSOFeature } from '../componentGuards';
+
+type Flags = {
+  selfServeSSO?: boolean;
+  selfServeDirectorySync?: boolean;
+  orgSSO?: boolean;
+  orgDirectorySync?: boolean;
+};
+
+const setup = ({
+  selfServeSSO = true,
+  selfServeDirectorySync = true,
+  orgSSO = false,
+  orgDirectorySync = false,
+}: Flags) => {
+  const clerk = {
+    organization: { selfServeSSOEnabled: orgSSO, selfServeDirectorySyncEnabled: orgDirectorySync },
+  } as unknown as Clerk;
+  const environment = {
+    userSettings: {
+      enterpriseSSO: {
+        enabled: true,
+        self_serve_sso: selfServeSSO,
+        self_serve_directory_sync: selfServeDirectorySync,
+      },
+    },
+  } as unknown as EnvironmentResource;
+  return [clerk, environment] as const;
+};
+
+describe('disabledSelfServeSSOFeature', () => {
+  it('is enabled when the instance and the organization allow self-serve SSO', () => {
+    expect(disabledSelfServeSSOFeature(...setup({ orgSSO: true }))).toBe(false);
+  });
+
+  it('is disabled when the organization does not allow self-serve SSO', () => {
+    expect(disabledSelfServeSSOFeature(...setup({ orgSSO: false, orgDirectorySync: true }))).toBe(true);
+  });
+
+  it('is disabled when the instance does not allow self-serve SSO', () => {
+    expect(disabledSelfServeSSOFeature(...setup({ selfServeSSO: false, orgSSO: true }))).toBe(true);
+  });
+});
+
+describe('disabledSelfServeDirectorySyncFeature', () => {
+  it('is enabled when the organization allows Directory Sync, even without self-serve SSO', () => {
+    expect(disabledSelfServeDirectorySyncFeature(...setup({ orgSSO: false, orgDirectorySync: true }))).toBe(false);
+  });
+
+  it('is enabled when the organization allows both SSO and Directory Sync', () => {
+    expect(disabledSelfServeDirectorySyncFeature(...setup({ orgSSO: true, orgDirectorySync: true }))).toBe(false);
+  });
+
+  it('is disabled when the organization allows SSO but not Directory Sync', () => {
+    expect(disabledSelfServeDirectorySyncFeature(...setup({ orgSSO: true, orgDirectorySync: false }))).toBe(true);
+  });
+
+  it('is disabled when the instance does not allow self-serve SSO', () => {
+    expect(disabledSelfServeDirectorySyncFeature(...setup({ selfServeSSO: false, orgDirectorySync: true }))).toBe(true);
+  });
+
+  it('is disabled when the instance does not allow self-serve Directory Sync', () => {
+    expect(
+      disabledSelfServeDirectorySyncFeature(...setup({ selfServeDirectorySync: false, orgDirectorySync: true })),
+    ).toBe(true);
+  });
+
+  it('is disabled without an active organization', () => {
+    const [, environment] = setup({});
+    expect(disabledSelfServeDirectorySyncFeature({ organization: null } as unknown as Clerk, environment)).toBe(true);
+  });
+});

packages/shared/src/internal/clerk-js/componentGuards.ts

@@ -52,8 +52,9 @@ export const disabledSelfServeSSOFeature: ComponentGuard = (clerk, environment)
 
 export const disabledSelfServeDirectorySyncFeature: ComponentGuard = (clerk, environment) => {
   return (
-    disabledSelfServeSSOFeature(clerk, environment) ||
-    !environment?.userSettings.enterpriseSSO.self_serve_directory_sync
+    !environment?.userSettings.enterpriseSSO.self_serve_sso ||
+    !environment?.userSettings.enterpriseSSO.self_serve_directory_sync ||
+    !clerk.organization?.selfServeDirectorySyncEnabled
   );
 };
 

packages/shared/src/types/json.ts

@@ -476,6 +476,7 @@ export interface OrganizationJSON extends ClerkResourceJSON {
   admin_delete_enabled: boolean;
   max_allowed_memberships: number;
   self_serve_sso_enabled?: boolean;
+  self_serve_directory_sync_enabled?: boolean;
   exclusive_membership?: boolean;
 }
 

packages/shared/src/types/organization.ts

@@ -95,6 +95,10 @@ export interface OrganizationResource extends ClerkResource, BillingPayerMethods
    * Whether the Organization allows self-serve SSO.
    */
   selfServeSSOEnabled: boolean;
+  /**
+   * Whether the Organization allows self-serve Directory Sync.
+   */
+  selfServeDirectorySyncEnabled: boolean;
   /**
    * Whether the Organization enforces exclusive membership, meaning members must have it set as their active Organization. Defaults to `false` for instances that have not adopted the feature.
    */

packages/ui/src/components/OrganizationProfile/OrganizationSecurityPage.tsx

@@ -4,8 +4,6 @@ import React, { useState } from 'react';
 import { Header } from '@/ui/elements/Header';
 import { ProfileCard } from '@/ui/elements/ProfileCard';
 
-import { useProtect } from '../../common';
-import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';
 import { ConfigureDirectorySyncWizard } from '../ConfigureDirectorySync/ConfigureDirectorySyncWizard';
 import { SecurityDirectorySyncSection } from '../ConfigureDirectorySync/SecurityDirectorySyncSection';
@@ -17,6 +15,7 @@ import { SecurityBackControl } from './SecurityBackControl';
 import { SecuritySSOBypassSection } from './SecuritySSOBypassSection';
 import { SecuritySsoSection } from './SecuritySsoSection';
 import { SSOBypassAllowlistPage } from './SSOBypassAllowlistPage';
+import { useSecurityCapabilities } from './useSecurityCapabilities';
 
 type OrganizationSecurityPageProps = {
   contentRef: React.RefObject<HTMLDivElement>;
@@ -41,9 +40,7 @@ export const OrganizationSecurityPage = ({ contentRef }: OrganizationSecurityPag
 };
 
 const OrganizationSecurityPageContent = ({ contentRef }: OrganizationSecurityPageProps) => {
-  const { shouldShowSelfServeSSO } = useOrganizationProfileContext();
-  const canManageConnections = useProtect({ permission: 'org:sys_entconns:manage' }) && shouldShowSelfServeSSO;
-  const canManageSSOBypass = useProtect({ permission: 'org:sys_entconns_sso_bypass:manage' });
+  const { canConfigureSso, canConfigureDirectorySync, canManageSSOBypass } = useSecurityCapabilities();
 
   const {
     organization,
@@ -59,10 +56,8 @@ const OrganizationSecurityPageContent = ({ contentRef }: OrganizationSecurityPag
     enterpriseConnectionMutations,
     organizationDomains,
     organizationDomainMutations,
-  } = useOrganizationEnterpriseConnection({ manage: canManageConnections });
+  } = useOrganizationEnterpriseConnection({ manage: canConfigureSso });
 
-  const { userSettings } = useEnvironment();
-  const showDirectorySync = canManageConnections && userSettings.enterpriseSSO.self_serve_directory_sync;
   const showSSOBypass = canManageSSOBypass && enterpriseConnections.length > 0;
 
   const [requestedView, setRequestedView] = useState<SecurityPageView>({ kind: 'overview' });
@@ -161,11 +156,11 @@ const OrganizationSecurityPageContent = ({ contentRef }: OrganizationSecurityPag
         enterpriseConnectionMutations={enterpriseConnectionMutations}
         organizationName={organization?.name ?? ''}
         contentRef={contentRef}
-        onConfigure={canManageConnections ? openWizard : undefined}
-        onOpenConnection={canManageConnections ? openConnection : undefined}
+        onConfigure={canConfigureSso ? openWizard : undefined}
+        onOpenConnection={canConfigureSso ? openConnection : undefined}
       />
       {showSSOBypass && <SecuritySSOBypassSection onManage={() => setRequestedView({ kind: 'ssoBypass' })} />}
-      {showDirectorySync && (
+      {canConfigureDirectorySync && (
         <SecurityDirectorySyncSection
           organizationName={organization?.name ?? ''}
           contentRef={contentRef}

packages/ui/src/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx

@@ -565,6 +565,27 @@ describe('OrganizationProfile', () => {
       await waitFor(() => expect(queryByText('Security')).toBeNull());
     });
 
+    it('includes Security when only Directory Sync is enabled for the org', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEnterpriseSso({ selfServeSSO: true, selfServeDirectorySync: true });
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [
+            {
+              name: 'Org1',
+              self_serve_sso_enabled: false,
+              self_serve_directory_sync_enabled: true,
+              permissions: ['org:sys_entconns:manage'],
+            },
+          ],
+        });
+      });
+
+      render(<OrganizationProfile />, { wrapper });
+      expect(await screen.findByText('Security')).toBeDefined();
+    });
+
     it('does not include SSO when the user lacks the manage enterprise connections permission', async () => {
       const { wrapper } = await createFixtures(f => {
         f.withEnterpriseSso({ selfServeSSO: true });