Email address as the username for self-registration

Extending the UX in WSO2 APIM-3.2.0

Saranki Magenthirarajah
6 min readOct 17, 2021
[Source: https://i.pinimg.com/originals/3a/c8/b9/3ac8b9e55513d08832e74171323f539f.jpg]

Where there’s a will there’s a way!

The modern era has solution for almost all the problems we face in our day-to-day life in the form of applications/systems. Over the years the expectations of such applications have grown rapidly that they are expected not only to provide or feed information but also to lay out a great user experience (UX). Every application provides services to its users, but the ones that understands its consumers’ pulse and provide great UX stands out in the market as UX plays a huge role in technological world these days.

One such important aspect in providing better user experience is the “user self-registration process”. Even though this sounds very simple, the first impression about an application is driven through the login or self-registration page.

Remember, first impression is the best impression!!!

[Source: https://neeshdental.files.wordpress.com/2016/02/first-impressions.png?w=640]

Lights on WSO2 APIM 3.2.0

Use case

Many of the applications these days have made the registration/login process way easier for its users. The users can use their social logins or create a new account with any username they prefer. One of the common requirements in creating a new user account is to use the email address as the username. This is mainly because, when we create an email account, our email address will be verified to be unique. Also, it would be easy to remember the email address rather than remembering hundreds of the username with similar formats.

Does WSO2 APIM 3.2.0 handle the requirement on accepting the email address as the username during the self-registration and login process in the devportal?

A big YES to that!
As the devportal is available for the endusers to view the published APIs and subscribe them, creating user accounts and logging into the devportal becomes a mandate step. Therefore, the WSO2 APIM-3.2.0 allows the users to perform self-registration and logins using the email address as the username as an out-of-the-box solution.

Let’s do it

[Source: https://media2.giphy.com/media/BpGWitbFZflfSUYuZ9/giphy.gif]

This part of the blog will walk you through the steps on how to configure the product to use email address during the self-registration and login process in wso2am-3.2.0 devportal.

Steps

  1. We need to change the default username pattern to an email format with the aid of the following configuration in <APIM-Home>/repository/conf/deployment.toml file.
[tenant_mgt]
enable_email_domain= true
[user_store]
type = "database_unique_id"
username_java_script_regex = '^[a-zA-Z0-9.-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$'
username_java_regex = '^[a-zA-Z0-9.-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}'

2. Restart the server

3. Login into the carbon management console

4. Navigate to Main → Identity → Claims → List → Click on http://wso2.org/claims → Click on Username’s Edit button

5. Add the following configurations in order to map the email attribute to be used as the username during the self registration process.

Fig 1: Map the email attribute as the username

6. Click on update

7. If you don’t want to display the default email address in the self-registation form you can remove it by navigating to Main → Identity → Claims → List → Click on http://wso2.org/claims → Click on Email’s Edit button and add the configurations as shown below. (optional step)

Fig 2: Display/remove the default email address

8. Click on update

9. Navigate to devportal

10. Click on “Create Account”

Fig 3: Devportal login page

11. Provide the email address as username and click on “Proceed to Self Register”. Please note that the value provided as the username in this UI is the username claim.

Fig 4: Self-registration in devportal

12. Provide the mandatory fields in the “Create New Account” UI as shown below. Please note that the username(email address) you have provided in this UI should be the same as the username claim you have provided in step (11).

Fig 5: Self-registration form in devportal

13. Click on the “Register” button.

14. You will be able to see a success message box as shown below.

Fig 6: Successfully created the user account

15. Now try to log into the devportal with the newly created user’s email address and password.

Fig 7: Devportal login page with email address and password

16. Click on the “Continue” button

17. Now you have successfully logged in to the devportal and you can see the username to be displayed as the email address.

Fig 8: Successfully logged into the devportal with email address

Bonus details!

Some of the additional details you might need when configuring the above flow are as follows.

  1. If you don’t configure the above steps to user email as username, you will end up with the following error when trying to create new user account in the devportal.
Fig 9: Error message when trying to create user account with email address without the configurations

2. Once you configure to use the username as email address, the carbon super admin can still log into the portals using admin as the username.

3. After configuring the email address as the username, if you try to use a non-email formatted value as the username you will be displayed with the following error message in the devportal’s self-registration process.

Fig 10: Error message when trying to create user account with non-email address with the configurations

4. After enabling the email address as the username configurations, if you try to create a new user even from the carbon management console, if you try to give a non-email formatted value, you will be displayed with the following error message.

Fig 11: Error message when trying to create user account with non-email address with the configurations

5. After enabling the email address as the username configurations, even if you try to update the existing user’s username(email address) into a non-email formatted value, you will not be able to accomplish it.

Fig 12: Error message when trying to update the username with non-email address with the configurations

Wrap Up!

In this blog, we were able to go through the steps to configure WSO2 APIM 3.2.0 to use email address as username along with some bonus details. I hope that this would have been a new yet an interesting topic for you to try out! So whenever you come up with a requirement to have email address as the usernames in WSO2 APIM 3.2.0, don’t forget that it is possible 😄

Happy Learning!
Stay Safe!!!

[Source: https://data.whicdn.com/images/54138714/original.gif]

--

--