Add self_serve_sso_enabled to Organization

LauraBeatris · LauraBeatris · commit 384aab2002ed · 2026-05-21T11:03:27.000-03:00
diff --git a/packages/backend/src/api/resources/JSON.ts b/packages/backend/src/api/resources/JSON.ts
@@ -375,6 +375,7 @@ export interface OrganizationJSON extends ClerkResourceJSON {
   pending_invitations_count?: number;
   max_allowed_memberships: number;
   admin_delete_enabled: boolean;
+  self_serve_sso_enabled?: boolean;
   public_metadata: OrganizationPublicMetadata | null;
   private_metadata?: OrganizationPrivateMetadata;
   created_by?: string;
diff --git a/packages/backend/src/api/resources/Organization.ts b/packages/backend/src/api/resources/Organization.ts
@@ -63,6 +63,7 @@ export class Organization {
      * The ID of the user who created the Organization.
      */
     readonly createdBy?: string,
+    readonly selfServeSSOEnabled?: boolean,
   ) {}
 
   static fromJSON(data: OrganizationJSON): Organization {
@@ -80,6 +81,7 @@ export class Organization {
       data.admin_delete_enabled,
       data.members_count,
       data.created_by,
+      data.self_serve_sso_enabled,
     );
     res._raw = data;
     return res;
diff --git a/packages/clerk-js/src/core/resources/Organization.ts b/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(),
     };
diff --git a/packages/clerk-js/src/core/resources/__tests__/Organization.test.ts b/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,11 +33,32 @@ describe('Organization', () => {
       pendingInvitationsCount: 10,
       maxAllowedMemberships: 3,
       adminDeleteEnabled: true,
+      selfServeSSOEnabled: true,
       createdAt: expect.any(Date),
       updatedAt: expect.any(Date),
       publicMetadata: {
         public: 'metadata',
       },
     });
   });
+
+  it('defaults selfServeSSOEnabled to false when the field is omitted from FAPI', () => {
+    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,
+    });
+
+    expect(organization.selfServeSSOEnabled).toBe(false);
+  });
 });
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
@@ -768,7 +768,7 @@ export const enUS: LocalizationResource = {
     navbar: {
       apiKeys: 'API keys',
       billing: 'Billing',
-      selfServeSso: 'Self-Serve SSO',
+      selfServeSSO: 'Single Sign-On (SSO)',
       description: 'Manage your organization.',
       general: 'General',
       members: 'Members',
diff --git a/packages/shared/src/internal/clerk-js/componentGuards.ts b/packages/shared/src/internal/clerk-js/componentGuards.ts
@@ -18,7 +18,6 @@ export const noOrganizationExists: ComponentGuard = clerk => {
   return !clerk.organization;
 };
 
-// TODO -> Update with per org check
 export const disabledOrganizationsFeature: ComponentGuard = (_, environment) => {
   return !environment?.organizationSettings.enabled;
 };
diff --git a/packages/shared/src/types/json.ts b/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 {
diff --git a/packages/shared/src/types/localization.ts b/packages/shared/src/types/localization.ts
@@ -1021,7 +1021,7 @@ export type __internal_LocalizationResource = {
       members: LocalizationValue;
       billing: LocalizationValue;
       apiKeys: LocalizationValue;
-      selfServeSso: LocalizationValue;
+      selfServeSSO: LocalizationValue;
     };
     badge__unverified: LocalizationValue;
     badge__automaticInvitation: LocalizationValue;
diff --git a/packages/shared/src/types/organization.ts b/packages/shared/src/types/organization.ts
@@ -46,6 +46,11 @@ export interface OrganizationResource extends ClerkResource, BillingPayerMethods
   publicMetadata: OrganizationPublicMetadata;
   adminDeleteEnabled: boolean;
   maxAllowedMemberships: number;
+  /**
+   * Whether the organization opted-in to self-serve SSO. Defaults to `false`
+   * when the instance does not have self-serve SSO enabled.
+   */
+  selfServeSSOEnabled: boolean;
   createdAt: Date;
   updatedAt: Date;
   update: (params: UpdateOrganizationParams) => Promise<OrganizationResource>;
diff --git a/packages/ui/src/components/ConfigureSSO/__tests__/ConfigureSSO.test.tsx b/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'] });
       });
diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx
@@ -37,9 +37,9 @@ const OrganizationPaymentAttemptPage = lazy(() =>
   })),
 );
 
-const OrganizationSelfServeSsoPage = lazy(() =>
-  import(/* webpackChunkName: "op-self-serve-sso-page"*/ './OrganizationSelfServeSsoPage').then(module => ({
-    default: module.OrganizationSelfServeSsoPage,
+const OrganizationSelfServeSSOPage = lazy(() =>
+  import(/* webpackChunkName: "op-self-serve-sso-page"*/ './OrganizationSelfServeSSOPage').then(module => ({
+    default: module.OrganizationSelfServeSSOPage,
   })),
 );
 
@@ -52,7 +52,7 @@ export const OrganizationProfileRoutes = () => {
     isAPIKeysPageRoot,
     isSelfServeSsoPageRoot,
     shouldShowBilling,
-    shouldShowSelfServeSso,
+    shouldShowSelfServeSSO,
     apiKeysProps,
   } = useOrganizationProfileContext();
 
@@ -150,11 +150,11 @@ export const OrganizationProfileRoutes = () => {
             </Route>
           </Protect>
         )}
-        {shouldShowSelfServeSso ? (
+        {shouldShowSelfServeSSO ? (
           <Route path={isSelfServeSsoPageRoot ? undefined : 'organization-self-serve-sso'}>
             <Switch>
               <Route index>
-                <OrganizationSelfServeSsoPage />
+                <OrganizationSelfServeSSOPage />
               </Route>
             </Switch>
           </Route>
diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationSelfServeSSOPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationSelfServeSSOPage.tsx
@@ -3,7 +3,7 @@ import { useRef } from 'react';
 
 import { ConfigureSSOContent, ConfigureSSOProtect } from '../ConfigureSSO/ConfigureSSO';
 
-export const OrganizationSelfServeSsoPage = () => {
+export const OrganizationSelfServeSSOPage = () => {
   const { organization } = useOrganization();
   const contentRef = useRef<HTMLDivElement>(null);
 
diff --git a/packages/ui/src/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx b/packages/ui/src/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx
@@ -476,10 +476,10 @@ describe('OrganizationProfile', () => {
     });
   });
 
-  describe('Self-Serve SSO visibility', () => {
-    it('includes Self-Serve SSO when self-serve SSO is enabled in environment settings', async () => {
+  describe('SSO visibility', () => {
+    it('includes SSO when enabled in environment settings', async () => {
       const { wrapper } = await createFixtures(f => {
-        f.withEnterpriseSso({ selfServeSso: true });
+        f.withEnterpriseSso({ selfServeSSO: true });
         f.withOrganizations();
         f.withUser({
           email_addresses: ['test@clerk.com'],
@@ -496,9 +496,9 @@ describe('OrganizationProfile', () => {
       expect(await screen.findByText('Self-Serve SSO')).toBeDefined();
     });
 
-    it('does not include Self-Serve SSO when self-serve SSO is disabled in environment settings', async () => {
+    it('does not include SSO disabled in environment settings', async () => {
       const { wrapper } = await createFixtures(f => {
-        f.withEnterpriseSso({ selfServeSso: false });
+        f.withEnterpriseSso({ selfServeSSO: false });
         f.withOrganizations();
         f.withUser({
           email_addresses: ['test@clerk.com'],
@@ -516,9 +516,9 @@ describe('OrganizationProfile', () => {
     });
 
     // We keep showing the section but the internal page displays a warning for missing permission
-    it('includes Self-Serve SSO even when the user does not have the manage enterprise connections permission', async () => {
+    it('includes SSO even when the user does not have the manage enterprise connections permission', async () => {
       const { wrapper } = await createFixtures(f => {
-        f.withEnterpriseSso({ selfServeSso: true });
+        f.withEnterpriseSso({ selfServeSSO: true });
         f.withOrganizations();
         f.withUser({
           email_addresses: ['test@clerk.com'],
diff --git a/packages/ui/src/constants.ts b/packages/ui/src/constants.ts
@@ -12,7 +12,7 @@ export const ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID = {
   MEMBERS: 'members',
   BILLING: 'billing',
   API_KEYS: 'apiKeys',
-  SELF_SERVE_SSO: 'selfServeSso',
+  SELF_SERVE_SSO: 'selfServeSSO',
 };
 
 export const USER_BUTTON_ITEM_ID = {
diff --git a/packages/ui/src/contexts/components/OrganizationProfile.ts b/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';
@@ -27,7 +27,7 @@ export type OrganizationProfileContextType = OrganizationProfileCtx & {
   isAPIKeysPageRoot: boolean;
   isSelfServeSsoPageRoot: boolean;
   shouldShowBilling: boolean;
-  shouldShowSelfServeSso: boolean;
+  shouldShowSelfServeSSO: boolean;
 };
 
 export const OrganizationProfileContext = createContext<OrganizationProfileCtx | null>(null);
@@ -37,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.');
@@ -58,12 +59,19 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType
     // The C2 had a subscription in the past
     Boolean(statements.data.length > 0);
 
-  // TODO -> Check for org level as well
-  const shouldShowSelfServeSso = environment.userSettings.enterpriseSSO.self_serve_sso;
+  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 = () =>
@@ -89,6 +97,6 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType
     isAPIKeysPageRoot,
     isSelfServeSsoPageRoot,
     shouldShowBilling,
-    shouldShowSelfServeSso,
+    shouldShowSelfServeSSO,
   };
 };
diff --git a/packages/ui/src/test/fixture-helpers.ts b/packages/ui/src/test/fixture-helpers.ts
@@ -538,9 +538,9 @@ const createUserSettingsFixtureHelpers = (environment: EnvironmentJSON) => {
     };
   };
 
-  const withEnterpriseSso = (opts?: { selfServeSso?: boolean }) => {
+  const withEnterpriseSso = (opts?: { selfServeSSO?: boolean }) => {
     us.saml = { enabled: true };
-    us.enterprise_sso = { enabled: true, self_serve_sso: opts?.selfServeSso ?? false };
+    us.enterprise_sso = { enabled: true, self_serve_sso: opts?.selfServeSSO ?? false };
   };
 
   const withBackupCode = (opts?: Partial<UserSettingsJSON['attributes']['backup_code']>) => {
diff --git a/packages/ui/src/utils/createCustomPages.tsx b/packages/ui/src/utils/createCustomPages.tsx
@@ -52,11 +52,11 @@ type CreateCustomPagesParams = {
   getDefaultRoutes: ({
     commerce,
     apiKeys,
-    selfServeSso,
+    selfServeSSO,
   }: {
     commerce: boolean;
     apiKeys: boolean;
-    selfServeSso: boolean;
+    selfServeSSO: boolean;
   }) => GetDefaultRoutesReturnType;
   setFirstPathToRoot: (routes: NavbarRoute[]) => NavbarRoute[];
   excludedPathsFromDuplicateWarning: string[];
@@ -86,6 +86,7 @@ export const createOrganizationProfileCustomPages = (
   clerk: LoadedClerk,
   shouldShowBilling: boolean,
   environment?: EnvironmentResource,
+  shouldShowSelfServeSSO = false,
 ) => {
   return createCustomPages(
     {
@@ -98,6 +99,7 @@ export const createOrganizationProfileCustomPages = (
     shouldShowBilling,
     environment,
     true,
+    shouldShowSelfServeSSO,
   );
 };
 
@@ -107,6 +109,7 @@ const createCustomPages = (
   shouldShowBilling: boolean,
   environment?: EnvironmentResource,
   organization?: boolean,
+  shouldShowSelfServeSSO = false,
 ) => {
   const { INITIAL_ROUTES, pageToRootNavbarRouteMap, validReorderItemLabels } = getDefaultRoutes({
     commerce: organization
@@ -115,7 +118,7 @@ const createCustomPages = (
     apiKeys: organization
       ? !disabledOrganizationAPIKeysFeature(clerk, environment)
       : !disabledUserAPIKeysFeature(clerk, environment),
-    selfServeSso: organization ? !disabledSelfServeSSOFeature(clerk, environment) : false,
+    selfServeSSO: organization ? shouldShowSelfServeSSO && !disabledSelfServeSSOFeature(clerk, environment) : false,
   });
 
   if (isDevelopmentSDK(clerk)) {
@@ -325,11 +328,11 @@ const getUserProfileDefaultRoutes = ({
 const getOrganizationProfileDefaultRoutes = ({
   commerce,
   apiKeys,
-  selfServeSso,
+  selfServeSSO,
 }: {
   commerce: boolean;
   apiKeys: boolean;
-  selfServeSso: boolean;
+  selfServeSSO: boolean;
 }): GetDefaultRoutesReturnType => {
   const INITIAL_ROUTES: NavbarRoute[] = [
     {
@@ -361,9 +364,9 @@ const getOrganizationProfileDefaultRoutes = ({
       path: 'organization-api-keys',
     });
   }
-  if (selfServeSso) {
+  if (selfServeSSO) {
     INITIAL_ROUTES.push({
-      name: localizationKeys('organizationProfile.navbar.selfServeSso'),
+      name: localizationKeys('organizationProfile.navbar.selfServeSSO'),
       id: ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.SELF_SERVE_SSO,
       icon: Connections,
       path: 'organization-self-serve-sso',

Original file line number	Diff line number	Diff line change
`@@ -393,6 +393,7 @@ export interface OrganizationJSON extends ClerkResourceJSON {`
`393`	`393`	`pending_invitations_count: number;`
`394`	`394`	`admin_delete_enabled: boolean;`
`395`	`395`	`max_allowed_memberships: number;`
	`396`	`+ self_serve_sso_enabled?: boolean;`
`396`	`397`	`}`
`397`	`398`
`398`	`399`	`export interface OrganizationMembershipJSON extends ClerkResourceJSON {`