Add Custom Authentication Edit Page #7363

Shenali-SJ · 2025-01-22T19:38:05Z

Purpose

This PR updates the edit page of the custom authentication feature. This also adds API integrations.

Note: This is needs to be updated once #7336 is merged this PR depends on the content of the above.

Related Issues

Improve UI to incorporate authentication flow with the external authentication service product-is#20893

Related PRs (To be merged before)

Checklist

e2e cypress tests locally verified. (for internal contributers)
Manual test round performed and verified.
UX/UI review done on the final implementation.
Documentation provided. (Add links if there are any)
Relevant backend changes deployed and verified
Unit tests provided. (Add links if there are any)
Integration tests provided. (Add links if there are any)

Security checks

Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines
Ran FindSecurityBugs plugin and verified report
Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets

codecov · 2025-01-22T19:48:58Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 36.32%. Comparing base (be52c89) to head (4ae97b3).
Report is 75 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #7363   +/-   ##
=======================================
  Coverage   36.32%   36.32%           
=======================================
  Files          42       42           
  Lines         903      903           
  Branches      205      205           
=======================================
  Hits          328      328           
  Misses        575      575

Flag	Coverage Δ
@wso2is/core	`36.32% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

see 2 files with indirect coverage changes

features/admin.connections.v1/components/create/authenticator-create-wizard-factory.tsx

pavinduLakshan · 2025-01-23T08:27:29Z

features/admin.connections.v1/components/create/authenticator-create-wizard-factory.tsx

@@ -106,6 +108,9 @@ export const AuthenticatorCreateWizardFactory: FC<AuthenticatorCreateWizardFacto
        ...rest
    } = props;

+    const customAuthFeatureConfig: FeatureAccessConfigInterface = useSelector((state: AppState) =>


Suggested change

const customAuthFeatureConfig: FeatureAccessConfigInterface = useSelector((state: AppState) =>

const identityProviderFeatureConfig: FeatureAccessConfigInterface = useSelector((state: AppState) =>

pavinduLakshan · 2025-01-23T08:33:17Z

features/admin.connections.v1/components/create/authenticator-create-wizard-factory.tsx

@@ -330,6 +337,27 @@ export const AuthenticatorCreateWizardFactory: FC<AuthenticatorCreateWizardFacto
                    />
                );

+            case CommonAuthenticatorConstants.CONNECTION_TEMPLATE_IDS.CUSTOM_AUTHENTICATION:
+                if (isFeatureEnabled(customAuthFeatureConfig, "identityProviders.customAuthentication")) {


Let's define the identityProviders.customAuthentication as a feature identifier in /constants and refer it here.

This is done to organize the feature identifiers for each feature in a central location.

Eg:

Suggested change

if (isFeatureEnabled(customAuthFeatureConfig, "identityProviders.customAuthentication")) {

if (isFeatureEnabled(

customAuthFeatureConfig, ConnectionUIConstants.FEATURE_DICTIONARY.CUSTOM_AUTHENTICATION)) {

Ref. definition of feature dictionary object: https://github.com/wso2/identity-apps/blob/master/features/admin.groups.v1/constants/group-constants.ts#L40

features/admin.connections.v1/components/create/custom-authentication-create-wizard.scss

features/admin.connections.v1/components/create/custom-authentication-create-wizard.tsx

pavinduLakshan · 2025-01-23T08:45:44Z

features/admin.connections.v1/components/edit/forms/custom-auth-general-details-form.tsx

+                            );
+                        }
+
+


Suggested change

pavinduLakshan · 2025-01-23T08:46:19Z

features/admin.connections.v1/components/edit/forms/custom-auth-general-details-form.tsx

+                        data-componentid={ `${ _componentId }-idp-image` }
+                        maxLength={
+                                ConnectionUIConstants
+                                    .GENERAL_FORM_CONSTRAINTS.IMAGE_URL_MAX_LENGTH as number


Do we need casting here?

We have followed the same approach used in other components in the connections page.

It appears that the GENERAL_FORM_CONSTRAINTS record's value could be a union of string or number and here we are explicitly type casting it to string. But this seems like an additional overhead since we using typescript.

pavinduLakshan · 2025-01-23T08:46:31Z

features/admin.connections.v1/components/edit/forms/custom-auth-general-details-form.tsx

+                                ConnectionUIConstants
+                                    .GENERAL_FORM_CONSTRAINTS.IMAGE_URL_MIN_LENGTH as number
+                        }
+                        hint="Logo to display in login pages."


Let's use i18n for string literals

pavinduLakshan · 2025-01-23T08:47:18Z

features/admin.connections.v1/components/edit/forms/custom-auth-general-details-form.tsx

+                        data-componentid={ `${ _componentId }-idp-description` }
+                        maxLength={ ConnectionUIConstants.IDP_NAME_LENGTH.max }
+                        minLength={ ConnectionUIConstants.IDP_NAME_LENGTH.min }
+                        hint="A text description of the authenticator."


Let's use i18n for string literals. Also let's get the UI text reviewed from doc team.

Suggested change

hint="A text description of the authenticator."

hint="A brief description of the authenticator."

wso2-jenkins-bot · 2025-01-24T07:35:26Z

🦋 Changeset detected

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Add external auth API integration and edit page content

3697192

Shenali-SJ changed the title ~~Update Custom Authentication Edit Page~~ Add Custom Authentication Edit Page Jan 22, 2025

Shenali-SJ added 2 commits January 23, 2025 01:28

Update external auth endpoint configs

7a18cd3

Add custom local auth create API

4ae97b3

Thisara-Welmilla reviewed Jan 23, 2025

View reviewed changes

features/admin.connections.v1/components/create/authenticator-create-wizard-factory.tsx Outdated Show resolved Hide resolved

pavinduLakshan reviewed Jan 23, 2025

View reviewed changes

Shenali-SJ added 7 commits January 24, 2025 12:03

Improve custom authentication create wizard validations

8d86cd2

Improve identifier help UX

f426610

Add changeset

897424e

Merge upstream

bf649cb

Merge origin branch for validation changes

e1563db

Address comments

4b41cab

Merge Shenali-SJ:custom-auth-create-wizard-update

a3a9d06

Temp commit

36d613e

Shenali-SJ marked this pull request as draft January 24, 2025 23:58

Temp comment

3fedea5

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Custom Authentication Edit Page #7363

Add Custom Authentication Edit Page #7363

Shenali-SJ commented Jan 22, 2025

codecov bot commented Jan 22, 2025 •

edited

Loading

pavinduLakshan Jan 23, 2025

pavinduLakshan Jan 23, 2025

pavinduLakshan Jan 23, 2025

pavinduLakshan Jan 23, 2025

Shenali-SJ Jan 24, 2025

pavinduLakshan Jan 23, 2025

Shenali-SJ Jan 24, 2025

pavinduLakshan Jan 23, 2025

Shenali-SJ Jan 24, 2025

wso2-jenkins-bot commented Jan 24, 2025

	const customAuthFeatureConfig: FeatureAccessConfigInterface = useSelector((state: AppState) =>
	const identityProviderFeatureConfig: FeatureAccessConfigInterface = useSelector((state: AppState) =>

	if (isFeatureEnabled(customAuthFeatureConfig, "identityProviders.customAuthentication")) {
	if (isFeatureEnabled(
	customAuthFeatureConfig, ConnectionUIConstants.FEATURE_DICTIONARY.CUSTOM_AUTHENTICATION)) {

	hint="A text description of the authenticator."
	hint="A brief description of the authenticator."

Add Custom Authentication Edit Page #7363

Are you sure you want to change the base?

Add Custom Authentication Edit Page #7363

Conversation

Shenali-SJ commented Jan 22, 2025

Purpose

Related Issues

Related PRs (To be merged before)

Checklist

Security checks

codecov bot commented Jan 22, 2025 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wso2-jenkins-bot commented Jan 24, 2025

🦋 Changeset detected

codecov bot commented Jan 22, 2025 •

edited

Loading