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}
/>
);
};