fix(ui): hide OrganizationProfile Security tab when lacking manage enterprise connections permission (#8971)

Author: Iago Dahlem

.changeset/olive-pans-sin.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+The Security tab in `<OrganizationProfile />` is now hidden for members who lack the manage enterprise connections permission (`org:sys_entconns:manage`), instead of rendering a permission-denied state. This matches how the Members, Billing, and API keys tabs are gated.

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

@@ -29,6 +29,8 @@ export const OrganizationProfileNavbar = (
       }) || has({ permission: 'org:sys_billing:manage' }),
   );
 
+  const allowSecurityRoute = useProtect(has => has({ permission: 'org:sys_entconns:manage' }));
+
   const routes = pages.routes
     .filter(
       r =>
@@ -40,7 +42,12 @@ export const OrganizationProfileNavbar = (
         r.id !== ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.BILLING ||
         (r.id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.BILLING && allowBillingRoutes),
     )
-    .filter(r => r.id !== ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.API_KEYS || !apiKeysProps?.hide);
+    .filter(r => r.id !== ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.API_KEYS || !apiKeysProps?.hide)
+    .filter(
+      r =>
+        r.id !== ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.SECURITY ||
+        (r.id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.SECURITY && allowSecurityRoute),
+    );
   if (!organization) {
     return null;
   }

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

@@ -155,15 +155,17 @@ export const OrganizationProfileRoutes = ({ contentRef }: OrganizationProfileRou
           </Protect>
         )}
         {shouldShowSelfServeSSO ? (
-          <Route path={isSecurityPageRoot ? undefined : 'organization-security'}>
-            <Switch>
-              <Route index>
-                <Suspense fallback={''}>
-                  <OrganizationSecurityPage contentRef={contentRef} />
-                </Suspense>
-              </Route>
-            </Switch>
-          </Route>
+          <Protect condition={has => has({ permission: 'org:sys_entconns:manage' })}>
+            <Route path={isSecurityPageRoot ? undefined : 'organization-security'}>
+              <Switch>
+                <Route index>
+                  <Suspense fallback={''}>
+                    <OrganizationSecurityPage contentRef={contentRef} />
+                  </Suspense>
+                </Route>
+              </Switch>
+            </Route>
+          </Protect>
         ) : null}
       </Route>
     </Switch>

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

@@ -6,7 +6,6 @@ import { ProfileCard } from '@/ui/elements/ProfileCard';
 
 import { Col, descriptors, Flex, Icon, localizationKeys, SimpleButton, Spinner, Text } from '../../customizables';
 import { ChevronLeft } from '../../icons';
-import { ConfigureSSOProtect } from '../ConfigureSSO/ConfigureSSO';
 import { ConfigureSSOWizard } from '../ConfigureSSO/ConfigureSSOWizard';
 import { useOrganizationEnterpriseConnection } from '../ConfigureSSO/hooks/useOrganizationEnterpriseConnection';
 import { SecuritySsoSection } from './SecuritySsoSection';
@@ -50,21 +49,19 @@ const OrganizationSecurityPageContent = ({ contentRef }: OrganizationSecurityPag
 
   if (isLoading) {
     return (
-      <ConfigureSSOProtect>
-        <SecurityPageOverview fillHeight>
-          <Flex
-            align='center'
-            justify='center'
-            sx={t => ({ flex: 1, paddingBlock: t.space.$5 })}
-          >
-            <Spinner
-              size='xs'
-              colorScheme='neutral'
-              elementDescriptor={descriptors.spinner}
-            />
-          </Flex>
-        </SecurityPageOverview>
-      </ConfigureSSOProtect>
+      <SecurityPageOverview fillHeight>
+        <Flex
+          align='center'
+          justify='center'
+          sx={t => ({ flex: 1, paddingBlock: t.space.$5 })}
+        >
+          <Spinner
+            size='xs'
+            colorScheme='neutral'
+            elementDescriptor={descriptors.spinner}
+          />
+        </Flex>
+      </SecurityPageOverview>
     );
   }
 
@@ -89,35 +86,31 @@ const OrganizationSecurityPageContent = ({ contentRef }: OrganizationSecurityPag
     </SimpleButton>
   );
 
-  return (
-    <ConfigureSSOProtect>
-      {view === 'overview' ? (
-        <SecurityPageOverview>
-          <SecuritySsoSection
-            connection={organizationEnterpriseConnection}
-            enterpriseConnection={enterpriseConnection}
-            setConnectionActive={enterpriseConnectionMutations.setConnectionActive}
-            deleteConnection={enterpriseConnectionMutations.deleteConnection}
-            organizationName={organization?.name ?? ''}
-            contentRef={contentRef}
-            onConfigure={openWizard}
-          />
-        </SecurityPageOverview>
-      ) : (
-        <ConfigureSSOWizard
-          organizationEnterpriseConnection={organizationEnterpriseConnection}
-          testRuns={testRuns}
-          enterpriseConnection={enterpriseConnection}
-          contentRef={contentRef}
-          enterpriseConnectionMutations={enterpriseConnectionMutations}
-          organizationDomainMutations={organizationDomainMutations}
-          organizationDomains={organizationDomains}
-          forceInitialStep={forceFirstStep}
-          title={backControl}
-          onExit={exitWizard}
-        />
-      )}
-    </ConfigureSSOProtect>
+  return view === 'overview' ? (
+    <SecurityPageOverview>
+      <SecuritySsoSection
+        connection={organizationEnterpriseConnection}
+        enterpriseConnection={enterpriseConnection}
+        setConnectionActive={enterpriseConnectionMutations.setConnectionActive}
+        deleteConnection={enterpriseConnectionMutations.deleteConnection}
+        organizationName={organization?.name ?? ''}
+        contentRef={contentRef}
+        onConfigure={openWizard}
+      />
+    </SecurityPageOverview>
+  ) : (
+    <ConfigureSSOWizard
+      organizationEnterpriseConnection={organizationEnterpriseConnection}
+      testRuns={testRuns}
+      enterpriseConnection={enterpriseConnection}
+      contentRef={contentRef}
+      enterpriseConnectionMutations={enterpriseConnectionMutations}
+      organizationDomainMutations={organizationDomainMutations}
+      organizationDomains={organizationDomains}
+      forceInitialStep={forceFirstStep}
+      title={backControl}
+      onExit={exitWizard}
+    />
   );
 };
 

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

@@ -2,10 +2,11 @@ import type { CustomPage } from '@clerk/shared/types';
 import { describe, expect, it } from 'vitest';
 
 import { bindCreateFixtures } from '@/test/create-fixtures';
-import { cleanup, render, screen, waitFor } from '@/test/utils';
+import { render, screen, waitFor } from '@/test/utils';
+import { VirtualRouter } from '@/ui/router';
 
-import { OrganizationProfile } from '../';
-import { OrganizationSecurityPage } from '../OrganizationSecurityPage';
+import { OrganizationProfile } from '..';
+import { OrganizationProfileRoutes } from '../OrganizationProfileRoutes';
 
 const { createFixtures } = bindCreateFixtures('OrganizationProfile');
 
@@ -538,8 +539,8 @@ describe('OrganizationProfile', () => {
       await waitFor(() => expect(queryByText('Security')).toBeNull());
     });
 
-    it('includes SSO even when the user does not have the manage enterprise connections permission, but the page surfaces a warning', async () => {
-      const { wrapper, fixtures } = await createFixtures(f => {
+    it('does not include SSO when the user lacks the manage enterprise connections permission', async () => {
+      const { wrapper } = await createFixtures(f => {
         f.withEnterpriseSso({ selfServeSSO: true });
         f.withOrganizations();
         f.withUser({
@@ -554,17 +555,56 @@ describe('OrganizationProfile', () => {
         });
       });
 
-      fixtures.clerk.user?.getEnterpriseConnections.mockResolvedValue([]);
+      const { queryByText } = render(<OrganizationProfile />, { wrapper });
+      expect(queryByText('Security')).not.toBeInTheDocument();
+    });
+  });
 
-      render(<OrganizationProfile />, { wrapper });
-      expect(await screen.findByText('Security')).toBeDefined();
+  describe('SSO route guard', () => {
+    const SECURITY_DESCRIPTION =
+      'Require members with a matching email domain to sign in through your identity provider.';
+
+    // The navbar tests above only prove the link is hidden. This block exercises the
+    // route guard wrapping the security route, so direct navigation is blocked too.
+    // The shared fixture wrapper installs a mocked RouteContext that never matches a
+    // path, so the guarded sub-route only mounts under a real router seeded to its path.
+    const renderSecurityRoute = (wrapper: React.ComponentType<{ children?: React.ReactNode }>) =>
+      render(
+        <VirtualRouter startPath='/organization-security'>
+          <OrganizationProfileRoutes contentRef={{ current: null }} />
+        </VirtualRouter>,
+        { wrapper },
+      );
+
+    const withSelfServeSSO = (permissions: string[]) => (f: Parameters<Parameters<typeof createFixtures>[0]>[0]) => {
+      f.withEnterpriseSso({ selfServeSSO: true });
+      f.withEmailAddress();
+      f.withOrganizations();
+      f.withOrganizationDomains(undefined, 'org:member');
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', self_serve_sso_enabled: true, permissions }],
+      });
+    };
+
+    it('renders the security page on the guarded route when the user can manage enterprise connections', async () => {
+      const { wrapper, fixtures } = await createFixtures(withSelfServeSSO(['org:sys_entconns:manage']));
+      fixtures.clerk.organization?.getEnterpriseConnections.mockResolvedValue([]);
+
+      renderSecurityRoute(wrapper);
+
+      expect(await screen.findByText(SECURITY_DESCRIPTION)).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Start configuration' })).toBeInTheDocument();
+    });
+
+    it('blocks the security page on the guarded route when the user lacks the manage enterprise connections permission', async () => {
+      const { wrapper, fixtures } = await createFixtures(withSelfServeSSO([]));
+      fixtures.clerk.organization?.getEnterpriseConnections.mockResolvedValue([]);
+
+      renderSecurityRoute(wrapper);
 
-      cleanup();
-      render(<OrganizationSecurityPage />, { wrapper });
-      expect(await screen.findByText(/you do not have permission to manage single sign-on/i)).toBeDefined();
-      expect(
-        screen.queryByText(/contact your organization.*administrator to upgrade your permissions/i),
-      ).toBeInTheDocument();
+      await waitFor(() => expect(screen.queryByText(SECURITY_DESCRIPTION)).not.toBeInTheDocument());
+      expect(screen.queryByRole('button', { name: 'Start configuration' })).not.toBeInTheDocument();
     });
   });