refactor(ui): consolidate ConfigureSSO flow state and provider groups

Move ProviderType and WizardStepId into a shared types module and lift initialStepId derivation into the flow context so consumers read a single value instead of recomputing it. Replace the flat PROVIDER_OPTIONS list with grouped PROVIDER_GROUPS to support multiple provider categories, switch connection creation to __internal_useUserEnterpriseConnections, and drop the unused clearProvider/goPrev affordances on the Select Provider step.

Author: iagodahlem

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

@@ -14,7 +14,6 @@ import { ConfigureSSOFlowProvider, useConfigureSSOFlow } from './ConfigureSSOCon
 import { ConfigureSSOHeader } from './ConfigureSSOHeader';
 import { ConfigureSSONavbar } from './ConfigureSSONavbar';
 import { ConfigureSSOSkeleton } from './ConfigureSSOSkeleton';
-import { deriveInitialStep } from './deriveInitialStep';
 import { ProfileCardFooter, ProfileCardHeader } from './elements/ProfileCard';
 import { Step } from './elements/Step';
 import { Wizard } from './elements/Wizard';
@@ -85,8 +84,7 @@ const ConfigureSSOCardContent = () => {
 };
 
 const ConfigureSSOSteps = () => {
-  const { enterpriseConnection } = useConfigureSSOFlow();
-  const initialStepId = deriveInitialStep(enterpriseConnection);
+  const { initialStepId } = useConfigureSSOFlow();
 
   return (
     <Wizard initialStepId={initialStepId}>

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

@@ -1,13 +1,15 @@
-import { useReverification, useSession, useUser } from '@clerk/shared/react';
+import { __internal_useUserEnterpriseConnections, useSession, useUser } from '@clerk/shared/react';
 import type { EnterpriseConnectionResource } from '@clerk/shared/types';
 import React, { type PropsWithChildren } from 'react';
 
-export type ProviderType = 'saml_okta' | 'saml_custom';
+import { deriveInitialStep } from './deriveInitialStep';
+import type { ProviderType, WizardStepId } from './types';
 
 /**
  * Shared form state for the ConfigureSSO wizard, persisted across steps
  */
 export interface ConfigureSSOData {
+  initialStepId: WizardStepId;
   /**
    * The enterprise connection from the user's primary email address domain
    */
@@ -27,11 +29,6 @@ export interface ConfigureSSOData {
    * connection has been created.
    */
   setProvider: (provider: ProviderType) => void;
-  /**
-   * Clears the local provider selection. Used by Reset on the Confirmation
-   * step (wired up by a follow-up PR).
-   */
-  clearProvider: () => void;
   /**
    * Creates the enterprise connection from the current provider selection,
    * the user's primary email domain, and the session's active organization.
@@ -56,11 +53,15 @@ export const ConfigureSSOFlowProvider = ({
 }: PropsWithChildren<ConfigureSSOFlowProviderProps>): JSX.Element => {
   const { user } = useUser();
   const { session } = useSession();
-  const [localProvider, setLocalProvider] = React.useState<ProviderType | undefined>(undefined);
+  const [provider, setProvider] = React.useState<ProviderType | undefined>(
+    enterpriseConnection?.provider as ProviderType,
+  );
+
+  const { createEnterpriseConnection } = __internal_useUserEnterpriseConnections();
 
-  const provider = (enterpriseConnection?.provider as ProviderType | undefined) ?? localProvider;
+  const initialStepId = deriveInitialStep(enterpriseConnection);
 
-  const createConnectionFetcher = React.useCallback(async () => {
+  const createConnection = React.useCallback(async () => {
     if (enterpriseConnection) {
       return;
     }
@@ -74,33 +75,23 @@ export const ConfigureSSOFlowProvider = ({
     const emailDomain = user.primaryEmailAddress.emailAddress.split('@')[1];
     const organizationId = session?.lastActiveOrganizationId ?? null;
 
-    await user.createEnterpriseConnection({
-      provider,
+    await createEnterpriseConnection({
+      provider: 'saml_okta',
       name: emailDomain,
       organizationId,
     });
-  }, [enterpriseConnection, provider, user, session]);
-
-  const createConnection = useReverification(createConnectionFetcher);
-
-  const setProvider = React.useCallback((next: ProviderType) => {
-    setLocalProvider(next);
-  }, []);
-
-  const clearProvider = React.useCallback(() => {
-    setLocalProvider(undefined);
-  }, []);
+  }, [enterpriseConnection, provider, user, session, createEnterpriseConnection]);
 
   const value = React.useMemo<ConfigureSSOData>(
     () => ({
+      initialStepId,
       enterpriseConnection,
       isLoading,
       provider,
       setProvider,
-      clearProvider,
       createConnection,
     }),
-    [enterpriseConnection, isLoading, provider, setProvider, clearProvider, createConnection],
+    [initialStepId, enterpriseConnection, isLoading, provider, setProvider, createConnection],
   );
 
   return <ConfigureSSOFlowContext.Provider value={value}>{children}</ConfigureSSOFlowContext.Provider>;

packages/ui/src/components/ConfigureSSO/deriveInitialStep.ts

@@ -1,6 +1,6 @@
 import type { EnterpriseConnectionResource } from '@clerk/shared/types';
 
-export type WizardStepId = 'select-provider' | 'verify-domain' | 'configure' | 'test' | 'confirmation';
+import type { WizardStepId } from './types';
 
 /**
  * Decides where the ConfigureSSO wizard should mount on (re)load based on

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

@@ -17,23 +17,34 @@ import { useCardState } from '@/elements/contexts';
 import { Alert } from '@/ui/elements/Alert';
 import { handleError } from '@/utils/errorHandler';
 
-import { type ProviderType, useConfigureSSOFlow } from '../ConfigureSSOContext';
+import { useConfigureSSOFlow } from '../ConfigureSSOContext';
 import { Step } from '../elements/Step';
 import { useWizard } from '../elements/Wizard';
+import type { ProviderType } from '../types';
 
-const PROVIDER_OPTIONS: ReadonlyArray<{ id: ProviderType; label: LocalizationKey; iconId: string }> = [
-  { id: 'saml_okta', label: localizationKeys('configureSSO.selectProviderStep.saml.okta'), iconId: 'okta' },
+const PROVIDER_GROUPS: ReadonlyArray<{
+  id: 'saml';
+  label: LocalizationKey;
+  options: ReadonlyArray<{ id: ProviderType; label: LocalizationKey; iconId: string }>;
+}> = [
   {
-    id: 'saml_custom',
-    label: localizationKeys('configureSSO.selectProviderStep.saml.customSaml'),
-    iconId: 'saml',
+    id: 'saml',
+    label: localizationKeys('configureSSO.selectProviderStep.saml.groupLabel'),
+    options: [
+      { id: 'saml_okta', label: localizationKeys('configureSSO.selectProviderStep.saml.okta'), iconId: 'okta' },
+      {
+        id: 'saml_custom',
+        label: localizationKeys('configureSSO.selectProviderStep.saml.customSaml'),
+        iconId: 'saml',
+      },
+    ],
   },
 ];
 
 export const SelectProviderStep = (): JSX.Element => {
-  const { goNext, goPrev, isFirstStep, isLastStep } = useWizard();
-  const { setProvider, createConnection } = useConfigureSSOFlow();
   const card = useCardState();
+  const { goNext, isLastStep } = useWizard();
+  const { setProvider, createConnection } = useConfigureSSOFlow();
   const [selected, setSelected] = React.useState<ProviderType | null>(null);
 
   const handleContinue = async () => {
@@ -84,29 +95,34 @@ export const SelectProviderStep = (): JSX.Element => {
               />
             </Col>
 
-            <Col sx={theme => ({ gap: theme.space.$3 })}>
-              <Text
-                as='label'
-                variant='subtitle'
-                sx={theme => ({ color: theme.colors.$colorForeground })}
-                localizationKey={localizationKeys('configureSSO.selectProviderStep.saml.groupLabel')}
-              />
-
-              <Grid
-                gap={3}
-                columns={2}
+            {PROVIDER_GROUPS.map(group => (
+              <Col
+                key={group.id}
+                sx={theme => ({ gap: theme.space.$3 })}
               >
-                {PROVIDER_OPTIONS.map(option => (
-                  <ProviderCard
-                    key={option.id}
-                    iconId={option.iconId}
-                    label={option.label}
-                    isSelected={selected === option.id}
-                    onClick={() => setSelected(option.id)}
-                  />
-                ))}
-              </Grid>
-            </Col>
+                <Text
+                  as='label'
+                  variant='subtitle'
+                  sx={theme => ({ color: theme.colors.$colorForeground })}
+                  localizationKey={group.label}
+                />
+
+                <Grid
+                  gap={3}
+                  columns={2}
+                >
+                  {group.options.map(option => (
+                    <ProviderCard
+                      key={option.id}
+                      iconId={option.iconId}
+                      label={option.label}
+                      isSelected={selected === option.id}
+                      onClick={() => setSelected(option.id)}
+                    />
+                  ))}
+                </Grid>
+              </Col>
+            ))}
 
             <Alert
               variant='warning'
@@ -126,10 +142,8 @@ export const SelectProviderStep = (): JSX.Element => {
         </Step.Body>
 
         <Step.Footer>
-          <Step.Footer.Previous
-            onClick={() => goPrev()}
-            isDisabled={isFirstStep}
-          />
+          <Step.Footer.Previous isDisabled />
+
           <Step.Footer.Continue
             onClick={handleContinue}
             isLoading={card.isLoading}

packages/ui/src/components/ConfigureSSO/types.ts

@@ -0,0 +1,3 @@
+export type ProviderType = 'saml_okta' | 'saml_custom';
+
+export type WizardStepId = 'select-provider' | 'verify-domain' | 'configure' | 'test' | 'confirmation';