diff --git a/.changeset/fancy-zoos-mate.md b/.changeset/fancy-zoos-mate.md new file mode 100644 index 00000000000..f3744bca5ac --- /dev/null +++ b/.changeset/fancy-zoos-mate.md @@ -0,0 +1,8 @@ +--- +'@clerk/localizations': patch +'@clerk/clerk-js': patch +'@clerk/shared': patch +'@clerk/ui': patch +--- + +Fix attribute statement section in `` with claim name for Custom SAML provider diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts index 2435fe52c8a..a9a83381088 100644 --- a/packages/localizations/src/en-US.ts +++ b/packages/localizations/src/en-US.ts @@ -358,6 +358,7 @@ export const enUS: LocalizationResource = { columns: { attribute: 'Attribute', claimName: 'Claim Name', + claimValue: 'Claim Value', }, badges: { required: 'Required', @@ -366,15 +367,15 @@ export const enUS: LocalizationResource = { rows: { email: { attribute: 'Email address', - claim: 'user.email', + claim: 'mail', }, firstName: { attribute: 'First Name', - claim: 'user.firstName', + claim: 'firstName', }, lastName: { attribute: 'Last Name', - claim: 'user.lastName', + claim: 'lastName', }, }, }, diff --git a/packages/shared/src/types/localization.ts b/packages/shared/src/types/localization.ts index 6c0352c4a68..db7df988428 100644 --- a/packages/shared/src/types/localization.ts +++ b/packages/shared/src/types/localization.ts @@ -1415,6 +1415,7 @@ export type __internal_LocalizationResource = { columns: { attribute: LocalizationValue; claimName: LocalizationValue; + claimValue: LocalizationValue; }; badges: { required: LocalizationValue; diff --git a/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsx b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsx index d5c126febec..8ef453f7369 100644 --- a/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsx +++ b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsx @@ -113,18 +113,25 @@ const ATTRIBUTE_ROWS = [ isRequired: true, attribute: localizationKeys('configureSSO.configureStep.attributeMapping.rows.email.attribute'), claim: localizationKeys('configureSSO.configureStep.attributeMapping.rows.email.claim'), + oktaClaimValue: localizationKeys('configureSSO.configureStep.samlOkta.configureAttributes.pairs.email.expression'), }, { id: 'firstName', isRequired: false, attribute: localizationKeys('configureSSO.configureStep.attributeMapping.rows.firstName.attribute'), claim: localizationKeys('configureSSO.configureStep.attributeMapping.rows.firstName.claim'), + oktaClaimValue: localizationKeys( + 'configureSSO.configureStep.samlOkta.configureAttributes.pairs.firstName.expression', + ), }, { id: 'lastName', isRequired: false, attribute: localizationKeys('configureSSO.configureStep.attributeMapping.rows.lastName.attribute'), claim: localizationKeys('configureSSO.configureStep.attributeMapping.rows.lastName.claim'), + oktaClaimValue: localizationKeys( + 'configureSSO.configureStep.samlOkta.configureAttributes.pairs.lastName.expression', + ), }, ] as const; @@ -328,6 +335,7 @@ export const ConfigureAttributesSubStep = (): JSX.Element => { const { goNext, goPrev, isFirstStep, isLastStep } = useWizard(); const { provider } = useConfigureSSO(); + const isOkta = provider === 'saml_okta'; return ( <> @@ -363,6 +371,17 @@ export const ConfigureAttributesSubStep = (): JSX.Element => { localizationKey={localizationKeys('configureSSO.configureStep.attributeMapping.columns.claimName')} /> + + {isOkta && ( + + ({ fontSize: theme.fontSizes.$xs })} + localizationKey={localizationKeys( + 'configureSSO.configureStep.attributeMapping.columns.claimValue', + )} + /> + + )} @@ -398,12 +417,22 @@ export const ConfigureAttributesSubStep = (): JSX.Element => { localizationKey={row.claim} /> + + {isOkta && ( + + + + )} ))} - {provider === 'saml_okta' && } + {isOkta && } diff --git a/packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx b/packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx index 7b9f115355d..6e4aa5f38b2 100644 --- a/packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx +++ b/packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx @@ -196,7 +196,6 @@ export const TestConfigurationStep = (): JSX.Element => { goPrev()} /> void goNext()} /> @@ -207,13 +206,11 @@ export const TestConfigurationStep = (): JSX.Element => { type ContinueTestSsoStepButtonProps = { enterpriseConnectionId: string | undefined; - isConnectionActive: boolean | undefined; onContinue: () => void; }; const ContinueTestSsoStepButton = ({ enterpriseConnectionId, - isConnectionActive, onContinue, }: ContinueTestSsoStepButtonProps): JSX.Element => { const { user } = useUser(); @@ -252,7 +249,6 @@ const ContinueTestSsoStepButton = ({ void handleContinue()} isLoading={isValidating} - isDisabled={!enterpriseConnectionId || isConnectionActive} /> ); };