feat(ui): <ConfigureSSO /> POC

.changeset/shaky-grapes-add.md

@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+'@clerk/ui': patch
+---
+
+`<__experimental_ConfigureSSO />` POC for internal testing, not meant for public release

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

@@ -43,7 +43,6 @@ import type {
   VerifyTOTPParams,
   Web3WalletResource,
 } from '@clerk/shared/types';
-import { deepCamelToSnake } from '@clerk/shared/underscore';
 
 import { convertPageToOffsetSearchParams } from '../../utils/convertPageToOffsetSearchParams';
 import { unixEpochToDate } from '../../utils/date';
@@ -551,25 +550,64 @@ export class User extends BaseResource implements UserResource {
  * Serializes `CreateMeEnterpriseConnectionParams` / `UpdateMeEnterpriseConnectionParams`
  * for the `/me/enterprise_connections` FAPI endpoints.
  *
- * Uses `deepCamelToSnake` but preserves `saml.attributeMapping` and `customAttributes` as-is. Their keys are
+ * The handler expects a flat form body where SAML and OIDC fields are
+ * prefixed (e.g. `saml_idp_metadata_url`, `oidc_client_id`) rather
+ * than nested under `saml`/`oidc` objects. `attribute_mapping` and
+ * `custom_attributes` stay as object values and are JSON-stringified
+ * by the form serializer downstream — their inner keys are
  * user-supplied data and must not be camel→snake transformed.
  */
 function toMeEnterpriseConnectionBody(
   params: CreateMeEnterpriseConnectionParams | UpdateMeEnterpriseConnectionParams,
 ): Record<string, unknown> {
-  const originalAttributeMapping =
-    params.saml && typeof params.saml === 'object' ? params.saml.attributeMapping : undefined;
-  const originalCustomAttributes = 'customAttributes' in params ? params.customAttributes : undefined;
-
-  const body = deepCamelToSnake(params) as Record<string, any>;
-
-  if (originalAttributeMapping !== undefined && body.saml && typeof body.saml === 'object') {
-    body.saml.attribute_mapping = originalAttributeMapping;
+  const body: Record<string, unknown> = {};
+
+  // Top-level fields. `provider` is only on Create, the rest are shared
+  setIfDefined(body, 'provider', (params as CreateMeEnterpriseConnectionParams).provider);
+  setIfDefined(body, 'name', params.name);
+  setIfDefined(body, 'organization_id', params.organizationId);
+  setIfDefined(body, 'active', (params as UpdateMeEnterpriseConnectionParams).active);
+  setIfDefined(body, 'sync_user_attributes', (params as UpdateMeEnterpriseConnectionParams).syncUserAttributes);
+  setIfDefined(
+    body,
+    'disable_additional_identifications',
+    (params as UpdateMeEnterpriseConnectionParams).disableAdditionalIdentifications,
+  );
+  setIfDefined(body, 'custom_attributes', (params as UpdateMeEnterpriseConnectionParams).customAttributes);
+
+  if (params.saml) {
+    setIfDefined(body, 'saml_idp_entity_id', params.saml.idpEntityId);
+    setIfDefined(body, 'saml_idp_sso_url', params.saml.idpSsoUrl);
+    setIfDefined(body, 'saml_idp_certificate', params.saml.idpCertificate);
+    setIfDefined(body, 'saml_idp_metadata_url', params.saml.idpMetadataUrl);
+    setIfDefined(body, 'saml_idp_metadata', params.saml.idpMetadata);
+    setIfDefined(body, 'saml_attribute_mapping', params.saml.attributeMapping);
+    setIfDefined(body, 'saml_allow_subdomains', params.saml.allowSubdomains);
+    setIfDefined(body, 'saml_allow_idp_initiated', params.saml.allowIdpInitiated);
+    setIfDefined(body, 'saml_force_authn', params.saml.forceAuthn);
   }
 
-  if (originalCustomAttributes !== undefined) {
-    body.custom_attributes = originalCustomAttributes;
+  if (params.oidc) {
+    setIfDefined(body, 'oidc_client_id', params.oidc.clientId);
+    setIfDefined(body, 'oidc_client_secret', params.oidc.clientSecret);
+    setIfDefined(body, 'oidc_discovery_url', params.oidc.discoveryUrl);
+    setIfDefined(body, 'oidc_auth_url', params.oidc.authUrl);
+    setIfDefined(body, 'oidc_token_url', params.oidc.tokenUrl);
+    setIfDefined(body, 'oidc_user_info_url', params.oidc.userInfoUrl);
+    setIfDefined(body, 'oidc_requires_pkce', params.oidc.requiresPkce);
   }
 
   return body;
 }
+
+/**
+ * Adds `value` under `key` only when the caller actually provided it.
+ * Mirrors the SDK's existing semantics: `undefined` means "don't send
+ * this field"; `null` is forwarded so users can explicitly clear a
+ * value via the form-encoded body
+ */
+function setIfDefined(target: Record<string, unknown>, key: string, value: unknown): void {
+  if (value !== undefined) {
+    target[key] = value;
+  }
+}

packages/clerk-js/src/core/resources/__tests__/User.test.ts

@@ -184,7 +184,7 @@ describe('User', () => {
         provider: 'saml_okta',
         name: 'New SSO',
         organization_id: 'org_1',
-        saml: { idp_entity_id: 'https://idp.example.com' },
+        saml_idp_entity_id: 'https://idp.example.com',
       },
     });
 
@@ -291,13 +291,11 @@ describe('User', () => {
       body: {
         provider: 'saml_okta',
         name: 'New SSO',
-        saml: {
-          idp_entity_id: 'https://idp.example.com',
-          attribute_mapping: {
-            emailAddress: 'mail',
-            firstName: 'givenName',
-            'custom:role': 'role',
-          },
+        saml_idp_entity_id: 'https://idp.example.com',
+        saml_attribute_mapping: {
+          emailAddress: 'mail',
+          firstName: 'givenName',
+          'custom:role': 'role',
         },
       },
     });
@@ -359,11 +357,9 @@ describe('User', () => {
           CustomValue: 'y',
           nestedCamelKey: { innerCamelKey: 'z' },
         },
-        saml: {
-          attribute_mapping: {
-            emailAddress: 'mail',
-            firstName: 'givenName',
-          },
+        saml_attribute_mapping: {
+          emailAddress: 'mail',
+          firstName: 'givenName',
         },
       },
     });

packages/localizations/src/en-US.ts

@@ -204,6 +204,26 @@ export const enUS: LocalizationResource = {
     navbar: {
       title: 'Configure Single Sign-On (SSO)',
     },
+    verifyEmailDomainStep: {
+      title: 'Verify email address',
+      subtitle: 'Verify the email address you want to enable the enterprise connection on.',
+      addEmailAddress: {
+        formTitle: 'We need your email',
+        formSubtitle: 'In order to start we will need your email address',
+        inputPlaceholder: 'name@company.com',
+        inputLabel: 'Email address',
+      },
+      emailCode: {
+        formTitle: 'Verify your email address',
+        formSubtitle: 'Enter the verification code sent to {{identifier}}',
+        resendButton: "Didn't receive a code? Resend",
+        verified: {
+          title: 'We got your email',
+          subtitle: "You've verified your email address with the following email",
+          inputLabel: 'Verified email address',
+        },
+      },
+    },
   },
   createOrganization: {
     formButtonSubmit: 'Create organization',

packages/shared/src/types/localization.ts

@@ -1296,6 +1296,26 @@ export type __internal_LocalizationResource = {
     navbar: {
       title: LocalizationValue;
     };
+    verifyEmailDomainStep: {
+      title: LocalizationValue;
+      subtitle: LocalizationValue;
+      addEmailAddress: {
+        formTitle: LocalizationValue;
+        formSubtitle: LocalizationValue;
+        inputPlaceholder: LocalizationValue;
+        inputLabel: LocalizationValue;
+      };
+      emailCode: {
+        formTitle: LocalizationValue;
+        formSubtitle: LocalizationValue<'identifier'>;
+        resendButton: LocalizationValue;
+        verified: {
+          title: LocalizationValue;
+          subtitle: LocalizationValue;
+          inputLabel: LocalizationValue;
+        };
+      };
+    };
   };
   apiKeys: {
     formTitle: LocalizationValue;