clerk · LauraBeatris · Apr 29, 2026 · Apr 29, 2026 · Apr 29, 2026 · Apr 30, 2026
diff --git a/.changeset/thirty-candies-lick.md b/.changeset/thirty-candies-lick.md
@@ -0,0 +1,12 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/astro': minor
+'@clerk/react': minor
+'@clerk/nuxt': minor
+'@clerk/vue': minor
+'@clerk/ui': minor
+---
+
+Add experimental `<ConfigureSSO />` component. Not ready for usage yet.
diff --git a/packages/astro/src/astro-components/index.ts b/packages/astro/src/astro-components/index.ts
@@ -31,3 +31,4 @@ export { default as Waitlist } from './interactive/Waitlist.astro';
 export { default as OAuthConsent } from './interactive/OAuthConsent.astro';
 export { default as PricingTable } from './interactive/PricingTable.astro';
 export { default as APIKeys } from './interactive/APIKeys.astro';
+export { default as __experimental_ConfigureSSO } from './interactive/ConfigureSSO.astro';
diff --git a/packages/astro/src/astro-components/interactive/ConfigureSSO.astro b/packages/astro/src/astro-components/interactive/ConfigureSSO.astro
@@ -0,0 +1,11 @@
+---
+import type { __experimental_ConfigureSSOProps } from '@clerk/shared/types';
+type Props = __experimental_ConfigureSSOProps;
+
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro';
+---
+
+<InternalUIComponentRenderer
+  {...Astro.props}
+  component='configure-sso'
+/>
diff --git a/packages/astro/src/internal/mount-clerk-astro-js-components.ts b/packages/astro/src/internal/mount-clerk-astro-js-components.ts
@@ -21,7 +21,7 @@ const mountAllClerkAstroJSComponents = () => {
     waitlist: 'mountWaitlist',
     'pricing-table': 'mountPricingTable',
     'api-keys': 'mountAPIKeys',
-    'oauth-consent': 'mountOAuthConsent',
+    'configure-sso': '__experimental_mountConfigureSSO',
   } as const satisfies Record<InternalUIComponentId, keyof Clerk>;
 
   Object.entries(mountFns).forEach(([category, mountFn]) => {

diff --git a/packages/astro/src/types.ts b/packages/astro/src/types.ts
@@ -120,4 +120,4 @@ export type InternalUIComponentId =
   | 'waitlist'
   | 'pricing-table'
   | 'api-keys'
-  | 'oauth-consent';
+  | 'configure-sso';
diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
@@ -2,8 +2,8 @@
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "543KB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "70KB" },
-    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "110KB" },
-    { "path": "./dist/clerk.no-rhc.js", "maxSize": "309KB" },
+    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "112KB" },
+    { "path": "./dist/clerk.no-rhc.js", "maxSize": "311KB" },
     { "path": "./dist/clerk.native.js", "maxSize": "70KB" },
     { "path": "./dist/vendors*.js", "maxSize": "7KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "36KB" },

diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts
@@ -32,6 +32,7 @@ const AVAILABLE_COMPONENTS = [
   'waitlist',
   'pricingTable',
   'apiKeys',
+  'configureSSO',
   'oauthConsent',
   'taskChooseOrganization',
   'taskResetPassword',
@@ -136,6 +137,7 @@ const componentControls: Record<AvailableComponent, ComponentPropsControl> = {
   waitlist: buildComponentControls('waitlist'),
   pricingTable: buildComponentControls('pricingTable'),
   apiKeys: buildComponentControls('apiKeys'),
+  configureSSO: buildComponentControls('configureSSO'),
   oauthConsent: buildComponentControls('oauthConsent'),
   taskChooseOrganization: buildComponentControls('taskChooseOrganization'),
   taskResetPassword: buildComponentControls('taskResetPassword'),
@@ -468,6 +470,9 @@ void (async () => {
     '/api-keys': () => {
       Clerk.mountAPIKeys(app, componentControls.apiKeys.getProps() ?? {});
     },
+    '/configure-sso': () => {
+      Clerk.__experimental_mountConfigureSSO(app, componentControls.configureSSO.getProps() ?? {});
+    },
     '/oauth-consent': () => {
       const searchParams = new URLSearchParams(window.location.search);
       const scopes = (searchParams.get('scope')?.split(',') ?? []).map(scope => ({

diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html
@@ -177,6 +177,14 @@
               API Keys
             </a>
           </li>
+          <li class="relative">
+            <a
+              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+              href="/configure-sso"
+            >
+              ConfigureSSO
+            </a>
+          </li>
           <li class="relative">
             <a
               class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
@@ -13,8 +13,10 @@ import {
 import {
   disabledAllAPIKeysFeatures,
   disabledAllBillingFeatures,
+  disabledEmailAddressAttribute,
   disabledOrganizationAPIKeysFeature,
   disabledOrganizationsFeature,
+  disabledSelfServeSSOFeature,
   disabledUserAPIKeysFeature,
   isSignedInAndSingleSessionModeEnabled,
   noOrganizationExists,
@@ -53,6 +55,7 @@ import {
 } from '@clerk/shared/telemetry';
 import type {
   __experimental_CheckoutOptions,
+  __experimental_ConfigureSSOProps,
   __internal_AttemptToEnableEnvironmentSettingParams,
   __internal_AttemptToEnableEnvironmentSettingResult,
   __internal_CheckoutProps,
@@ -95,7 +98,6 @@ import type {
   LoadedClerk,
   NavigateOptions,
   OAuthApplicationNamespace,
-  OAuthConsentProps,
   OrganizationListProps,
   OrganizationProfileProps,
   OrganizationResource,
@@ -209,6 +211,9 @@ 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 CANNOT_RENDER_CONFIGURE_SSO_EMAIL_ADDRESS_DISABLED_ERROR_CODE =
+  'cannot_render_configure_sso_email_address_disabled';
 const defaultOptions: ClerkOptions = {
   polling: true,
   standardBrowser: true,
@@ -1349,7 +1354,7 @@ export class Clerk implements ClerkInterface {
     void this.#clerkUI?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node }));
   };
 
-  public mountOAuthConsent = (node: HTMLDivElement, props?: OAuthConsentProps) => {
+  public mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => {
     if (noUserExists(this)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotRenderOAuthConsentComponentWhenUserDoesNotExist, {
@@ -1450,6 +1455,59 @@ export class Clerk implements ClerkInterface {
     void this.#clerkUI?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node }));
   };
 
+  /**
+   * Mount a configure SSO component at the target element.
+   *
+   * @experimental
+   * @param targetNode Target to mount the ConfigureSSO component.
+   * @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;
+    }
+
+    if (disabledEmailAddressAttribute(this, this.environment)) {
+      if (this.#instanceType === 'development') {
+        throw new ClerkRuntimeError(warnings.cannotRenderConfigureSSOComponentWhenEmailAddressDisabled, {
+          code: CANNOT_RENDER_CONFIGURE_SSO_EMAIL_ADDRESS_DISABLED_ERROR_CODE,
+        });
+      }
+      return;
+    }
+
+    this.assertComponentsReady(this.#clerkUI);
+    const component = 'ConfigureSSO';
+    void this.#clerkUI
+      .then(ui => ui.ensureMounted({ preloadHint: component }))
+      .then(controls =>
+        controls.mountComponent({
+          name: component,
+          appearanceKey: '__experimental_configureSSO',
+          node,
+          props,
+        }),
+      );
+
+    this.telemetry?.record(eventPrebuiltComponentMounted(component, props));
+  };
+
+  /**
+   * Unmount a configure SSO component from the target element.
+   * If there is no component mounted at the target node, results in a noop.
+   *
+   * @experimental
+   * @param targetNode Target node to unmount the ConfigureSSO component from.
+   */
+  public __experimental_unmountConfigureSSO = (node: HTMLDivElement) => {
+    void this.#clerkUI?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node }));
+  };
+
   public mountTaskChooseOrganization = (node: HTMLDivElement, props?: TaskChooseOrganizationProps) => {
     const { isEnabled: isOrganizationsEnabled } = this.__internal_attemptToEnableEnvironmentSetting({
       for: 'organizations',

diff --git a/packages/clerk-js/src/core/resources/UserSettings.ts b/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,

diff --git a/packages/clerk-js/src/test/fixture-helpers.ts b/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']>) => {

diff --git a/packages/localizations/src/ar-SA.ts b/packages/localizations/src/ar-SA.ts
@@ -178,6 +178,11 @@ export const arSA: LocalizationResource = {
     viewPayment: undefined,
     year: undefined,
   },
+  configureSSO: {
+    navbar: {
+      title: 'تكوين تسجيل الدخول الموحد (SSO)',
+    },
+  },
   createOrganization: {
     formButtonSubmit: 'أنشاء منظمة',
     invitePage: {

diff --git a/packages/localizations/src/be-BY.ts b/packages/localizations/src/be-BY.ts
@@ -178,6 +178,11 @@ export const beBY: LocalizationResource = {
     viewPayment: undefined,
     year: undefined,
   },
+  configureSSO: {
+    navbar: {
+      title: 'Налада адзінага ўваходу (SSO)',
+    },
+  },
   createOrganization: {
     formButtonSubmit: 'Стварыць арганізацыю',
     invitePage: {

diff --git a/packages/localizations/src/bg-BG.ts b/packages/localizations/src/bg-BG.ts
@@ -179,6 +179,11 @@ export const bgBG: LocalizationResource = {
     viewPayment: undefined,
     year: undefined,
   },
+  configureSSO: {
+    navbar: {
+      title: 'Конфигуриране на единен вход (SSO)',
+    },
+  },
   createOrganization: {
     formButtonSubmit: 'Създаване на организация',
     invitePage: {

diff --git a/packages/localizations/src/bn-IN.ts b/packages/localizations/src/bn-IN.ts
@@ -178,6 +178,11 @@ export const bnIN: LocalizationResource = {
     viewPayment: undefined,
     year: undefined,
   },
+  configureSSO: {
+    navbar: {
+      title: 'একক সাইন-অন (SSO) কনফিগার করুন',
+    },
+  },
   createOrganization: {
     formButtonSubmit: 'সংগঠন তৈরি করুন',
     invitePage: {

diff --git a/packages/localizations/src/ca-ES.ts b/packages/localizations/src/ca-ES.ts
@@ -185,6 +185,11 @@ export const caES: LocalizationResource = {
     viewPayment: 'Veure pagament',
     year: 'Any',
   },
+  configureSSO: {
+    navbar: {
+      title: "Configura l'inici de sessió únic (SSO)",
+    },
+  },
   createOrganization: {
     formButtonSubmit: 'Crea organització',
     invitePage: {

diff --git a/packages/localizations/src/cs-CZ.ts b/packages/localizations/src/cs-CZ.ts
@@ -182,6 +182,11 @@ export const csCZ: LocalizationResource = {
     viewPayment: undefined,
     year: 'Rok',
   },
+  configureSSO: {
+    navbar: {
+      title: 'Nastavit jednotné přihlášení (SSO)',
+    },
+  },
   createOrganization: {
     formButtonSubmit: 'Vytvořit organizaci',
     invitePage: {

diff --git a/packages/localizations/src/da-DK.ts b/packages/localizations/src/da-DK.ts
@@ -178,6 +178,11 @@ export const daDK: LocalizationResource = {
     viewPayment: undefined,
     year: undefined,
   },
+  configureSSO: {
+    navbar: {
+      title: 'Konfigurer single sign-on (SSO)',
+    },
+  },
   createOrganization: {
     formButtonSubmit: 'Opret organisation',
     invitePage: {

diff --git a/packages/localizations/src/de-DE.ts b/packages/localizations/src/de-DE.ts
@@ -184,6 +184,11 @@ export const deDE: LocalizationResource = {
     viewPayment: 'Zahlung anzeigen',
     year: 'Jahr',
   },
+  configureSSO: {
+    navbar: {
+      title: 'Single Sign-On (SSO) konfigurieren',
+    },
+  },
   createOrganization: {
     formButtonSubmit: 'Organisation erstellen',
     invitePage: {

diff --git a/packages/localizations/src/el-GR.ts b/packages/localizations/src/el-GR.ts
@@ -178,6 +178,11 @@ export const elGR: LocalizationResource = {
     viewPayment: 'Προβολή πληρωμής',
     year: 'έτος',
   },
+  configureSSO: {
+    navbar: {
+      title: 'Διαμόρφωση Ενιαίας Σύνδεσης (SSO)',
+    },
+  },
   createOrganization: {
     formButtonSubmit: 'Δημιουργία οργανισμού',
     invitePage: {

diff --git a/packages/localizations/src/en-GB.ts b/packages/localizations/src/en-GB.ts
@@ -178,6 +178,11 @@ export const enGB: LocalizationResource = {
     viewPayment: undefined,
     year: undefined,
   },
+  configureSSO: {
+    navbar: {
+      title: 'Configure Single Sign-On (SSO)',
+    },
+  },
   createOrganization: {
     formButtonSubmit: 'Create organisation',
     invitePage: {

diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
@@ -197,6 +197,11 @@ export const enUS: LocalizationResource = {
     yearAbbreviation: 'yr',
     yearPerUnit: 'Year per {{unitName}}',
   },
+  configureSSO: {
+    navbar: {
+      title: 'Configure Single Sign-On (SSO)',
+    },
+  },
   createOrganization: {
     formButtonSubmit: 'Create organization',
     invitePage: {

diff --git a/packages/localizations/src/es-CR.ts b/packages/localizations/src/es-CR.ts
@@ -178,6 +178,11 @@ export const esCR: LocalizationResource = {
     viewPayment: undefined,
     year: undefined,
   },
+  configureSSO: {
+    navbar: {
+      title: 'Configurar inicio de sesión único (SSO)',
+    },
+  },
   createOrganization: {
     formButtonSubmit: 'Crear organización',
     invitePage: {

diff --git a/packages/localizations/src/es-ES.ts b/packages/localizations/src/es-ES.ts
@@ -184,6 +184,11 @@ export const esES: LocalizationResource = {
     viewPayment: 'Ver pago',
     year: 'Año',
   },
+  configureSSO: {
+    navbar: {
+      title: 'Configurar inicio de sesión único (SSO)',
+    },
+  },
   createOrganization: {
     formButtonSubmit: 'Crear organización',
     invitePage: {

diff --git a/packages/localizations/src/es-MX.ts b/packages/localizations/src/es-MX.ts
@@ -179,6 +179,11 @@ export const esMX: LocalizationResource = {
     viewPayment: undefined,
     year: undefined,
   },
+  configureSSO: {
+    navbar: {
+      title: 'Configurar inicio de sesión único (SSO)',
+    },
+  },
   createOrganization: {
     formButtonSubmit: 'Crear organización',
     invitePage: {

diff --git a/packages/localizations/src/es-UY.ts b/packages/localizations/src/es-UY.ts
@@ -178,6 +178,11 @@ export const esUY: LocalizationResource = {
     viewPayment: undefined,
     year: undefined,
   },
+  configureSSO: {
+    navbar: {
+      title: 'Configurar inicio de sesión único (SSO)',
+    },
+  },
   createOrganization: {
     formButtonSubmit: 'Crear organización',
     invitePage: {