feat(ui): Self-serve SSO within OrganizationProfile

.changeset/dull-plums-sleep.md

@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/ui': minor
+---
+
+Display "Single Sign-on (SSO)" section in `OrganizationProfile` if self-serve SSO is enabled on the current active organization

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

@@ -49,6 +49,7 @@ export class Organization extends BaseResource implements OrganizationResource {
   membersCount = 0;
   pendingInvitationsCount = 0;
   maxAllowedMemberships!: number;
+  selfServeSSOEnabled = false;
 
   constructor(data: OrganizationJSON | OrganizationJSONSnapshot) {
     super();
@@ -303,6 +304,7 @@ export class Organization extends BaseResource implements OrganizationResource {
     this.pendingInvitationsCount = data.pending_invitations_count || 0;
     this.maxAllowedMemberships = data.max_allowed_memberships || 0;
     this.adminDeleteEnabled = data.admin_delete_enabled || false;
+    this.selfServeSSOEnabled = data.self_serve_sso_enabled || false;
     this.createdAt = unixEpochToDate(data.created_at);
     this.updatedAt = unixEpochToDate(data.updated_at);
     return this;
@@ -321,6 +323,7 @@ export class Organization extends BaseResource implements OrganizationResource {
       pending_invitations_count: this.pendingInvitationsCount,
       max_allowed_memberships: this.maxAllowedMemberships,
       admin_delete_enabled: this.adminDeleteEnabled,
+      self_serve_sso_enabled: this.selfServeSSOEnabled,
       created_at: this.createdAt.getTime(),
       updated_at: this.updatedAt.getTime(),
     };

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

@@ -19,6 +19,7 @@ describe('Organization', () => {
       admin_delete_enabled: true,
       max_allowed_memberships: 3,
       has_image: true,
+      self_serve_sso_enabled: true,
     });
 
     expect(organization).toMatchObject({
@@ -32,6 +33,7 @@ describe('Organization', () => {
       pendingInvitationsCount: 10,
       maxAllowedMemberships: 3,
       adminDeleteEnabled: true,
+      selfServeSSOEnabled: true,
       createdAt: expect.any(Date),
       updatedAt: expect.any(Date),
       publicMetadata: {

packages/localizations/src/en-US.ts

@@ -768,6 +768,7 @@ export const enUS: LocalizationResource = {
     navbar: {
       apiKeys: 'API keys',
       billing: 'Billing',
+      selfServeSSO: 'Single Sign-On (SSO)',
       description: 'Manage your organization.',
       general: 'General',
       members: 'Members',

packages/shared/src/types/json.ts

@@ -393,6 +393,7 @@ export interface OrganizationJSON extends ClerkResourceJSON {
   pending_invitations_count: number;
   admin_delete_enabled: boolean;
   max_allowed_memberships: number;
+  self_serve_sso_enabled?: boolean;
 }
 
 export interface OrganizationMembershipJSON extends ClerkResourceJSON {

packages/shared/src/types/localization.ts

@@ -1021,6 +1021,7 @@ export type __internal_LocalizationResource = {
       members: LocalizationValue;
       billing: LocalizationValue;
       apiKeys: LocalizationValue;
+      selfServeSSO: LocalizationValue;
     };
     badge__unverified: LocalizationValue;
     badge__automaticInvitation: LocalizationValue;

packages/shared/src/types/organization.ts

@@ -46,6 +46,7 @@ export interface OrganizationResource extends ClerkResource, BillingPayerMethods
   publicMetadata: OrganizationPublicMetadata;
   adminDeleteEnabled: boolean;
   maxAllowedMemberships: number;
+  selfServeSSOEnabled: boolean;
   createdAt: Date;
   updatedAt: Date;
   update: (params: UpdateOrganizationParams) => Promise<OrganizationResource>;

packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx

@@ -58,16 +58,16 @@ const AuthenticatedContent = withCoreUserGuard(() => {
             flex: 1,
           })}
         >
-          <ConfigureSSOCardProtect>
-            <ConfigureSSOCardContent contentRef={contentRef} />
-          </ConfigureSSOCardProtect>
+          <ConfigureSSOProtect>
+            <ConfigureSSOContent contentRef={contentRef} />
+          </ConfigureSSOProtect>
         </Col>
       </ConfigureSSONavbar>
     </ProfileCard.Root>
   );
 });
 
-const ConfigureSSOCardContent = ({ contentRef }: { contentRef: React.RefObject<HTMLDivElement> }) => {
+export const ConfigureSSOContent = ({ contentRef }: { contentRef: React.RefObject<HTMLDivElement> }) => {
   const {
     data: enterpriseConnections,
     isLoading: isLoadingEnterpriseConnections,
@@ -142,11 +142,11 @@ const ConfigureSSOSteps = () => {
   );
 };
 
-const ConfigureSSOCardProtect = ({ children }: { children: React.ReactNode }) => {
+export const ConfigureSSOProtect = ({ children }: { children: React.ReactNode }) => {
   const { session } = useSession();
   const isPersonalWorkspace = !session?.lastActiveOrganizationId;
   const canManageEnterpriseConnections = useProtect(
-    has => isPersonalWorkspace || has({ permission: 'org:sys_enterprise_connections:manage' }),
+    has => isPersonalWorkspace || has({ permission: 'org:sys_entconns:manage' }),
   );
 
   if (!canManageEnterpriseConnections) {

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

@@ -11,7 +11,7 @@ describe('ConfigureSSO', () => {
   describe('within an organization', () => {
     it('shows a warning if the active organization membership lacks the manage enterprise connections permission', async () => {
       const { wrapper, fixtures } = await createFixtures(f => {
-        f.withEnterpriseSso({ selfServeSso: true });
+        f.withEnterpriseSso({ selfServeSSO: true });
         f.withEmailAddress();
         f.withOrganizations();
         f.withUser({
@@ -31,12 +31,12 @@ describe('ConfigureSSO', () => {
 
     it('renders the wizard when the active organization membership has the manage enterprise connections permission', async () => {
       const { wrapper, fixtures } = await createFixtures(f => {
-        f.withEnterpriseSso({ selfServeSso: true });
+        f.withEnterpriseSso({ selfServeSSO: true });
         f.withEmailAddress();
         f.withOrganizations();
         f.withUser({
           email_addresses: ['test@clerk.com'],
-          organization_memberships: [{ name: 'Org1', permissions: ['org:sys_enterprise_connections:manage'] }],
+          organization_memberships: [{ name: 'Org1', permissions: ['org:sys_entconns:manage'] }],
         });
       });
 
@@ -54,7 +54,7 @@ describe('ConfigureSSO', () => {
   describe('in a personal workspace', () => {
     it('renders the wizard without checking the manage enterprise connections permission', async () => {
       const { wrapper, fixtures } = await createFixtures(f => {
-        f.withEnterpriseSso({ selfServeSso: true });
+        f.withEnterpriseSso({ selfServeSSO: true });
         f.withEmailAddress();
         f.withUser({ email_addresses: ['test@clerk.com'] });
       });

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

@@ -37,14 +37,22 @@ const OrganizationPaymentAttemptPage = lazy(() =>
   })),
 );
 
+const OrganizationSelfServeSSOPage = lazy(() =>
+  import(/* webpackChunkName: "op-self-serve-sso-page"*/ './OrganizationSelfServeSSOPage').then(module => ({
+    default: module.OrganizationSelfServeSSOPage,
+  })),
+);
+
 export const OrganizationProfileRoutes = () => {
   const {
     pages,
     isMembersPageRoot,
     isGeneralPageRoot,
     isBillingPageRoot,
     isAPIKeysPageRoot,
+    isSelfServeSsoPageRoot,
     shouldShowBilling,
+    shouldShowSelfServeSSO,
     apiKeysProps,
   } = useOrganizationProfileContext();
 
@@ -142,6 +150,17 @@ export const OrganizationProfileRoutes = () => {
             </Route>
           </Protect>
         )}
+        {shouldShowSelfServeSSO ? (
+          <Route path={isSelfServeSsoPageRoot ? undefined : 'organization-self-serve-sso'}>
+            <Switch>
+              <Route index>
+                <Suspense fallback={''}>
+                  <OrganizationSelfServeSSOPage />
+                </Suspense>
+              </Route>
+            </Switch>
+          </Route>
+        ) : null}
       </Route>
     </Switch>
   );

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

@@ -0,0 +1,20 @@
+import { useOrganization } from '@clerk/shared/react';
+import { useRef } from 'react';
+
+import { ConfigureSSOContent, ConfigureSSOProtect } from '../ConfigureSSO/ConfigureSSO';
+
+export const OrganizationSelfServeSSOPage = () => {
+  const { organization } = useOrganization();
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  if (!organization) {
+    // We should never reach this point, but we'll return null to make TS happy
+    return null;
+  }
+
+  return (
+    <ConfigureSSOProtect>
+      <ConfigureSSOContent contentRef={contentRef} />
+    </ConfigureSSOProtect>
+  );
+};

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

@@ -2,9 +2,10 @@ import type { CustomPage } from '@clerk/shared/types';
 import { describe, expect, it } from 'vitest';
 
 import { bindCreateFixtures } from '@/test/create-fixtures';
-import { render, screen, waitFor } from '@/test/utils';
+import { cleanup, render, screen, waitFor } from '@/test/utils';
 
 import { OrganizationProfile } from '../';
+import { OrganizationSelfServeSSOPage } from '../OrganizationSelfServeSSOPage';
 
 const { createFixtures } = bindCreateFixtures('OrganizationProfile');
 
@@ -476,6 +477,95 @@ describe('OrganizationProfile', () => {
     });
   });
 
+  describe('SSO visibility', () => {
+    it('includes SSO when enabled at the instance and the org has opted in', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEnterpriseSso({ selfServeSSO: true });
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [
+            {
+              name: 'Org1',
+              self_serve_sso_enabled: true,
+              permissions: ['org:sys_entconns:manage'],
+            },
+          ],
+        });
+      });
+
+      render(<OrganizationProfile />, { wrapper });
+      expect(await screen.findByText('Single Sign-On (SSO)')).toBeDefined();
+    });
+
+    it('does not include SSO when disabled at the instance level', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEnterpriseSso({ selfServeSSO: false });
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [
+            {
+              name: 'Org1',
+              self_serve_sso_enabled: true,
+              permissions: ['org:sys_entconns:manage'],
+            },
+          ],
+        });
+      });
+
+      const { queryByText } = render(<OrganizationProfile />, { wrapper });
+      await waitFor(() => expect(queryByText('Single Sign-On (SSO)')).toBeNull());
+    });
+
+    it('does not include SSO when the org has not opted in, even if the instance has it enabled', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEnterpriseSso({ selfServeSSO: true });
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [
+            {
+              name: 'Org1',
+              self_serve_sso_enabled: false,
+              permissions: ['org:sys_entconns:manage'],
+            },
+          ],
+        });
+      });
+
+      const { queryByText } = render(<OrganizationProfile />, { wrapper });
+      await waitFor(() => expect(queryByText('Single Sign-On (SSO)')).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 } = await createFixtures(f => {
+        f.withEnterpriseSso({ selfServeSSO: true });
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [
+            {
+              name: 'Org1',
+              self_serve_sso_enabled: true,
+              permissions: [],
+            },
+          ],
+        });
+      });
+
+      render(<OrganizationProfile />, { wrapper });
+      expect(await screen.findByText('Single Sign-On (SSO)')).toBeDefined();
+
+      cleanup();
+      render(<OrganizationSelfServeSSOPage />, { wrapper });
+      expect(await screen.findByText(/you do not have permission to manage enterprise connections/i)).toBeDefined();
+      expect(
+        screen.queryByText(/contact your organization administrator in order to have permissions/i),
+      ).toBeInTheDocument();
+    });
+  });
+
   it('removes member nav item if user is lacking permissions', async () => {
     const { wrapper } = await createFixtures(f => {
       f.withOrganizations();

packages/ui/src/constants.ts

@@ -12,6 +12,7 @@ export const ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID = {
   MEMBERS: 'members',
   BILLING: 'billing',
   API_KEYS: 'apiKeys',
+  SELF_SERVE_SSO: 'selfServeSSO',
 };
 
 export const USER_BUTTON_ITEM_ID = {

packages/ui/src/contexts/components/OrganizationProfile.ts

@@ -1,4 +1,4 @@
-import { useClerk } from '@clerk/shared/react';
+import { __internal_useOrganizationBase, useClerk } from '@clerk/shared/react';
 import { createContext, useContext, useMemo } from 'react';
 
 import type { NavbarRoute } from '@/ui/elements/Navbar';
@@ -25,7 +25,9 @@ export type OrganizationProfileContextType = OrganizationProfileCtx & {
   isGeneralPageRoot: boolean;
   isBillingPageRoot: boolean;
   isAPIKeysPageRoot: boolean;
+  isSelfServeSsoPageRoot: boolean;
   shouldShowBilling: boolean;
+  shouldShowSelfServeSSO: boolean;
 };
 
 export const OrganizationProfileContext = createContext<OrganizationProfileCtx | null>(null);
@@ -35,6 +37,7 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType
   const { navigate } = useRouter();
   const environment = useEnvironment();
   const clerk = useClerk();
+  const organization = __internal_useOrganizationBase();
 
   if (!context || context.componentName !== 'OrganizationProfile') {
     throw new Error('Clerk: useOrganizationProfileContext called outside OrganizationProfile.');
@@ -56,9 +59,19 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType
     // The C2 had a subscription in the past
     Boolean(statements.data.length > 0);
 
+  const shouldShowSelfServeSSO =
+    environment.userSettings.enterpriseSSO.self_serve_sso && !!organization?.selfServeSSOEnabled;
+
   const pages = useMemo(
-    () => createOrganizationProfileCustomPages(customPages || [], clerk, shouldShowBilling, environment),
-    [customPages, shouldShowBilling],
+    () =>
+      createOrganizationProfileCustomPages(
+        customPages || [],
+        clerk,
+        shouldShowBilling,
+        environment,
+        shouldShowSelfServeSSO,
+      ),
+    [customPages, shouldShowBilling, shouldShowSelfServeSSO],
   );
 
   const navigateAfterLeaveOrganization = () =>
@@ -68,6 +81,7 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType
   const isGeneralPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.GENERAL;
   const isBillingPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.BILLING;
   const isAPIKeysPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.API_KEYS;
+  const isSelfServeSsoPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.SELF_SERVE_SSO;
   const navigateToGeneralPageRoot = () =>
     navigate(isGeneralPageRoot ? '../' : isMembersPageRoot ? './organization-general' : '../organization-general');
 
@@ -81,6 +95,8 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType
     isGeneralPageRoot,
     isBillingPageRoot,
     isAPIKeysPageRoot,
+    isSelfServeSsoPageRoot,
     shouldShowBilling,
+    shouldShowSelfServeSSO,
   };
 };