Validate when self-serve SSO is enabled

Author: LauraBeatris

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

@@ -15,6 +15,7 @@ import {
   disabledAllBillingFeatures,
   disabledOrganizationAPIKeysFeature,
   disabledOrganizationsFeature,
+  disabledSelfServeSSOFeature,
   disabledUserAPIKeysFeature,
   isSignedInAndSingleSessionModeEnabled,
   noOrganizationExists,
@@ -72,9 +73,9 @@ import type {
   AuthenticateWithSolanaParams,
   BillingNamespace,
   CheckoutSignalValue,
+  Clerk as ClerkInterface,
   ClerkAPIError,
   ClerkAuthenticateWithWeb3Params,
-  Clerk as ClerkInterface,
   ClerkOptions,
   ClientJSONSnapshot,
   ClientResource,
@@ -209,6 +210,7 @@ const CANNOT_RENDER_SINGLE_SESSION_ENABLED_ERROR_CODE = 'cannot_render_single_se
 const CANNOT_RENDER_API_KEYS_DISABLED_ERROR_CODE = 'cannot_render_api_keys_disabled';
 const CANNOT_RENDER_API_KEYS_USER_DISABLED_ERROR_CODE = 'cannot_render_api_keys_user_disabled';
 const CANNOT_RENDER_API_KEYS_ORG_DISABLED_ERROR_CODE = 'cannot_render_api_keys_org_disabled';
+const CANNOT_RENDER_SELF_SERVE_SSO_DISABLED_ERROR_CODE = 'cannot_render_self_serve_sso_disabled';
 const defaultOptions: ClerkOptions = {
   polling: true,
   standardBrowser: true,
@@ -546,7 +548,7 @@ export class Clerk implements ClerkInterface {
     ) {
       // Typing this.#options as ClerkOptions to ensure proper type checking. TypeScript will infer the type as `never`
       // since missing both `routerPush` and `routerReplace` is not a valid ClerkOptions.
-      const options = this.#options;
+      const options = this.#options as ClerkOptions;
       const missingRouter = !options.routerPush ? 'routerPush' : 'routerReplace';
       logger.warnOnce(
         `Clerk: Both \`routerPush\` and \`routerReplace\` need to be defined, but \`${missingRouter}\` is not defined. This may cause issues with navigation in your application.`,
@@ -1444,6 +1446,15 @@ export class Clerk implements ClerkInterface {
    * @param props Configuration parameters.
    */
   public __experimental_mountConfigureSSO = (node: HTMLDivElement, props?: __experimental_ConfigureSSOProps) => {
+    if (disabledSelfServeSSOFeature(this, this.environment)) {
+      if (this.#instanceType === 'development') {
+        throw new ClerkRuntimeError(warnings.cannotRenderConfigureSSOComponentWhenDisabled, {
+          code: CANNOT_RENDER_SELF_SERVE_SSO_DISABLED_ERROR_CODE,
+        });
+      }
+      return;
+    }
+
     this.assertComponentsReady(this.#clerkUI);
     const component = 'ConfigureSSO';
     void this.#clerkUI
@@ -2993,8 +3004,8 @@ export class Clerk implements ClerkInterface {
     this.#authService = await AuthCookieService.create(
       this,
       this.#fapiClient,
-
-      this.#instanceType,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      this.#instanceType!,
       this.#publicEventBus,
     );
 

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

@@ -105,6 +105,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
   };
   enterpriseSSO: EnterpriseSSOSettings = {
     enabled: false,
+    self_serve_sso: false,
   };
   passkeySettings: PasskeySettingsData = {
     allow_autofill: false,

packages/clerk-js/src/test/fixture-helpers.ts

@@ -536,7 +536,7 @@ const createUserSettingsFixtureHelpers = (environment: EnvironmentJSON) => {
 
   const withEnterpriseSso = () => {
     us.saml = { enabled: true };
-    us.enterprise_sso = { enabled: true };
+    us.enterprise_sso = { enabled: true, self_serve_sso: false };
   };
 
   const withBackupCode = (opts?: Partial<UserSettingsJSON['attributes']['backup_code']>) => {

packages/shared/src/internal/clerk-js/componentGuards.ts

@@ -45,3 +45,7 @@ export const disabledOrganizationAPIKeysFeature: ComponentGuard = (_, environmen
 export const disabledAllAPIKeysFeatures: ComponentGuard = (_, environment) => {
   return disabledUserAPIKeysFeature(_, environment) && disabledOrganizationAPIKeysFeature(_, environment);
 };
+
+export const disabledSelfServeSSOFeature: ComponentGuard = (_, environment) => {
+  return !environment?.userSettings.enterpriseSSO.self_serve_sso;
+};

packages/shared/src/internal/clerk-js/warnings.ts

@@ -64,6 +64,8 @@ const warnings = {
     'The <APIKeys/> component cannot be rendered when organization API keys are disabled. Since organization API keys are disabled, this is no-op.',
   cannotRenderOAuthConsentComponentWhenUserDoesNotExist:
     '<OAuthConsent/> cannot render unless a user is signed in. Since no user is signed in, this is no-op.',
+  cannotRenderConfigureSSOComponentWhenDisabled:
+    'The <ConfigureSSO/> component cannot be rendered when self-serve SSO is disabled. Visit `https://dashboard.clerk.com` to enable the feature. Since self-serve SSO is disabled, this is no-op.',
 };
 
 type SerializableWarnings = Serializable<typeof warnings>;

packages/shared/src/types/userSettings.ts

@@ -92,6 +92,7 @@ export type OAuthProviders = {
 };
 export type EnterpriseSSOSettings = {
   enabled: boolean;
+  self_serve_sso: boolean;
 };
 
 export type AttributesJSON = {