Add changeset

Author: LauraBeatris

.changeset/public-parts-chew.md

@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+'@clerk/ui': patch
+---
+
+Add support for custom SAML provider in `<ConfigureSSO />`

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

@@ -328,17 +328,18 @@ export const ConfigureAttributesSubStep = (): JSX.Element => {
   const { goNext, goPrev, isFirstStep, isLastStep } = useWizard();
 
   const { provider } = useConfigureSSO();
-  const { key } = useConfigureStepTranslations();
 
   return (
     <>
       <Step.Body>
         <Step.Section sx={theme => ({ gap: theme.space.$3 })}>
-          <Heading
-            as='h3'
-            textVariant='subtitle'
-            localizationKey={localizationKeys(key('configureAttributes.title'))}
-          />
+          {provider === 'saml_custom' && (
+            <Heading
+              as='h3'
+              textVariant='subtitle'
+              localizationKey={localizationKeys('configureSSO.configureStep.samlCustom.configureAttributes.title')}
+            />
+          )}
 
           <Table
             sx={theme => ({
@@ -758,7 +759,7 @@ export const SubmitSamlConfigSubStep = (): JSX.Element => {
         <Step.Footer.Continue
           onClick={handleContinue}
           isLoading={card.isLoading}
-          isDisabled={!canSubmit || !!card.error}
+          isDisabled={!canSubmit}
         />
       </Step.Footer>
     </>

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

@@ -51,6 +51,8 @@ export const SelectProviderStep = (): JSX.Element => {
       return;
     }
 
+    setProvider(selected);
+
     const primaryEmailAddress = user?.primaryEmailAddress;
     const hasVerifiedPrimaryEmailAddress = primaryEmailAddress?.verification.status === 'verified';
 
@@ -67,7 +69,6 @@ export const SelectProviderStep = (): JSX.Element => {
     }
 
     // Otherwise, set the provider and create the enterprise connection
-    setProvider(selected);
     await createEnterpriseConnection(selected);
     void goToStep('configure');
   };
@@ -155,7 +156,7 @@ export const SelectProviderStep = (): JSX.Element => {
           <Step.Footer.Continue
             onClick={handleContinue}
             isLoading={card.isLoading}
-            isDisabled={!selected || !!card.error}
+            isDisabled={!selected}
           />
         </Step.Footer>
       </Step>

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

@@ -353,7 +353,7 @@ export const EnterVerificationCodeStep = ({
         <Step.Footer.Continue
           onClick={() => goNext()}
           isLoading={otp.isLoading || card.isLoading}
-          isDisabled={!isVerified || !!card.error}
+          isDisabled={!isVerified}
         />
       </Step.Footer>
     </>