feat(ui,clerk-js,shared): Add <experimental_ConfigureSSO />#8427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LauraBeatris merged 13 commits into from
May 5, 2026
Merged

feat(ui,clerk-js,shared): Add <experimental_ConfigureSSO />#8427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7d5f0c9
Add methods to manage enterprise connection
LauraBeatris Apr 29, 2026
9c6d43f
Add enterprise connection test run resource
LauraBeatris Apr 29, 2026
1a21387
Update `useUserEnterpriseConnections` to have mutation methods
LauraBeatris Apr 29, 2026
82b7019
Add basic infra for component across packages
LauraBeatris Apr 30, 2026
724470d
Render basic sidebar
LauraBeatris Apr 30, 2026
b0b6a2b
Update to `__experimental` prefix
LauraBeatris Apr 30, 2026
a748e70
Add changeset
LauraBeatris Apr 30, 2026
4cac250
Validate when self-serve SSO is enabled
LauraBeatris Apr 30, 2026
097b142
Add unit test for `self_serve_sso` setting on render
LauraBeatris Apr 30, 2026
c7dcbdd
Add metadata to sidebar
LauraBeatris May 4, 2026
abc67ce
Check if email addresses are enabled
LauraBeatris May 4, 2026
03cc600
Bump bundle limit
LauraBeatris May 4, 2026
30cfed4
Display box icon as fallback
LauraBeatris May 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions .changeset/thirty-candies-lick.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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.
1 change: 1 addition & 0 deletions packages/astro/src/astro-components/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
11 changes: 11 additions & 0 deletions packages/astro/src/astro-components/interactive/ConfigureSSO.astro
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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'
/>
2 changes: 1 addition & 1 deletion packages/astro/src/internal/mount-clerk-astro-js-components.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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]) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/astro/src/types.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -120,4 +120,4 @@ export type InternalUIComponentId =
| 'waitlist'
| 'pricing-table'
| 'api-keys'
| 'oauth-consent';
| 'configure-sso';
4 changes: 2 additions & 2 deletions packages/clerk-js/bundlewatch.config.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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" },
Expand Down
5 changes: 5 additions & 0 deletions packages/clerk-js/sandbox/app.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -32,6 +32,7 @@ const AVAILABLE_COMPONENTS = [
'waitlist',
'pricingTable',
'apiKeys',
'configureSSO',
'oauthConsent',
'taskChooseOrganization',
'taskResetPassword',
Expand DownExpand Up@@ -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'),
Expand DownExpand Up@@ -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 => ({
Expand Down
8 changes: 8 additions & 0 deletions packages/clerk-js/sandbox/template.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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"
Expand Down
62 changes: 60 additions & 2 deletions packages/clerk-js/src/core/clerk.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,10 @@ import {
import {
disabledAllAPIKeysFeatures,
disabledAllBillingFeatures,
disabledEmailAddressAttribute,
disabledOrganizationAPIKeysFeature,
disabledOrganizationsFeature,
disabledSelfServeSSOFeature,
disabledUserAPIKeysFeature,
isSignedInAndSingleSessionModeEnabled,
noOrganizationExists,
Expand DownExpand Up@@ -53,6 +55,7 @@ import {
} from '@clerk/shared/telemetry';
import type {
__experimental_CheckoutOptions,
__experimental_ConfigureSSOProps,
__internal_AttemptToEnableEnvironmentSettingParams,
__internal_AttemptToEnableEnvironmentSettingResult,
__internal_CheckoutProps,
Expand DownExpand Up@@ -95,7 +98,6 @@ import type {
LoadedClerk,
NavigateOptions,
OAuthApplicationNamespace,
OAuthConsentProps,
OrganizationListProps,
OrganizationProfileProps,
OrganizationResource,
Expand DownExpand Up@@ -208,6 +210,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,
Expand DownExpand Up@@ -1325,7 +1330,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, {
Expand DownExpand Up@@ -1426,6 +1431,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',
Expand Down
1 change: 1 addition & 0 deletions packages/clerk-js/src/core/resources/UserSettings.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -105,6 +105,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
};
enterpriseSSO: EnterpriseSSOSettings = {
enabled: false,
self_serve_sso: false,
};
passkeySettings: PasskeySettingsData = {
allow_autofill: false,
Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/test/fixture-helpers.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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']>) => {
Expand Down
5 changes: 5 additions & 0 deletions packages/localizations/src/ar-SA.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const arSA: LocalizationResource = {
viewPayment: undefined,
year: undefined,
},
configureSSO: {
navbar: {
title: 'تكوين تسجيل الدخول الموحد (SSO)',
},
},
createOrganization: {
formButtonSubmit: 'أنشاء منظمة',
invitePage: {
Expand Down
5 changes: 5 additions & 0 deletions packages/localizations/src/be-BY.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const beBY: LocalizationResource = {
viewPayment: undefined,
year: undefined,
},
configureSSO: {
navbar: {
title: 'Налада адзінага ўваходу (SSO)',
},
},
createOrganization: {
formButtonSubmit: 'Стварыць арганізацыю',
invitePage: {
Expand Down
5 changes: 5 additions & 0 deletions packages/localizations/src/bg-BG.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -179,6 +179,11 @@ export const bgBG: LocalizationResource = {
viewPayment: undefined,
year: undefined,
},
configureSSO: {
navbar: {
title: 'Конфигуриране на единен вход (SSO)',
},
},
createOrganization: {
formButtonSubmit: 'Създаване на организация',
invitePage: {
Expand Down
5 changes: 5 additions & 0 deletions packages/localizations/src/bn-IN.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const bnIN: LocalizationResource = {
viewPayment: undefined,
year: undefined,
},
configureSSO: {
navbar: {
title: 'একক সাইন-অন (SSO) কনফিগার করুন',
},
},
createOrganization: {
formButtonSubmit: 'সংগঠন তৈরি করুন',
invitePage: {
Expand Down
5 changes: 5 additions & 0 deletions packages/localizations/src/ca-ES.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
5 changes: 5 additions & 0 deletions packages/localizations/src/cs-CZ.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
5 changes: 5 additions & 0 deletions packages/localizations/src/da-DK.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
5 changes: 5 additions & 0 deletions packages/localizations/src/de-DE.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
5 changes: 5 additions & 0 deletions packages/localizations/src/el-GR.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const elGR: LocalizationResource = {
viewPayment: 'Προβολή πληρωμής',
year: 'έτος',
},
configureSSO: {
navbar: {
title: 'Διαμόρφωση Ενιαίας Σύνδεσης (SSO)',
},
},
createOrganization: {
formButtonSubmit: 'Δημιουργία οργανισμού',
invitePage: {
Expand Down
5 changes: 5 additions & 0 deletions packages/localizations/src/en-GB.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
5 changes: 5 additions & 0 deletions packages/localizations/src/en-US.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
5 changes: 5 additions & 0 deletions packages/localizations/src/es-CR.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
5 changes: 5 additions & 0 deletions packages/localizations/src/es-ES.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
5 changes: 5 additions & 0 deletions packages/localizations/src/es-MX.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
5 changes: 5 additions & 0 deletions packages/localizations/src/es-UY.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat(ui,clerk-js,shared): Add <experimental_ConfigureSSO />#8427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

LauraBeatris
merged 13 commits into

from

May 5, 2026
 Merged


feat(ui,clerk-js,shared): Add <experimental_ConfigureSSO />#8427
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
7d5f0c9

Add methods to manage enterprise connection


LauraBeatris Apr 29, 2026
9c6d43f

Add enterprise connection test run resource


LauraBeatris Apr 29, 2026
1a21387

Update `useUserEnterpriseConnections` to have mutation methods


LauraBeatris Apr 29, 2026
82b7019

Add basic infra for component across packages


LauraBeatris Apr 30, 2026
724470d

Render basic sidebar


LauraBeatris Apr 30, 2026
b0b6a2b

Update to `__experimental` prefix


LauraBeatris Apr 30, 2026
a748e70

Add changeset


LauraBeatris Apr 30, 2026
4cac250

Validate when self-serve SSO is enabled


LauraBeatris Apr 30, 2026
097b142

Add unit test for `self_serve_sso` setting on render


LauraBeatris Apr 30, 2026
c7dcbdd

Add metadata to sidebar


LauraBeatris May 4, 2026
abc67ce

Check if email addresses are enabled


LauraBeatris May 4, 2026
03cc600

Bump bundle limit


LauraBeatris May 4, 2026
30cfed4

Display box icon as fallback


LauraBeatris May 4, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


12 changes: 12 additions & 0 deletions
.changeset/thirty-candies-lick.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.

1 change: 1 addition & 0 deletions
packages/astro/src/astro-components/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';

11 changes: 11 additions & 0 deletions
packages/astro/src/astro-components/interactive/ConfigureSSO.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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'
/>

2 changes: 1 addition & 1 deletion
packages/astro/src/internal/mount-clerk-astro-js-components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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]) => {
Expand Down

2 changes: 1 addition & 1 deletion
packages/astro/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -120,4 +120,4 @@ export type InternalUIComponentId =
 | 'waitlist'
 | 'pricing-table'
 | 'api-keys'
 | 'oauth-consent';
 | 'configure-sso';

4 changes: 2 additions & 2 deletions
packages/clerk-js/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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" },
Expand Down

5 changes: 5 additions & 0 deletions
packages/clerk-js/sandbox/app.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -32,6 +32,7 @@ const AVAILABLE_COMPONENTS = [
 'waitlist',
 'pricingTable',
 'apiKeys',
 'configureSSO',
 'oauthConsent',
 'taskChooseOrganization',
 'taskResetPassword',
Expand DownExpand Up@@ -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'),
Expand DownExpand Up@@ -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 => ({
Expand Down

8 changes: 8 additions & 0 deletions
packages/clerk-js/sandbox/template.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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"
Expand Down

62 changes: 60 additions & 2 deletions
packages/clerk-js/src/core/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,10 @@ import {
import {
 disabledAllAPIKeysFeatures,
 disabledAllBillingFeatures,
 disabledEmailAddressAttribute,
 disabledOrganizationAPIKeysFeature,
 disabledOrganizationsFeature,
 disabledSelfServeSSOFeature,
 disabledUserAPIKeysFeature,
 isSignedInAndSingleSessionModeEnabled,
 noOrganizationExists,
Expand DownExpand Up@@ -53,6 +55,7 @@ import {
} from '@clerk/shared/telemetry';
import type {
 __experimental_CheckoutOptions,
 __experimental_ConfigureSSOProps,
 __internal_AttemptToEnableEnvironmentSettingParams,
 __internal_AttemptToEnableEnvironmentSettingResult,
 __internal_CheckoutProps,
Expand DownExpand Up@@ -95,7 +98,6 @@ import type {
 LoadedClerk,
 NavigateOptions,
 OAuthApplicationNamespace,
 OAuthConsentProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationResource,
Expand DownExpand Up@@ -208,6 +210,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,
Expand DownExpand Up@@ -1325,7 +1330,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, {
Expand DownExpand Up@@ -1426,6 +1431,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',
Expand Down

1 change: 1 addition & 0 deletions
packages/clerk-js/src/core/resources/UserSettings.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -105,6 +105,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
 };
 enterpriseSSO: EnterpriseSSOSettings = {
 enabled: false,
 self_serve_sso: false,
 };
 passkeySettings: PasskeySettingsData = {
 allow_autofill: false,
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/test/fixture-helpers.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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']>) => {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/ar-SA.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const arSA: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'تكوين تسجيل الدخول الموحد (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'أنشاء منظمة',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/be-BY.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const beBY: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'Налада адзінага ўваходу (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Стварыць арганізацыю',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/bg-BG.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -179,6 +179,11 @@ export const bgBG: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'Конфигуриране на единен вход (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Създаване на организация',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/bn-IN.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const bnIN: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'একক সাইন-অন (SSO) কনফিগার করুন',
 },
 },
 createOrganization: {
 formButtonSubmit: 'সংগঠন তৈরি করুন',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/ca-ES.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/cs-CZ.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/da-DK.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/de-DE.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/el-GR.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const elGR: LocalizationResource = {
 viewPayment: 'Προβολή πληρωμής',
 year: 'έτος',
 },
 configureSSO: {
 navbar: {
 title: 'Διαμόρφωση Ενιαίας Σύνδεσης (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Δημιουργία οργανισμού',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/en-GB.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/en-US.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-CR.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-ES.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-MX.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-UY.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(ui,clerk-js,shared): Add <experimental_ConfigureSSO />#8427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

LauraBeatris
merged 13 commits into

from

May 5, 2026
 Merged


feat(ui,clerk-js,shared): Add <experimental_ConfigureSSO />#8427
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
7d5f0c9

Add methods to manage enterprise connection


LauraBeatris Apr 29, 2026
9c6d43f

Add enterprise connection test run resource


LauraBeatris Apr 29, 2026
1a21387

Update `useUserEnterpriseConnections` to have mutation methods


LauraBeatris Apr 29, 2026
82b7019

Add basic infra for component across packages


LauraBeatris Apr 30, 2026
724470d

Render basic sidebar


LauraBeatris Apr 30, 2026
b0b6a2b

Update to `__experimental` prefix


LauraBeatris Apr 30, 2026
a748e70

Add changeset


LauraBeatris Apr 30, 2026
4cac250

Validate when self-serve SSO is enabled


LauraBeatris Apr 30, 2026
097b142

Add unit test for `self_serve_sso` setting on render


LauraBeatris Apr 30, 2026
c7dcbdd

Add metadata to sidebar


LauraBeatris May 4, 2026
abc67ce

Check if email addresses are enabled


LauraBeatris May 4, 2026
03cc600

Bump bundle limit


LauraBeatris May 4, 2026
30cfed4

Display box icon as fallback


LauraBeatris May 4, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


12 changes: 12 additions & 0 deletions
.changeset/thirty-candies-lick.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.

1 change: 1 addition & 0 deletions
packages/astro/src/astro-components/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';

11 changes: 11 additions & 0 deletions
packages/astro/src/astro-components/interactive/ConfigureSSO.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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'
/>

2 changes: 1 addition & 1 deletion
packages/astro/src/internal/mount-clerk-astro-js-components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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]) => {
Expand Down

2 changes: 1 addition & 1 deletion
packages/astro/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -120,4 +120,4 @@ export type InternalUIComponentId =
 | 'waitlist'
 | 'pricing-table'
 | 'api-keys'
 | 'oauth-consent';
 | 'configure-sso';

4 changes: 2 additions & 2 deletions
packages/clerk-js/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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" },
Expand Down

5 changes: 5 additions & 0 deletions
packages/clerk-js/sandbox/app.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -32,6 +32,7 @@ const AVAILABLE_COMPONENTS = [
 'waitlist',
 'pricingTable',
 'apiKeys',
 'configureSSO',
 'oauthConsent',
 'taskChooseOrganization',
 'taskResetPassword',
Expand DownExpand Up@@ -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'),
Expand DownExpand Up@@ -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 => ({
Expand Down

8 changes: 8 additions & 0 deletions
packages/clerk-js/sandbox/template.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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"
Expand Down

62 changes: 60 additions & 2 deletions
packages/clerk-js/src/core/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,10 @@ import {
import {
 disabledAllAPIKeysFeatures,
 disabledAllBillingFeatures,
 disabledEmailAddressAttribute,
 disabledOrganizationAPIKeysFeature,
 disabledOrganizationsFeature,
 disabledSelfServeSSOFeature,
 disabledUserAPIKeysFeature,
 isSignedInAndSingleSessionModeEnabled,
 noOrganizationExists,
Expand DownExpand Up@@ -53,6 +55,7 @@ import {
} from '@clerk/shared/telemetry';
import type {
 __experimental_CheckoutOptions,
 __experimental_ConfigureSSOProps,
 __internal_AttemptToEnableEnvironmentSettingParams,
 __internal_AttemptToEnableEnvironmentSettingResult,
 __internal_CheckoutProps,
Expand DownExpand Up@@ -95,7 +98,6 @@ import type {
 LoadedClerk,
 NavigateOptions,
 OAuthApplicationNamespace,
 OAuthConsentProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationResource,
Expand DownExpand Up@@ -208,6 +210,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,
Expand DownExpand Up@@ -1325,7 +1330,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, {
Expand DownExpand Up@@ -1426,6 +1431,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',
Expand Down

1 change: 1 addition & 0 deletions
packages/clerk-js/src/core/resources/UserSettings.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -105,6 +105,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
 };
 enterpriseSSO: EnterpriseSSOSettings = {
 enabled: false,
 self_serve_sso: false,
 };
 passkeySettings: PasskeySettingsData = {
 allow_autofill: false,
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/test/fixture-helpers.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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']>) => {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/ar-SA.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const arSA: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'تكوين تسجيل الدخول الموحد (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'أنشاء منظمة',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/be-BY.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const beBY: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'Налада адзінага ўваходу (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Стварыць арганізацыю',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/bg-BG.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -179,6 +179,11 @@ export const bgBG: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'Конфигуриране на единен вход (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Създаване на организация',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/bn-IN.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const bnIN: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'একক সাইন-অন (SSO) কনফিগার করুন',
 },
 },
 createOrganization: {
 formButtonSubmit: 'সংগঠন তৈরি করুন',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/ca-ES.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/cs-CZ.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/da-DK.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/de-DE.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/el-GR.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const elGR: LocalizationResource = {
 viewPayment: 'Προβολή πληρωμής',
 year: 'έτος',
 },
 configureSSO: {
 navbar: {
 title: 'Διαμόρφωση Ενιαίας Σύνδεσης (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Δημιουργία οργανισμού',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/en-GB.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/en-US.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-CR.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-ES.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-MX.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-UY.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(ui,clerk-js,shared): Add <experimental_ConfigureSSO />#8427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

LauraBeatris
merged 13 commits into

from

May 5, 2026
 Merged


feat(ui,clerk-js,shared): Add <experimental_ConfigureSSO />#8427
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
7d5f0c9

Add methods to manage enterprise connection


LauraBeatris Apr 29, 2026
9c6d43f

Add enterprise connection test run resource


LauraBeatris Apr 29, 2026
1a21387

Update `useUserEnterpriseConnections` to have mutation methods


LauraBeatris Apr 29, 2026
82b7019

Add basic infra for component across packages


LauraBeatris Apr 30, 2026
724470d

Render basic sidebar


LauraBeatris Apr 30, 2026
b0b6a2b

Update to `__experimental` prefix


LauraBeatris Apr 30, 2026
a748e70

Add changeset


LauraBeatris Apr 30, 2026
4cac250

Validate when self-serve SSO is enabled


LauraBeatris Apr 30, 2026
097b142

Add unit test for `self_serve_sso` setting on render


LauraBeatris Apr 30, 2026
c7dcbdd

Add metadata to sidebar


LauraBeatris May 4, 2026
abc67ce

Check if email addresses are enabled


LauraBeatris May 4, 2026
03cc600

Bump bundle limit


LauraBeatris May 4, 2026
30cfed4

Display box icon as fallback


LauraBeatris May 4, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


12 changes: 12 additions & 0 deletions
.changeset/thirty-candies-lick.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.

1 change: 1 addition & 0 deletions
packages/astro/src/astro-components/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';

11 changes: 11 additions & 0 deletions
packages/astro/src/astro-components/interactive/ConfigureSSO.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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'
/>

2 changes: 1 addition & 1 deletion
packages/astro/src/internal/mount-clerk-astro-js-components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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]) => {
Expand Down

2 changes: 1 addition & 1 deletion
packages/astro/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -120,4 +120,4 @@ export type InternalUIComponentId =
 | 'waitlist'
 | 'pricing-table'
 | 'api-keys'
 | 'oauth-consent';
 | 'configure-sso';

4 changes: 2 additions & 2 deletions
packages/clerk-js/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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" },
Expand Down

5 changes: 5 additions & 0 deletions
packages/clerk-js/sandbox/app.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -32,6 +32,7 @@ const AVAILABLE_COMPONENTS = [
 'waitlist',
 'pricingTable',
 'apiKeys',
 'configureSSO',
 'oauthConsent',
 'taskChooseOrganization',
 'taskResetPassword',
Expand DownExpand Up@@ -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'),
Expand DownExpand Up@@ -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 => ({
Expand Down

8 changes: 8 additions & 0 deletions
packages/clerk-js/sandbox/template.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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"
Expand Down

62 changes: 60 additions & 2 deletions
packages/clerk-js/src/core/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,10 @@ import {
import {
 disabledAllAPIKeysFeatures,
 disabledAllBillingFeatures,
 disabledEmailAddressAttribute,
 disabledOrganizationAPIKeysFeature,
 disabledOrganizationsFeature,
 disabledSelfServeSSOFeature,
 disabledUserAPIKeysFeature,
 isSignedInAndSingleSessionModeEnabled,
 noOrganizationExists,
Expand DownExpand Up@@ -53,6 +55,7 @@ import {
} from '@clerk/shared/telemetry';
import type {
 __experimental_CheckoutOptions,
 __experimental_ConfigureSSOProps,
 __internal_AttemptToEnableEnvironmentSettingParams,
 __internal_AttemptToEnableEnvironmentSettingResult,
 __internal_CheckoutProps,
Expand DownExpand Up@@ -95,7 +98,6 @@ import type {
 LoadedClerk,
 NavigateOptions,
 OAuthApplicationNamespace,
 OAuthConsentProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationResource,
Expand DownExpand Up@@ -208,6 +210,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,
Expand DownExpand Up@@ -1325,7 +1330,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, {
Expand DownExpand Up@@ -1426,6 +1431,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',
Expand Down

1 change: 1 addition & 0 deletions
packages/clerk-js/src/core/resources/UserSettings.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -105,6 +105,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
 };
 enterpriseSSO: EnterpriseSSOSettings = {
 enabled: false,
 self_serve_sso: false,
 };
 passkeySettings: PasskeySettingsData = {
 allow_autofill: false,
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/test/fixture-helpers.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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']>) => {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/ar-SA.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const arSA: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'تكوين تسجيل الدخول الموحد (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'أنشاء منظمة',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/be-BY.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const beBY: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'Налада адзінага ўваходу (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Стварыць арганізацыю',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/bg-BG.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -179,6 +179,11 @@ export const bgBG: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'Конфигуриране на единен вход (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Създаване на организация',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/bn-IN.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const bnIN: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'একক সাইন-অন (SSO) কনফিগার করুন',
 },
 },
 createOrganization: {
 formButtonSubmit: 'সংগঠন তৈরি করুন',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/ca-ES.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/cs-CZ.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/da-DK.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/de-DE.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/el-GR.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const elGR: LocalizationResource = {
 viewPayment: 'Προβολή πληρωμής',
 year: 'έτος',
 },
 configureSSO: {
 navbar: {
 title: 'Διαμόρφωση Ενιαίας Σύνδεσης (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Δημιουργία οργανισμού',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/en-GB.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/en-US.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-CR.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-ES.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-MX.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-UY.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat(ui,clerk-js,shared): Add <experimental_ConfigureSSO />#8427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

LauraBeatris
merged 13 commits into

from

May 5, 2026
 Merged


feat(ui,clerk-js,shared): Add <experimental_ConfigureSSO />#8427
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
7d5f0c9

Add methods to manage enterprise connection


LauraBeatris Apr 29, 2026
9c6d43f

Add enterprise connection test run resource


LauraBeatris Apr 29, 2026
1a21387

Update `useUserEnterpriseConnections` to have mutation methods


LauraBeatris Apr 29, 2026
82b7019

Add basic infra for component across packages


LauraBeatris Apr 30, 2026
724470d

Render basic sidebar


LauraBeatris Apr 30, 2026
b0b6a2b

Update to `__experimental` prefix


LauraBeatris Apr 30, 2026
a748e70

Add changeset


LauraBeatris Apr 30, 2026
4cac250

Validate when self-serve SSO is enabled


LauraBeatris Apr 30, 2026
097b142

Add unit test for `self_serve_sso` setting on render


LauraBeatris Apr 30, 2026
c7dcbdd

Add metadata to sidebar


LauraBeatris May 4, 2026
abc67ce

Check if email addresses are enabled


LauraBeatris May 4, 2026
03cc600

Bump bundle limit


LauraBeatris May 4, 2026
30cfed4

Display box icon as fallback


LauraBeatris May 4, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


12 changes: 12 additions & 0 deletions
.changeset/thirty-candies-lick.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.

1 change: 1 addition & 0 deletions
packages/astro/src/astro-components/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';

11 changes: 11 additions & 0 deletions
packages/astro/src/astro-components/interactive/ConfigureSSO.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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'
/>

2 changes: 1 addition & 1 deletion
packages/astro/src/internal/mount-clerk-astro-js-components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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]) => {
Expand Down

2 changes: 1 addition & 1 deletion
packages/astro/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -120,4 +120,4 @@ export type InternalUIComponentId =
 | 'waitlist'
 | 'pricing-table'
 | 'api-keys'
 | 'oauth-consent';
 | 'configure-sso';

4 changes: 2 additions & 2 deletions
packages/clerk-js/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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" },
Expand Down

5 changes: 5 additions & 0 deletions
packages/clerk-js/sandbox/app.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -32,6 +32,7 @@ const AVAILABLE_COMPONENTS = [
 'waitlist',
 'pricingTable',
 'apiKeys',
 'configureSSO',
 'oauthConsent',
 'taskChooseOrganization',
 'taskResetPassword',
Expand DownExpand Up@@ -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'),
Expand DownExpand Up@@ -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 => ({
Expand Down

8 changes: 8 additions & 0 deletions
packages/clerk-js/sandbox/template.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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"
Expand Down

62 changes: 60 additions & 2 deletions
packages/clerk-js/src/core/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,10 @@ import {
import {
 disabledAllAPIKeysFeatures,
 disabledAllBillingFeatures,
 disabledEmailAddressAttribute,
 disabledOrganizationAPIKeysFeature,
 disabledOrganizationsFeature,
 disabledSelfServeSSOFeature,
 disabledUserAPIKeysFeature,
 isSignedInAndSingleSessionModeEnabled,
 noOrganizationExists,
Expand DownExpand Up@@ -53,6 +55,7 @@ import {
} from '@clerk/shared/telemetry';
import type {
 __experimental_CheckoutOptions,
 __experimental_ConfigureSSOProps,
 __internal_AttemptToEnableEnvironmentSettingParams,
 __internal_AttemptToEnableEnvironmentSettingResult,
 __internal_CheckoutProps,
Expand DownExpand Up@@ -95,7 +98,6 @@ import type {
 LoadedClerk,
 NavigateOptions,
 OAuthApplicationNamespace,
 OAuthConsentProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationResource,
Expand DownExpand Up@@ -208,6 +210,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,
Expand DownExpand Up@@ -1325,7 +1330,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, {
Expand DownExpand Up@@ -1426,6 +1431,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',
Expand Down

1 change: 1 addition & 0 deletions
packages/clerk-js/src/core/resources/UserSettings.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -105,6 +105,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
 };
 enterpriseSSO: EnterpriseSSOSettings = {
 enabled: false,
 self_serve_sso: false,
 };
 passkeySettings: PasskeySettingsData = {
 allow_autofill: false,
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/test/fixture-helpers.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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']>) => {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/ar-SA.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const arSA: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'تكوين تسجيل الدخول الموحد (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'أنشاء منظمة',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/be-BY.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const beBY: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'Налада адзінага ўваходу (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Стварыць арганізацыю',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/bg-BG.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -179,6 +179,11 @@ export const bgBG: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'Конфигуриране на единен вход (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Създаване на организация',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/bn-IN.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const bnIN: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'একক সাইন-অন (SSO) কনফিগার করুন',
 },
 },
 createOrganization: {
 formButtonSubmit: 'সংগঠন তৈরি করুন',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/ca-ES.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/cs-CZ.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/da-DK.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/de-DE.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/el-GR.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const elGR: LocalizationResource = {
 viewPayment: 'Προβολή πληρωμής',
 year: 'έτος',
 },
 configureSSO: {
 navbar: {
 title: 'Διαμόρφωση Ενιαίας Σύνδεσης (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Δημιουργία οργανισμού',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/en-GB.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/en-US.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-CR.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-ES.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-MX.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-UY.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(ui,clerk-js,shared): Add <experimental_ConfigureSSO />#8427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

LauraBeatris
merged 13 commits into

from

May 5, 2026
 Merged


feat(ui,clerk-js,shared): Add <experimental_ConfigureSSO />#8427
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
7d5f0c9

Add methods to manage enterprise connection


LauraBeatris Apr 29, 2026
9c6d43f

Add enterprise connection test run resource


LauraBeatris Apr 29, 2026
1a21387

Update `useUserEnterpriseConnections` to have mutation methods


LauraBeatris Apr 29, 2026
82b7019

Add basic infra for component across packages


LauraBeatris Apr 30, 2026
724470d

Render basic sidebar


LauraBeatris Apr 30, 2026
b0b6a2b

Update to `__experimental` prefix


LauraBeatris Apr 30, 2026
a748e70

Add changeset


LauraBeatris Apr 30, 2026
4cac250

Validate when self-serve SSO is enabled


LauraBeatris Apr 30, 2026
097b142

Add unit test for `self_serve_sso` setting on render


LauraBeatris Apr 30, 2026
c7dcbdd

Add metadata to sidebar


LauraBeatris May 4, 2026
abc67ce

Check if email addresses are enabled


LauraBeatris May 4, 2026
03cc600

Bump bundle limit


LauraBeatris May 4, 2026
30cfed4

Display box icon as fallback


LauraBeatris May 4, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


12 changes: 12 additions & 0 deletions
.changeset/thirty-candies-lick.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.

1 change: 1 addition & 0 deletions
packages/astro/src/astro-components/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';

11 changes: 11 additions & 0 deletions
packages/astro/src/astro-components/interactive/ConfigureSSO.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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'
/>

2 changes: 1 addition & 1 deletion
packages/astro/src/internal/mount-clerk-astro-js-components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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]) => {
Expand Down

2 changes: 1 addition & 1 deletion
packages/astro/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -120,4 +120,4 @@ export type InternalUIComponentId =
 | 'waitlist'
 | 'pricing-table'
 | 'api-keys'
 | 'oauth-consent';
 | 'configure-sso';

4 changes: 2 additions & 2 deletions
packages/clerk-js/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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" },
Expand Down

5 changes: 5 additions & 0 deletions
packages/clerk-js/sandbox/app.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -32,6 +32,7 @@ const AVAILABLE_COMPONENTS = [
 'waitlist',
 'pricingTable',
 'apiKeys',
 'configureSSO',
 'oauthConsent',
 'taskChooseOrganization',
 'taskResetPassword',
Expand DownExpand Up@@ -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'),
Expand DownExpand Up@@ -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 => ({
Expand Down

8 changes: 8 additions & 0 deletions
packages/clerk-js/sandbox/template.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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"
Expand Down

62 changes: 60 additions & 2 deletions
packages/clerk-js/src/core/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,10 @@ import {
import {
 disabledAllAPIKeysFeatures,
 disabledAllBillingFeatures,
 disabledEmailAddressAttribute,
 disabledOrganizationAPIKeysFeature,
 disabledOrganizationsFeature,
 disabledSelfServeSSOFeature,
 disabledUserAPIKeysFeature,
 isSignedInAndSingleSessionModeEnabled,
 noOrganizationExists,
Expand DownExpand Up@@ -53,6 +55,7 @@ import {
} from '@clerk/shared/telemetry';
import type {
 __experimental_CheckoutOptions,
 __experimental_ConfigureSSOProps,
 __internal_AttemptToEnableEnvironmentSettingParams,
 __internal_AttemptToEnableEnvironmentSettingResult,
 __internal_CheckoutProps,
Expand DownExpand Up@@ -95,7 +98,6 @@ import type {
 LoadedClerk,
 NavigateOptions,
 OAuthApplicationNamespace,
 OAuthConsentProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationResource,
Expand DownExpand Up@@ -208,6 +210,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,
Expand DownExpand Up@@ -1325,7 +1330,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, {
Expand DownExpand Up@@ -1426,6 +1431,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',
Expand Down

1 change: 1 addition & 0 deletions
packages/clerk-js/src/core/resources/UserSettings.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -105,6 +105,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
 };
 enterpriseSSO: EnterpriseSSOSettings = {
 enabled: false,
 self_serve_sso: false,
 };
 passkeySettings: PasskeySettingsData = {
 allow_autofill: false,
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/test/fixture-helpers.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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']>) => {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/ar-SA.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const arSA: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'تكوين تسجيل الدخول الموحد (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'أنشاء منظمة',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/be-BY.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const beBY: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'Налада адзінага ўваходу (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Стварыць арганізацыю',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/bg-BG.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -179,6 +179,11 @@ export const bgBG: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'Конфигуриране на единен вход (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Създаване на организация',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/bn-IN.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const bnIN: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'একক সাইন-অন (SSO) কনফিগার করুন',
 },
 },
 createOrganization: {
 formButtonSubmit: 'সংগঠন তৈরি করুন',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/ca-ES.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/cs-CZ.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/da-DK.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/de-DE.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/el-GR.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const elGR: LocalizationResource = {
 viewPayment: 'Προβολή πληρωμής',
 year: 'έτος',
 },
 configureSSO: {
 navbar: {
 title: 'Διαμόρφωση Ενιαίας Σύνδεσης (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Δημιουργία οργανισμού',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/en-GB.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/en-US.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-CR.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-ES.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-MX.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-UY.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(ui,clerk-js,shared): Add <experimental_ConfigureSSO />#8427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

LauraBeatris
merged 13 commits into

from

May 5, 2026
 Merged


feat(ui,clerk-js,shared): Add <experimental_ConfigureSSO />#8427
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
7d5f0c9

Add methods to manage enterprise connection


LauraBeatris Apr 29, 2026
9c6d43f

Add enterprise connection test run resource


LauraBeatris Apr 29, 2026
1a21387

Update `useUserEnterpriseConnections` to have mutation methods


LauraBeatris Apr 29, 2026
82b7019

Add basic infra for component across packages


LauraBeatris Apr 30, 2026
724470d

Render basic sidebar


LauraBeatris Apr 30, 2026
b0b6a2b

Update to `__experimental` prefix


LauraBeatris Apr 30, 2026
a748e70

Add changeset


LauraBeatris Apr 30, 2026
4cac250

Validate when self-serve SSO is enabled


LauraBeatris Apr 30, 2026
097b142

Add unit test for `self_serve_sso` setting on render


LauraBeatris Apr 30, 2026
c7dcbdd

Add metadata to sidebar


LauraBeatris May 4, 2026
abc67ce

Check if email addresses are enabled


LauraBeatris May 4, 2026
03cc600

Bump bundle limit


LauraBeatris May 4, 2026
30cfed4

Display box icon as fallback


LauraBeatris May 4, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


12 changes: 12 additions & 0 deletions
.changeset/thirty-candies-lick.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.

1 change: 1 addition & 0 deletions
packages/astro/src/astro-components/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';

11 changes: 11 additions & 0 deletions
packages/astro/src/astro-components/interactive/ConfigureSSO.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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'
/>

2 changes: 1 addition & 1 deletion
packages/astro/src/internal/mount-clerk-astro-js-components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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]) => {
Expand Down

2 changes: 1 addition & 1 deletion
packages/astro/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -120,4 +120,4 @@ export type InternalUIComponentId =
 | 'waitlist'
 | 'pricing-table'
 | 'api-keys'
 | 'oauth-consent';
 | 'configure-sso';

4 changes: 2 additions & 2 deletions
packages/clerk-js/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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" },
Expand Down

5 changes: 5 additions & 0 deletions
packages/clerk-js/sandbox/app.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -32,6 +32,7 @@ const AVAILABLE_COMPONENTS = [
 'waitlist',
 'pricingTable',
 'apiKeys',
 'configureSSO',
 'oauthConsent',
 'taskChooseOrganization',
 'taskResetPassword',
Expand DownExpand Up@@ -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'),
Expand DownExpand Up@@ -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 => ({
Expand Down

8 changes: 8 additions & 0 deletions
packages/clerk-js/sandbox/template.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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"
Expand Down

62 changes: 60 additions & 2 deletions
packages/clerk-js/src/core/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,10 @@ import {
import {
 disabledAllAPIKeysFeatures,
 disabledAllBillingFeatures,
 disabledEmailAddressAttribute,
 disabledOrganizationAPIKeysFeature,
 disabledOrganizationsFeature,
 disabledSelfServeSSOFeature,
 disabledUserAPIKeysFeature,
 isSignedInAndSingleSessionModeEnabled,
 noOrganizationExists,
Expand DownExpand Up@@ -53,6 +55,7 @@ import {
} from '@clerk/shared/telemetry';
import type {
 __experimental_CheckoutOptions,
 __experimental_ConfigureSSOProps,
 __internal_AttemptToEnableEnvironmentSettingParams,
 __internal_AttemptToEnableEnvironmentSettingResult,
 __internal_CheckoutProps,
Expand DownExpand Up@@ -95,7 +98,6 @@ import type {
 LoadedClerk,
 NavigateOptions,
 OAuthApplicationNamespace,
 OAuthConsentProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationResource,
Expand DownExpand Up@@ -208,6 +210,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,
Expand DownExpand Up@@ -1325,7 +1330,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, {
Expand DownExpand Up@@ -1426,6 +1431,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',
Expand Down

1 change: 1 addition & 0 deletions
packages/clerk-js/src/core/resources/UserSettings.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -105,6 +105,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
 };
 enterpriseSSO: EnterpriseSSOSettings = {
 enabled: false,
 self_serve_sso: false,
 };
 passkeySettings: PasskeySettingsData = {
 allow_autofill: false,
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/test/fixture-helpers.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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']>) => {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/ar-SA.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const arSA: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'تكوين تسجيل الدخول الموحد (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'أنشاء منظمة',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/be-BY.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const beBY: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'Налада адзінага ўваходу (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Стварыць арганізацыю',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/bg-BG.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -179,6 +179,11 @@ export const bgBG: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'Конфигуриране на единен вход (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Създаване на организация',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/bn-IN.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const bnIN: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'একক সাইন-অন (SSO) কনফিগার করুন',
 },
 },
 createOrganization: {
 formButtonSubmit: 'সংগঠন তৈরি করুন',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/ca-ES.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/cs-CZ.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/da-DK.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/de-DE.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/el-GR.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const elGR: LocalizationResource = {
 viewPayment: 'Προβολή πληρωμής',
 year: 'έτος',
 },
 configureSSO: {
 navbar: {
 title: 'Διαμόρφωση Ενιαίας Σύνδεσης (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Δημιουργία οργανισμού',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/en-GB.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/en-US.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-CR.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-ES.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-MX.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-UY.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat(ui,clerk-js,shared): Add <experimental_ConfigureSSO />#8427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

LauraBeatris
merged 13 commits into

from

May 5, 2026
 Merged


feat(ui,clerk-js,shared): Add <experimental_ConfigureSSO />#8427
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
7d5f0c9

Add methods to manage enterprise connection


LauraBeatris Apr 29, 2026
9c6d43f

Add enterprise connection test run resource


LauraBeatris Apr 29, 2026
1a21387

Update `useUserEnterpriseConnections` to have mutation methods


LauraBeatris Apr 29, 2026
82b7019

Add basic infra for component across packages


LauraBeatris Apr 30, 2026
724470d

Render basic sidebar


LauraBeatris Apr 30, 2026
b0b6a2b

Update to `__experimental` prefix


LauraBeatris Apr 30, 2026
a748e70

Add changeset


LauraBeatris Apr 30, 2026
4cac250

Validate when self-serve SSO is enabled


LauraBeatris Apr 30, 2026
097b142

Add unit test for `self_serve_sso` setting on render


LauraBeatris Apr 30, 2026
c7dcbdd

Add metadata to sidebar


LauraBeatris May 4, 2026
abc67ce

Check if email addresses are enabled


LauraBeatris May 4, 2026
03cc600

Bump bundle limit


LauraBeatris May 4, 2026
30cfed4

Display box icon as fallback


LauraBeatris May 4, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


12 changes: 12 additions & 0 deletions
.changeset/thirty-candies-lick.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.

1 change: 1 addition & 0 deletions
packages/astro/src/astro-components/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';

11 changes: 11 additions & 0 deletions
packages/astro/src/astro-components/interactive/ConfigureSSO.astro

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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'
/>

2 changes: 1 addition & 1 deletion
packages/astro/src/internal/mount-clerk-astro-js-components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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]) => {
Expand Down

2 changes: 1 addition & 1 deletion
packages/astro/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -120,4 +120,4 @@ export type InternalUIComponentId =
 | 'waitlist'
 | 'pricing-table'
 | 'api-keys'
 | 'oauth-consent';
 | 'configure-sso';

4 changes: 2 additions & 2 deletions
packages/clerk-js/bundlewatch.config.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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" },
Expand Down

5 changes: 5 additions & 0 deletions
packages/clerk-js/sandbox/app.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -32,6 +32,7 @@ const AVAILABLE_COMPONENTS = [
 'waitlist',
 'pricingTable',
 'apiKeys',
 'configureSSO',
 'oauthConsent',
 'taskChooseOrganization',
 'taskResetPassword',
Expand DownExpand Up@@ -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'),
Expand DownExpand Up@@ -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 => ({
Expand Down

8 changes: 8 additions & 0 deletions
packages/clerk-js/sandbox/template.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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"
Expand Down

62 changes: 60 additions & 2 deletions
packages/clerk-js/src/core/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,8 +13,10 @@ import {
import {
 disabledAllAPIKeysFeatures,
 disabledAllBillingFeatures,
 disabledEmailAddressAttribute,
 disabledOrganizationAPIKeysFeature,
 disabledOrganizationsFeature,
 disabledSelfServeSSOFeature,
 disabledUserAPIKeysFeature,
 isSignedInAndSingleSessionModeEnabled,
 noOrganizationExists,
Expand DownExpand Up@@ -53,6 +55,7 @@ import {
} from '@clerk/shared/telemetry';
import type {
 __experimental_CheckoutOptions,
 __experimental_ConfigureSSOProps,
 __internal_AttemptToEnableEnvironmentSettingParams,
 __internal_AttemptToEnableEnvironmentSettingResult,
 __internal_CheckoutProps,
Expand DownExpand Up@@ -95,7 +98,6 @@ import type {
 LoadedClerk,
 NavigateOptions,
 OAuthApplicationNamespace,
 OAuthConsentProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationResource,
Expand DownExpand Up@@ -208,6 +210,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,
Expand DownExpand Up@@ -1325,7 +1330,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, {
Expand DownExpand Up@@ -1426,6 +1431,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',
Expand Down

1 change: 1 addition & 0 deletions
packages/clerk-js/src/core/resources/UserSettings.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -105,6 +105,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
 };
 enterpriseSSO: EnterpriseSSOSettings = {
 enabled: false,
 self_serve_sso: false,
 };
 passkeySettings: PasskeySettingsData = {
 allow_autofill: false,
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/test/fixture-helpers.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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']>) => {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/ar-SA.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const arSA: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'تكوين تسجيل الدخول الموحد (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'أنشاء منظمة',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/be-BY.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const beBY: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'Налада адзінага ўваходу (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Стварыць арганізацыю',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/bg-BG.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -179,6 +179,11 @@ export const bgBG: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'Конфигуриране на единен вход (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Създаване на организация',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/bn-IN.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const bnIN: LocalizationResource = {
 viewPayment: undefined,
 year: undefined,
 },
 configureSSO: {
 navbar: {
 title: 'একক সাইন-অন (SSO) কনফিগার করুন',
 },
 },
 createOrganization: {
 formButtonSubmit: 'সংগঠন তৈরি করুন',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/ca-ES.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/cs-CZ.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/da-DK.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/de-DE.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/el-GR.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,6 +178,11 @@ export const elGR: LocalizationResource = {
 viewPayment: 'Προβολή πληρωμής',
 year: 'έτος',
 },
 configureSSO: {
 navbar: {
 title: 'Διαμόρφωση Ενιαίας Σύνδεσης (SSO)',
 },
 },
 createOrganization: {
 formButtonSubmit: 'Δημιουργία οργανισμού',
 invitePage: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/en-GB.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/en-US.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-CR.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-ES.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-MX.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down

5 changes: 5 additions & 0 deletions
packages/localizations/src/es-UY.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
Loading
Loading