Identity: Change Password with Asp.NET Identity and React

5 min readJul 28, 2021

Step by step guide to change password with Asp.NET Identity, React and Redux

Change Password, a Day-2 Operation

In this post I will be covering the frontend side of change password with React and Redux, along with the Asp.NET API integrated with Asp.NET Identity for the backend.

End Result

By the end of this guide, you will have a form like this set up with React and Redux, with full input validation, paired with its backend API.

By the way, this topic belongs to the series to set up Authentication and Authorisation for Asp.NET and React ecosystems.

1. User Interface

Like usual, let’s start with the user interface. If you haven’t read the posts on how I manage forms using React, refer to form handling with React. Also as I am using Redux to manage state, you might like to have a look at Redux in plain English.

1.1 UI: Password Reset Link

The first form is to enable users to initiate the password reset process, by simply entering their email address like Figure 1. Consider the below notes:

Form: This is a simple form with only 1 field and an email validation rule, based on RegEx. If you followed the guide on form management, the below form would be very simple.

Api Call: this.props.sendResetLink is a simple API call to our backend which sends the reset request message to user’s mailbox.

Don’t Confirm The Existence of the Account
When users request to reset their password, we should not confirm there is an account associated with this email address on the form. The reason is if you application contains sensitive private information such as a dating website, people shouldn’t be able to confirm that a person with this email address has a profile in your system.

Resend Request: Once the email was sent, consider giving users the option to retry their request, in case they didn’t receive/couldn’t find the email.

2. Backend API

2.1 Send Reset Link

By now the request has been received by your backend API, and now we need to actually send the password reset email. Here is the controller that receives the request:

and here is the service behind this controller:

As you can see I am reading some values from settings files, for more information on how to read config in Asp.NET APIs, refer to configuration management for Asp.NET APIs. Also, consider these notes on the above snippets:

Not Confirming: If you look at the above code, even at the controller level, I am not confirming, or rejecting if the email address exists in my database. I just reply with an OK for all scenarios.
User Manager: Like other Asp.NET Identity operations, I am using UserManager to find the account associated with the email address, and also generate a token used for password reset.
Token: User Manager generates a token, which I’ll put in the email message and send it to the user. I will use this token in my next step to reset the password.

1.2 UI: Reset Operation

Once the user receives the email and click on the link, they should again land on our website using a different component to finally change their password:

Note
Configuration, plumbing and troubleshooting your software foundation take a considerable amount of time in your product development. Consider using Pellerex which is a complete foundation for your enterprise software products, providing source-included Identity and Payment functions across UI (React), API (.NET), Pipeline (Azure DevOps) and Infrastructure (Kubernetes).

Here is the form through which I capture the previously generated token in the query string, and send it back to the API as the proof of user session:

2.2 Backend: Resetting the Password

Now the final piece, which is resetting the password in our Identity system, and sending a confirmation message to the user using email sender by SendGrid.

Pellerex: Identity Foundation for Your Next Enterprise Software

How are you building your current software today? Build everything from scratch or use a foundation to save on development time, budget and resources? For an enterprise software MVP, which might take 8–12 months with a small team, you might indeed spend 6 months on your foundation. Things like Identity, Payment, Infrastructure, DevOps, etc. they all take time, while contributing not much to your actual product. These features are needed, but they are not your differentiators.

Pellerex does just that. It provides a foundation that save you a lot development time and effort at a fraction of the cost. It gives you source-included Identity, Payment, Infrastructure, and DevOps to build Web, Api and Mobile apps all-integrated and ready-to-go on day 1.

Check out Pellerex and talk to our team today to start building your next enterprise software fast.