Implement user authentication in React app with Azure AD B2C
Azure AD B2C Part 3
This is part 3 of a series covering Azure AD B2C features. In this post, I show a working Single Page Application (SPA) in React JS using Azure AD B2C to sign-up and sign-in users. Here are the earlier posts in this series.
Introduction
In the earlier posts, I had shown how to setup an AD B2C tenant and create and quickly test user flows from Azure portal. Let’s now take a step ahead and use the AD B2C in a web application.
We will see a sample React JS based SPA which connects to your Azure AD B2C tenant and offers sign-in, self sign-up for end users. The app uses Microsoft Authentication Library (MSAL) for React. User authorization is implemented using OAuth Authorization Code Flow with PKCE (Proof Key Code Exchange).
OAuth and the various OAuth flows deserve a separate blog post. For now, it is sufficient to know that OAuth is a delegated authorization protocol. In our case, we are delegating the responsibility of authorizing users to Azure AD B2C so that they can login to our app . OAuth standard defines different ways or flows of authorizing the users. Implicit flow, Authorization Code Flow with PKCE, Client Credentials Grant are some of the OAuth flows. MSAL abstracts most of the OAuth concepts so you need to get into all details for now.
This blog post focuses on using the AD B2C rather than dwelving into specifics of OAuth and hence I will avoid getting into details of OAuth in this post.
Let’s start getting into action now. We will need to create and configure an AD B2C tenant, register app inside the tenant and then run the React app locally.
Configure Azure AD B2C
Before you try to implement Azure AD B2C functionalities in your app, you will need to configure the AD B2C instance in Azure cloud. Let’s go through the configuration steps.
Create AD B2C tenant
If you have not done already, then create an AD B2C tenant in Azure (Of course, you need to have a valid Azure subscription). These basic steps are explained in this blog post.
Create AD B2C app registrations
You will need an app registration and user flows created inside your AD B2C tenant. Again, these steps are explained in this blog post.
Disable Implicit flow
If you have exactly followed the earlier posts and created app regisrtations inside the AD B2C, there is one change you need to do in the AD B2C configuration.
In the authentication section of your app registration, you need to disable Access tokens under implicit grant and hybrid flows.
Deslecting Access tokens and ID tokens in app registration, disables implicit auth flow. Implicit Auth Flow is not very secure and as mentioned earlier, the app I show in this post uses a more secure flow called as Authorization Code Flow with PKCE. In earlier posts, I had enabeld Implicit OAuth Flow only to quickly test the JWT returned by AD B2C.
Add a new authentication endpoint
To test the user flows quickly, I had earlier added a ‘Web’ endpoint platform in authentication and we added https://jwt.ms as repdirect URI. We can leave it as it is just in case we need to test our user flows again in future. We will now add a new endpoint for the React SPA app.
Click on Add a platform. We are going to add an endpoint representing our locally running React app. The React app is a client side SPA and hence we need to add an endpoint of type Single Page Application as shown below. Adding an endpoint for client side SPA makes our app registration eligible for Authorization Code Flow with PKCE.
On the next screen, add a redirect URI such as http://localhost:3000. This URI must match the URI that your React app runs as we will do it later. Usually when you run a Rect app locally, it defaults to port 3000 and hence we are adding the URI localhost:3000.
After AD B2C authenticates users, it will redirect the web browser to this URI and therefore to your locally running React. While redirecting, it will pass on the authentication information about the user. The React app can then render differently based on whether the user is authenticated or not. We will use this URI in the React app environment configuration later.
After entering a valid URI, click on Configure.
Add a logout URL as well. This is the URI to which web browser is redirected after the user logs out. Usually you would want the users to return to your app and show the the option to login back or some landing page with your app information, video or some promo page. Though this is an optional step, most real world applications will have some URI to which the users are directed after they logout. For now, we will use the same URI for logout redirect as well.
After entering the logout redirect URI, do not forget to click on Save button.
With this, we now have configured our AD B2C tenant and app registration section with enough details to get AD B2C user authentication functionality in our React app. Let’s now go ahead and get our React JS app working to see some magic in action.
Get app code
Code for the React JS app is available on GitHub. Clone the repo or download zip from GitHub.
| |
Configure the app
You need to configure your app so that it can connect to your AD B2C tenant. Once you have downloaded the code, follow instructions in the README to get your app configured.
Run the app
When you run the app as explained in the README, you should see the app launching in your browser.
| |
Click on LOGIN button towards top right. If you have configured your app correctly, it will pop-up a sign-in / sign-up page. Make sure the browser is allowing pop-ups.
If you look at the popup carefully, you will see that this page is served by AD B2C and not from the React app. The pop-up also shows a way to self sign-up. It means your end users can sign-up themselves which creates an account for them using their email and a password.
Sign-up, Sign-in, Sign-out
Click on the Sign up now in the sign-in/sign-up popup dialog. The popup will take you to another screen asking your email address.
If you already created an account while following earlier blog post, then you can use the same credentials to directly sign. This is possible because AD B2C has already created a user account for you when you tested the sign-up flow.
AD B2C will always verify the email address that you are entering belongs to you by sending a verification code email.
Once you enter a valid email address and click on Send verification code, you will get a 6 digit code on the email address that you provided. You will need to enter the same so that AD B2C can verify your email address via the code.
Click on Verify code and then you can proceed to create an account for yourself in the AD B2C. Enter required information and a password to create your account and then click on Create.
After successful creation of account, AD B2C will sign you up and pass on the authentication information to the React app. The browser will be redirected to the redirect URI which is the same as we are running our React app on. However, since now the user has authenticated, the React app UI will change and render the user profile in the main UI.
The UI now shows a LOGOUT button instead of LOGIN towards top right.
The main UI also shows user’s profile. If you notice, not all the information is shown there. For example, the Job title and Country are blank. This is correct because while creating an account, the only information we collected was City and Given name.
Try logging out and then logging in again with the same credentials you supplied during sign-up. It should work like a charm. You can also try creating additional accounts and play with them.
All the user accounts created via self sign-up are created in the AD B2C tenant. Thus any new apps you register in future will always have access to the same user accounts. This means you can offer a Single Sign On (SSO) experience to your users for all your apps registered in the AD B2C. To make it more clear, what it means is that users can use the same credentials for all your apps registered in the AD B2C tenant.
Summary
This post showed how to use AD B2C in a React JS based Single Page Application. We will keep exploring AD B2C as there are many more features it supports.
If you want to read more about Microsoft Authentication Library for React, head to their GitHub repository.
If you have followed it and got the AD B2C to work, Congratulations! If you have faced any problem, please let me know in comments below. In the next post, we will look into how to authorize Web API calls via AD B2C authentication. Stay tuned!