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: ['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,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: ['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, fixtures } = 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: [],
+ },
+ ],
+ });
+ });
+
+ 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 = {