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

@@ -794,6 +794,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,14 @@ const AuthenticatedContent = withCoreUserGuard(() => {
             flex: 1,
           })}
         >
-          <ConfigureSSOCardProtect>
-            <ConfigureSSOCardContent contentRef={contentRef} />
-          </ConfigureSSOCardProtect>
+          <ConfigureSSOContent contentRef={contentRef} />
         </Col>
       </ConfigureSSONavbar>
     </ProfileCard.Root>
   );
 });
 
-const ConfigureSSOCardContent = ({ contentRef }: { contentRef: React.RefObject<HTMLDivElement> }) => {
+export const ConfigureSSOContent = ({ contentRef }: { contentRef: React.RefObject<HTMLDivElement> }) => {
   const {
     data: enterpriseConnections,
     isLoading: isLoadingEnterpriseConnections,
@@ -86,16 +84,18 @@ const ConfigureSSOCardContent = ({ contentRef }: { contentRef: React.RefObject<H
   }
 
   return (
-    <ConfigureSSOProvider
-      hasSuccessfulTestRun={hasSuccessfulTestRun}
-      enterpriseConnection={enterpriseConnection}
-      contentRef={contentRef}
-      createEnterpriseConnection={createEnterpriseConnection}
-      updateEnterpriseConnection={updateEnterpriseConnection}
-      deleteEnterpriseConnection={deleteEnterpriseConnection}
-    >
-      <ConfigureSSOSteps />
-    </ConfigureSSOProvider>
+    <ConfigureSSOProtect>
+      <ConfigureSSOProvider
+        hasSuccessfulTestRun={hasSuccessfulTestRun}
+        enterpriseConnection={enterpriseConnection}
+        contentRef={contentRef}
+        createEnterpriseConnection={createEnterpriseConnection}
+        updateEnterpriseConnection={updateEnterpriseConnection}
+        deleteEnterpriseConnection={deleteEnterpriseConnection}
+      >
+        <ConfigureSSOSteps />
+      </ConfigureSSOProvider>
+    </ConfigureSSOProtect>
   );
 };
 
@@ -151,7 +151,7 @@ const ConfigureSSOSteps = () => {
   );
 };
 
-const ConfigureSSOCardProtect = ({ children }: { children: React.ReactNode }) => {
+const ConfigureSSOProtect = ({ children }: { children: React.ReactNode }) => {
   const { session } = useSession();
   const isPersonalWorkspace = !session?.lastActiveOrganizationId;
   const canManageEnterpriseConnections = useProtect(

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,7 +31,7 @@ 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({
@@ -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: ['[email protected]'] });
       });

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,16 @@
+import { useOrganization } from '@clerk/shared/react';
+import { useRef } from 'react';
+
+import { ConfigureSSOContent } 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 <ConfigureSSOContent contentRef={contentRef} />;
+};

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,97 @@ 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: ['[email protected]'],
+          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: ['[email protected]'],
+          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: ['[email protected]'],
+          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, fixtures } = await createFixtures(f => {
+        f.withEnterpriseSso({ selfServeSSO: true });
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['[email protected]'],
+          organization_memberships: [
+            {
+              name: 'Org1',
+              self_serve_sso_enabled: true,
+              permissions: [],
+            },
+          ],
+        });
+      });
+
+      fixtures.clerk.user?.getEnterpriseConnections.mockResolvedValue([]);
+
+      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 single sign-on/i)).toBeDefined();
+      expect(
+        screen.queryByText(/contact your organization.*administrator to upgrade your 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 = {