Identity: Sign Up with React and Asp.NET Identity

7 min readJul 14, 2021

Step by step guide on how to create sign up form along its backend services

Sign Up, The First Step in Identity Systems

Sign up is the very first step in the user journey interacting with your identity system, where they create a basic profile. In this post, I will walk through what you need to implement for your sign up process, from user details verification to blocking bots creating fake profiles in your database to sending activation emails.

End Result

Here is how the end result will look like from user interface point of view. I will also activate Google ReCaptcha, do all the backend operations including server-side captcha verification, and sending activation emails. We have a lot to cover, so stay tuned.

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

Libraries

I have used the below libraries for my Sign Up form.

1. User Interface

The first step is to create the user interface using our easy to use form manipulation helper classes.

Here is how the form looks like, and this is how it works step by step:

Set up form elements to capture username and password. To read more on this, refer to complete guide to forms and input validation in React.
Set up Joi Validation to validate form elements
Connect to Redux store (optional). To read more on Redux set up end-to-end redux in plain English (for React apps).
As soon as the user gets authenticated, redirect the user to where they came from. To read more on this, refer to check user authentication status with higher order components

1.1 Redirect back to original location

Before I get into the SignUp service, I’d like to cover GetRedirectUrl. The purpose of this function is to take the user back to where they were before coming to Sign Up form.

What happens is before you take the user to Sign Up form, you record their location somewhere (I am using session storage), and once they sign up, you read the location from session storage, and transfer them like below:

1.2 ReCaptcha

ReCaptcha is used to prevent spammers from bombarding your forms to create fake accounts in your system.

Google ReCaptcha works in a three step process.

Stop the spam requests reaching the server by asking the user to solve a puzzle, or analysing user’s activity prior to performing an action.
For those requests that reached the server, your backend services need to verify the code generated by ReCaptcha client against Google’s APIs.
If the code matched, you could trust (to a high degree) that the request came from human and not a bot.

For these operations to success, we need to have two codes and one secret:

Client Side Generated Code: This code is generated to identify the session on the client side. It will be used when our backend wants to send a request for final validation to Google API.
Client Side Secret: Not so much a secret, but it is a code you need to allocate to your front end application. It basically identifies your domain to Google, in order for the client side library to function and send data to Google dashboards. You could then see the behaviour on their dashboards to monitor how many requests are being blocked.

Also as you can see, I am reading this key from React env file (process.env.REACT_APP_RECAPTCHA_SITE_KEY).
To read more on this, refer to Configuration Management for React Single Page Applications (SPA)
Server Side Secret: Once the request passed client side validation by ReCaptcha library, we need to do a final validation on the server side, by sending Google the ReCaptcha code generated on the client, and also a Secret — generated through Google ReCaptcha Admin Console — which we need to keep secure on server side. Once passed, the operation on the server side can continue, which I will cover later.
To read more server side secret management, refer to Secret Management in ASP.Net 5.0 Web APIs.

1.2.1 ReCaptcha: Client Side

Whenever the user submits the form, I generate a new ReCaptcha code. Immediately afterwards, ReCaptcha fires an OnChange event, and then I submit my signup request to backend, while sending username, password and recaptcha token.

To see how I use Redux and Axios to send this request to backend, refer to the below two posts:

2. Server Side

Now I have sent my requests safely to the backend, it’s time now to validate the request, and create the new user account. Here is the list of steps I need:

Validate request payload using FluentValidation
Validate Google ReCaptcha Key (generated on the client side)
Registering the new user and returning the result (success, or error)

Here is the code behind my controller, which I will walk through it:

2.1 Request Validation

As I have talked about this before, I am using FluentValidation for RequestValidation, and in case you wanted to read more about it refer to Step By Step Guide To Implement Request Validation for Asp.NET 5.0 API with Fluent Validation.

2.2 ReCaptcha Validation

Next I need to validate the ReCaptcha token passed from client side against Google backend, and if I couldn’t validate it I will return a 400 Bad Request error.

Here is the code behind my ReCaptcha service here:

It is simply an API call to Google API, and logging the result.

Read More on Logging and Calling Other APIs

If you’d like to read more on logging, refer to step by step guide to set up monitoring for Asp.NET web APIs with NLog, Azure, and Application Insights. Also if you’d like to know what’s happening behind my API Calls, you can find more at complete guide on how to call other APIs from Asp.NET.

Read More on Configuration and Secret Management

Also as you can see I am using some shorthand to read secrets and configuration in my Asp.NET controller, for which you can refer to configuration management for Asp.NET APIs and secret management in Asp.NET APIs.

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).

2.3 Account Registration

Next is the account registration which you can find the code below.

Here are the points I’d like to highlight about the above Create Account service:

UserManager: I am relying on UserManager object coming with Asp.NET Identity to create new users. I didn’t create a new repository object for that purpose.
Activation Token: I am using the same object to generate the token used for Email Activation process. Once generated, I construct a link, to the same website, so the user can click on it, and activate their account.
IEmailSender: Once the content of the email was ready, I can put together the email text, and send it using Email Sender. To read more on Email Sender, refer to email sender for Asp.NET Identity using SendGrid.

2.4 Account Activation

Last but not least is the account activation, when the user receives the email, and wants to activate it by clicking on the link. I have used the below code to finalise the process. Consider these notes:

Base64: As the account activation token is used in the URL, I have done a Base64 on it before sending it. Once I receive it I need to reverse it before using it.
ConfirmEmailAsync: Using the same object, UserManager, ConfirmEmailAsync can be used to activate the account.

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.