Render route in OrganizationProfile

LauraBeatris · LauraBeatris · commit d586173490af · 2026-05-20T09:55:49.000-03:00
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
@@ -768,6 +768,7 @@ export const enUS: LocalizationResource = {
     navbar: {
       apiKeys: 'API keys',
       billing: 'Billing',
+      selfServeSso: 'Self-Serve 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,6 +18,7 @@ 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/localization.ts b/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;
diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx b/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,15 @@ export const OrganizationProfileRoutes = () => {
             </Route>
           </Protect>
         )}
+        {shouldShowSelfServeSso ? (
+          <Route path={isSelfServeSsoPageRoot ? undefined : 'organization-self-serve-sso'}>
+            <Switch>
+              <Route index>
+                <OrganizationSelfServeSsoPage />
+              </Route>
+            </Switch>
+          </Route>
+        ) : null}
       </Route>
     </Switch>
   );
diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationSelfServeSsoPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationSelfServeSsoPage.tsx
@@ -0,0 +1,24 @@
+import { useOrganization } from '@clerk/shared/react';
+
+import { Col } from '@/ui/customizables';
+import { Header } from '@/ui/elements/Header';
+
+export const OrganizationSelfServeSsoPage = () => {
+  const { organization } = useOrganization();
+
+  if (!organization) {
+    // We should never reach this point, but we'll return null to make TS happy
+    return null;
+  }
+
+  return (
+    <Col gap={4}>
+      <Header.Root>
+        <Header.Title
+          title='Self-Serve SSO'
+          textVariant='h2'
+        />
+      </Header.Root>
+    </Col>
+  );
+};
diff --git a/packages/ui/src/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx b/packages/ui/src/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx
@@ -476,6 +476,67 @@ describe('OrganizationProfile', () => {
     });
   });
 
+  describe('Self-Serve SSO visibility', () => {
+    it('includes Self-Serve SSO when self-serve SSO is enabled in environment settings', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEnterpriseSso({ selfServeSso: true });
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [
+            {
+              name: 'Org1',
+              permissions: ['org:sys_entconns:manage'],
+            },
+          ],
+        });
+      });
+
+      render(<OrganizationProfile />, { wrapper });
+      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 () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEnterpriseSso({ selfServeSso: false });
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [
+            {
+              name: 'Org1',
+              permissions: ['org:sys_entconns:manage'],
+            },
+          ],
+        });
+      });
+
+      const { queryByText } = render(<OrganizationProfile />, { wrapper });
+      await waitFor(() => expect(queryByText('Self-Serve SSO')).toBeNull());
+    });
+
+    // 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 () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEnterpriseSso({ selfServeSso: true });
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [
+            {
+              name: 'Org1',
+              permissions: [],
+            },
+          ],
+        });
+      });
+
+      // TODO -> Add assertions for page content warning
+      render(<OrganizationProfile />, { wrapper });
+      expect(await screen.findByText('Self-Serve SSO')).toBeDefined();
+    });
+  });
+
   it('removes member nav item if user is lacking permissions', async () => {
     const { wrapper } = await createFixtures(f => {
       f.withOrganizations();
diff --git a/packages/ui/src/constants.ts b/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 = {
diff --git a/packages/ui/src/contexts/components/OrganizationProfile.ts b/packages/ui/src/contexts/components/OrganizationProfile.ts
@@ -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);
@@ -56,6 +58,9 @@ 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 pages = useMemo(
     () => createOrganizationProfileCustomPages(customPages || [], clerk, shouldShowBilling, environment),
     [customPages, shouldShowBilling],
@@ -68,6 +73,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 +87,8 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType
     isGeneralPageRoot,
     isBillingPageRoot,
     isAPIKeysPageRoot,
+    isSelfServeSsoPageRoot,
     shouldShowBilling,
+    shouldShowSelfServeSso,
   };
 };
diff --git a/packages/ui/src/icons/connections.svg b/packages/ui/src/icons/connections.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3.5C3.72386 3.5 3.5 3.72386 3.5 4C3.5 4.27614 3.72386 4.5 4 4.5C4.27614 4.5 4.5 4.27614 4.5 4C4.5 3.72386 4.27614 3.5 4 3.5ZM2 4C2 2.89543 2.89543 2 4 2C5.10457 2 6 2.89543 6 4C6 4.83934 5.48296 5.55793 4.75 5.85462V6.25C4.75 6.94036 5.30964 7.5 6 7.5H10C10.6904 7.5 11.25 6.94036 11.25 6.25V5.85462C10.517 5.55793 10 4.83934 10 4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4C14 4.83934 13.483 5.55793 12.75 5.85462V6.25C12.75 7.76878 11.5188 9 10 9H8.75V10.1454C9.48296 10.4421 10 11.1607 10 12C10 13.1046 9.10457 14 8 14C6.89543 14 6 13.1046 6 12C6 11.1607 6.51704 10.4421 7.25 10.1454V9H6C4.48122 9 3.25 7.76878 3.25 6.25V5.85462C2.51704 5.55793 2 4.83934 2 4ZM12 3.5C11.7239 3.5 11.5 3.72386 11.5 4C11.5 4.27614 11.7239 4.5 12 4.5C12.2761 4.5 12.5 4.27614 12.5 4C12.5 3.72386 12.2761 3.5 12 3.5ZM8 11.5C7.72386 11.5 7.5 11.7239 7.5 12C7.5 12.2761 7.72386 12.5 8 12.5C8.27614 12.5 8.5 12.2761 8.5 12C8.5 11.7239 8.27614 11.5 8 11.5Z" fill="#2F3037"/>
+</svg>
diff --git a/packages/ui/src/icons/index.ts b/packages/ui/src/icons/index.ts
@@ -14,20 +14,21 @@ export { default as AuthApp } from './auth-app.svg';
 export { default as Billing } from './billing.svg';
 export { default as Block } from './block.svg';
 export { default as BoxIcon } from './box.svg';
-export { default as Caret } from './caret.svg';
 export { default as CaretLeft } from './caret-left.svg';
 export { default as CaretRight } from './caret-right.svg';
+export { default as Caret } from './caret.svg';
 export { default as ChatAltIcon } from './chat-alt.svg';
-export { default as Check } from './check.svg';
 export { default as CheckCircle } from './check-circle.svg';
+export { default as Check } from './check.svg';
 export { default as CheckmarkFilled } from './checkmark-filled.svg';
 export { default as ChevronDown } from './chevron-down.svg';
 export { default as ChevronUpDown } from './chevron-up-down.svg';
-export { default as Clipboard } from './clipboard.svg';
 export { default as ClipboardOutline } from './clipboard-outline.svg';
+export { default as Clipboard } from './clipboard.svg';
 export { default as Close } from './close.svg';
 export { default as Code } from './code.svg';
 export { default as CogFilled } from './cog-filled.svg';
+export { default as Connections } from './connections.svg';
 export { default as Copy } from './copy.svg';
 export { default as CreditCard } from './credit-card.svg';
 export { default as DeviceLaptop } from './device-laptop.svg';
@@ -38,8 +39,8 @@ export { default as DuotoneAtSymbol } from './duotone-at-symbol.svg';
 export { default as Email } from './email.svg';
 export { default as ExclamationCircle } from './exclamation-circle.svg';
 export { default as ExclamationTriangle } from './exclamation-triangle.svg';
-export { default as Eye } from './eye.svg';
 export { default as EyeSlash } from './eye-slash.svg';
+export { default as Eye } from './eye.svg';
 export { default as Fingerprint } from './fingerprint.svg';
 export { default as Folder } from './folder.svg';
 export { default as GenericPayment } from './generic-pay.svg';
@@ -53,17 +54,17 @@ export { default as Menu } from './menu.svg';
 export { default as Minus } from './minus.svg';
 export { default as Mobile } from './mobile-small.svg';
 export { default as Organization } from './organization.svg';
-export { default as Pencil } from './pencil.svg';
 export { default as PencilEdit } from './pencil-edit.svg';
+export { default as Pencil } from './pencil.svg';
 export { default as Plans } from './plans.svg';
 export { default as Plus } from './plus.svg';
 export { default as Print } from './print.svg';
 export { default as QuestionMark } from './question-mark.svg';
 export { default as RequestAuthIcon } from './request-auth.svg';
 export { default as RotateLeftRight } from './rotate-left-right.svg';
 export { default as Selector } from './selector.svg';
-export { default as SignOut } from './signout.svg';
 export { default as SignOutDouble } from './signout-double.svg';
+export { default as SignOut } from './signout.svg';
 export { default as SpinnerJumbo } from './spinner-jumbo.svg';
 export { default as SwitchArrowRight } from './switch-arrow-right.svg';
 export { default as SwitchArrows } from './switch-arrows.svg';
diff --git a/packages/ui/src/utils/createCustomPages.tsx b/packages/ui/src/utils/createCustomPages.tsx
@@ -1,6 +1,7 @@
 import {
   disabledOrganizationAPIKeysFeature,
   disabledOrganizationBillingFeature,
+  disabledSelfServeSSOFeature,
   disabledUserAPIKeysFeature,
   disabledUserBillingFeature,
 } from '@clerk/shared/internal/clerk-js/componentGuards';
@@ -9,7 +10,7 @@ import type { CustomPage, EnvironmentResource, LoadedClerk } from '@clerk/shared
 
 import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID, USER_PROFILE_NAVBAR_ROUTE_ID } from '../constants';
 import type { NavbarRoute } from '../elements/Navbar';
-import { Code, CreditCard, Organization, TickShield, User, Users } from '../icons';
+import { Code, Connections, CreditCard, Organization, TickShield, User, Users } from '../icons';
 import { localizationKeys } from '../localization';
 import { ExternalElementMounter } from './ExternalElementMounter';
 import { isDevelopmentSDK } from './runtimeEnvironment';
@@ -48,7 +49,15 @@ type GetDefaultRoutesReturnType = {
 
 type CreateCustomPagesParams = {
   customPages: CustomPage[];
-  getDefaultRoutes: ({ commerce, apiKeys }: { commerce: boolean; apiKeys: boolean }) => GetDefaultRoutesReturnType;
+  getDefaultRoutes: ({
+    commerce,
+    apiKeys,
+    selfServeSso,
+  }: {
+    commerce: boolean;
+    apiKeys: boolean;
+    selfServeSso: boolean;
+  }) => GetDefaultRoutesReturnType;
   setFirstPathToRoot: (routes: NavbarRoute[]) => NavbarRoute[];
   excludedPathsFromDuplicateWarning: string[];
 };
@@ -106,6 +115,7 @@ const createCustomPages = (
     apiKeys: organization
       ? !disabledOrganizationAPIKeysFeature(clerk, environment)
       : !disabledUserAPIKeysFeature(clerk, environment),
+    selfServeSso: organization ? !disabledSelfServeSSOFeature(clerk, environment) : false,
   });
 
   if (isDevelopmentSDK(clerk)) {
@@ -315,9 +325,11 @@ const getUserProfileDefaultRoutes = ({
 const getOrganizationProfileDefaultRoutes = ({
   commerce,
   apiKeys,
+  selfServeSso,
 }: {
   commerce: boolean;
   apiKeys: boolean;
+  selfServeSso: boolean;
 }): GetDefaultRoutesReturnType => {
   const INITIAL_ROUTES: NavbarRoute[] = [
     {
@@ -349,6 +361,14 @@ const getOrganizationProfileDefaultRoutes = ({
       path: 'organization-api-keys',
     });
   }
+  if (selfServeSso) {
+    INITIAL_ROUTES.push({
+      name: localizationKeys('organizationProfile.navbar.selfServeSso'),
+      id: ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.SELF_SERVE_SSO,
+      icon: Connections,
+      path: 'organization-self-serve-sso',
+    });
+  }
 
   const pageToRootNavbarRouteMap: Record<string, NavbarRoute> = {
     'invite-members': INITIAL_ROUTES.find(r => r.id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.MEMBERS) as NavbarRoute,
