feat(ui): <ConfigureSSO /> POC

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;

packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx

@@ -12,7 +12,14 @@ import { BoxIcon } from '@/icons';
 import { Route, Switch } from '@/router';
 
 import { ConfigureSSOFlowProvider } from './ConfigureSSOContext';
-import { ConfigureCreateApp, ConfirmationStep, ProvideEmail, TestConfigurationStep, VerifyDomainStep } from './steps';
+import {
+  ConfigureCreateApp,
+  ConfirmationStep,
+  ProvideEmail,
+  SelectProviderStep,
+  TestConfigurationStep,
+  VerifyDomainStep,
+} from './steps';
 import { ConfigureSSOWizard } from './wizard';
 
 const ConfigureSSOInternal = () => {
@@ -34,8 +41,14 @@ const AuthenticatedContent = withCoreUserGuard(() => {
   const { parsedOptions } = useAppearance();
   const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl);
 
-  const { data: enterpriseConnections, isLoading: isLoadingEnterpriseConnections } =
-    __internal_useUserEnterpriseConnections({ enabled: true });
+  const {
+    data: enterpriseConnections,
+    isLoading: isLoadingEnterpriseConnections,
+    createEnterpriseConnection,
+    updateEnterpriseConnection,
+    deleteEnterpriseConnection,
+    revalidate: revalidateEnterpriseConnections,
+  } = __internal_useUserEnterpriseConnections({ enabled: true });
   // Currently FAPI only supports one enterprise connection per user
   const enterpriseConnection = enterpriseConnections?.[0];
 
@@ -116,6 +129,10 @@ const AuthenticatedContent = withCoreUserGuard(() => {
           <ConfigureSSOFlowProvider
             enterpriseConnection={enterpriseConnection}
             isLoading={isLoadingEnterpriseConnections}
+            createEnterpriseConnection={createEnterpriseConnection}
+            updateEnterpriseConnection={updateEnterpriseConnection}
+            deleteEnterpriseConnection={deleteEnterpriseConnection}
+            revalidate={revalidateEnterpriseConnections}
           >
             <ConfigureSSOSteps />
           </ConfigureSSOFlowProvider>
@@ -128,17 +145,24 @@ const AuthenticatedContent = withCoreUserGuard(() => {
 const ConfigureSSOSteps = () => {
   const { user } = useUser();
 
-  const primaryEmailAddress = user?.primaryEmailAddress;
+  const hasEmailAddress = Boolean(user?.emailAddresses?.length);
 
   return (
     <ConfigureSSOWizard>
+      <ConfigureSSOWizard.Step
+        id='select-provider'
+        path='select-provider'
+        label='Select provider'
+      >
+        <SelectProviderStep />
+      </ConfigureSSOWizard.Step>
       <ConfigureSSOWizard.Step
         id='verify-email-domain'
         path='verify-email-domain'
         label='Verify domain'
       >
         <ConfigureSSOWizard>
-          {!primaryEmailAddress && (
+          {!hasEmailAddress && (
             <ConfigureSSOWizard.Step
               id='provide-email'
               path='provide-email'
@@ -159,15 +183,7 @@ const ConfigureSSOSteps = () => {
         path='configure'
         label='Configure'
       >
-        <ConfigureSSOWizard>
-          {/* TODO: Implement configure steps */}
-          <ConfigureSSOWizard.Step
-            id='create-app'
-            path='create-app'
-          >
-            <ConfigureCreateApp />
-          </ConfigureSSOWizard.Step>
-        </ConfigureSSOWizard>
+        <ConfigureCreateApp />
       </ConfigureSSOWizard.Step>
       <ConfigureSSOWizard.Step
         id='test'

packages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsx

@@ -1,6 +1,19 @@
-import type { EnterpriseConnectionResource } from '@clerk/shared/types';
+import type {
+  CreateMeEnterpriseConnectionParams,
+  DeletedObjectResource,
+  EnterpriseConnectionResource,
+  MeEnterpriseConnectionProvider,
+  UpdateMeEnterpriseConnectionParams,
+} from '@clerk/shared/types';
 import React, { type PropsWithChildren } from 'react';
 
+/**
+ * Identity providers exposed in the wizard. Only `saml_okta` is wired
+ * end-to-end for the PoC; the rest are intentionally inert and
+ * surfaced as disabled options
+ */
+export type ConfigureSSOSupportedProvider = MeEnterpriseConnectionProvider;
+
 /**
  * Shared form state for the ConfigureSSO wizard, persisted across steps
  */
@@ -9,6 +22,11 @@ export interface ConfigureSSOData {
    * The enterprise connection from the user's primary email address domain
    */
   enterpriseConnection: EnterpriseConnectionResource | undefined;
+  /**
+   * The provider the user picked on the first step. Drives the
+   * `provider` field sent to the FAPI Create endpoint
+   */
+  selectedProvider: ConfigureSSOSupportedProvider | undefined;
 }
 
 export interface ConfigureSSOContextValue extends ConfigureSSOData {
@@ -17,11 +35,30 @@ export interface ConfigureSSOContextValue extends ConfigureSSOData {
    * connection
    */
   isLoading: boolean;
+  setSelectedProvider: (provider: ConfigureSSOSupportedProvider | undefined) => void;
+  createEnterpriseConnection: (
+    params: CreateMeEnterpriseConnectionParams,
+  ) => Promise<EnterpriseConnectionResource | undefined>;
+  updateEnterpriseConnection: (
+    enterpriseConnectionId: string,
+    params: UpdateMeEnterpriseConnectionParams,
+  ) => Promise<EnterpriseConnectionResource | undefined>;
+  deleteEnterpriseConnection: (enterpriseConnectionId: string) => Promise<DeletedObjectResource | undefined>;
+  revalidate: () => Promise<void>;
 }
 
 interface ConfigureSSOFlowProviderProps {
   enterpriseConnection: EnterpriseConnectionResource | undefined;
   isLoading: boolean;
+  createEnterpriseConnection: (
+    params: CreateMeEnterpriseConnectionParams,
+  ) => Promise<EnterpriseConnectionResource | undefined>;
+  updateEnterpriseConnection: (
+    enterpriseConnectionId: string,
+    params: UpdateMeEnterpriseConnectionParams,
+  ) => Promise<EnterpriseConnectionResource | undefined>;
+  deleteEnterpriseConnection: (enterpriseConnectionId: string) => Promise<DeletedObjectResource | undefined>;
+  revalidate: () => Promise<void>;
 }
 
 const ConfigureSSOFlowContext = React.createContext<ConfigureSSOContextValue | null>(null);
@@ -30,14 +67,45 @@ ConfigureSSOFlowContext.displayName = 'ConfigureSSOFlowContext';
 export const ConfigureSSOFlowProvider = ({
   enterpriseConnection,
   isLoading,
+  createEnterpriseConnection,
+  updateEnterpriseConnection,
+  deleteEnterpriseConnection,
+  revalidate,
   children,
 }: PropsWithChildren<ConfigureSSOFlowProviderProps>): JSX.Element => {
+  const [selectedProvider, setSelectedProvider] = React.useState<ConfigureSSOSupportedProvider | undefined>(
+    enterpriseConnection?.provider as ConfigureSSOSupportedProvider | undefined,
+  );
+
+  // Adopt the provider of the existing connection once it's fetched, so
+  // the user lands on the configure step pre-populated when they
+  // re-enter the wizard
+  React.useEffect(() => {
+    if (enterpriseConnection?.provider && !selectedProvider) {
+      setSelectedProvider(enterpriseConnection.provider as ConfigureSSOSupportedProvider);
+    }
+  }, [enterpriseConnection?.provider, selectedProvider]);
+
   const value = React.useMemo<ConfigureSSOContextValue>(
     () => ({
       enterpriseConnection,
       isLoading,
+      selectedProvider,
+      setSelectedProvider,
+      createEnterpriseConnection,
+      updateEnterpriseConnection,
+      deleteEnterpriseConnection,
+      revalidate,
     }),
-    [enterpriseConnection, isLoading],
+    [
+      enterpriseConnection,
+      isLoading,
+      selectedProvider,
+      createEnterpriseConnection,
+      updateEnterpriseConnection,
+      deleteEnterpriseConnection,
+      revalidate,
+    ],
   );
 
   return <ConfigureSSOFlowContext.Provider value={value}>{children}</ConfigureSSOFlowContext.Provider>;