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,
@@ -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,
@@ -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

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/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 = {