A couple of months back I was introduced into the world of ReactJS. A client requirement to build a web frontend. All my developer days were spent on developing backend systems using Microsoft ASP.NET Web API and C#. And you can’t say no to your clients, right? if you have to do it you have to do it. So step into a new realm of building frontend applications.
My client already had a WEB API and a web frontend. This requirement was to create another separate sub-module using ReactJS to interact with that Web API. As usual security concerns put into the table and yep they already have Azure AD B2C setup for user management. The challenge was to use ReactJS to interact with Azure AD B2C for authentication and authorization.
Trust me, there were few tutorials on how to connect Azure AD and Azure AD B2C with frontend technologies. But all were bits and pieces here and there. I couldn’t find a full step by step tutorial that guides you through. So thought why not write one.
I have made a few assumptions here, that you already:
- Have experience on ReactJS and you don’t know how to connect Azure AD B2C.
- Have an Azure account. Don’t have one? Click on this link: https://azure.microsoft.com/en-us/ and click on the big fat green button that says “Start Free >”
- Have a fully functional Azure AD B2C directory with users. If you have an Azure account and need to create an Azure AD B2C account, have a look on this link: https://bit.ly/2U8X9Ft
Let's get started by creating a brand new ReactJS Project
- If you are in Windows, fire up your command prompt or the terminal for other platforms such as Mac or Linux.
- Go inside to your working directory.
- Type the following command and press ENTER to create a ReactJS project.
$ create-react-app rjaadb2c
- Now navigate to the newly created project directory by typing,
$ cd rjaadb2c
- Open up your favorite code editor (I will be using VS Code) and open up the directory you have created in the previous step.
- Your editor should look like this
VS Code has this nice little feature called terminal window. This will open a terminal inside the code editor. It’s a very handy feature. Click on
Terminal > New Terminalin the menu bar.
- Now in the terminal window type
$ npm start
This will execute the ReactJS project. And it should look like this.
All good to go, let’s prepare our Azure AD B2C environment now.
Preparing Azure AD B2C Environment
In this section, we will be preparing our Azure AD B2C environment for authentication and authorization.
- Now login to Azure Portal by clicking on this link: https://portal.azure.com
- Click on the Filter button in the menu bar and switch to your B2C Directory
- Now click on All Services label in the sidebar menu.
- Type “Ad b2c” in the All Services search box.
- Click on Azure AD B2C label
- In Azure AD B2C blade, click on the Applications label.
- In Applications blade, click Add + button.
- Now fill in the information required to create a new Azure AD B2C Application, as shown below
- As you see it’s clear. Give a unique “Name” to your application.
- And then select Yes to “Web App / Web API” since we are creating a web application.
- And leave Yes as the default for “Allow implicit flow”
- Type the “Reply URL” in this case it's our local host address. Type “api” or any identifier of your choice to “App ID URI (optional)”.
Using this URI, you will allow the permission to your application to access certain features in your directory. As an example, this could be reading user profile information.
I have specially marked this because if you didn’t give an identifier in this location, you won’t see any scopes under “Published scopes”. I am not sure its a bug or not but without it, you won’t get default scopes here neither can create new.
- Now click Create button to create the new application.
- Now click on the User flows (policies) label in the Azure AD B2C — Applications blade.
- Click on + New user flow button.
- In the Create User Flow blade under Recommended tab click on the “Sign up and sign in” link.
- In the Create blade make sure you fill the form as per the picture below. You have given all the instructions and information you need in the blade itself.
- Now you have successfully created a Sing up and sign in user flow. By clicking Run user flow button you will be able to test this flow.
This is all you need at Azure AD B2C end. Let’s do a checklist.
- Azure Account [✔️]
- Azure AD B2C Tenant [✔️]
- Azure AD B2C Application [✔️]
- A user flow to sign up and sign in [✔️]
Excellent, now the setup is done. Let’s go back to our react application and do some coding.
Installing the library
Now, go back to your ReactJS application. In the terminal type the following command to install the library. Remember we were using VSCode terminal window.
$ npm install react-azure-adb2c --save
react-azure-adb2c is a library that will help you to get the functionality or Azure AD B2C to your ReactJS application. By clicking here you will get brief documentation of how to use it in your ReactJS application.
Now you have successfully installed the library. In your ReactJS application click on the index.js file, at the top of the file add the following line of code.
Add this line of code after the import to initialize.
Now you need to replace the items marked in “<>” from the values at your Azure AD B2C Application.
Now go back to the Azure portal and grab the following information.
To grab the value for the tenant, go back to your Azure AD B2C directory. Under overview, copy the value in “Domain name” field.
Now, to grab the applicationId, click on the Applications label, and copy the id from the newly created application, in this case, “ReactJS AADB2C” and replace the value at applicatoinId field.
Now click on the User flows (polices) label and copy the name of the policy and replace the value at signInPolicy field.
Now the scopes array field. This array will give the necessary permissions to your application. These permissions will allow your ReactJS application to access functionality at Azure AD B2C.
To grab this information:
- Click on Applications label.
- Click on your application “ReactJS AADB2C”.
- Click on Published scopes label
- Grab the value at FULL SCOPE VALUE column for user_impersonation scope.
- Replace the value at scopes array (Remember this is an array, for each scope you need to add an element in this array)
Visit this link to get a full detailed documentation on scopes.
Excellent, we are almost done. Now, your initialize code should look like this.
One more thing to add. Let's replace the default ReactDOM.render() code with this.
After all these changes, your index.js file should look like this.
Almost there. Let's do a test run. In your terminal window type and execute the following command.
$ npm start
You should see this screen.
Now use your login details for the Azure portal or you can create a new account by clicking on “Sign up now”. Remember? we have created a user flow for both sign-in and sign-up. Cool isn’t it.
After creating a new account or using an existing account, you can log in to the application. But, you might not see the default ReactJS page. This might happen due to insufficient application permissions.
To fix this,
- Go back to the Azure Portal
- Goto the Azure AD B2C directory
- Click on the Applications label
- Click on the application ( “ReactJS AADB2C”) .you just created.
- Click on API access label
- Click + Add
- Select the application in step 4 from the Select API drop down.
- Select “Access this app on behalf of the signed-in user…”
- Click OK
Lets’ go back to our ReactJS application and refresh or rerun it.
Congratulations !!! You are done.
Let’s grab some information from Azure AD B2C and display it under the react logo.
Go back to the terminal and install the following package.
$ npm install jwt-decode --save
This package will allow you to decode the JWT token from Azure AD B2C and grab information inside it.
Now you need to visit back to Azure portal and let Azure AD B2C send you this information. To do this,
- Go back to the Azure portal.
- Go to your Azure B2C Directory.
- Click on User flows (policies) label.
- Click on the sign-in policy you have created.
- Click on the Application claims link
- Select the fields you need, in this case I have selected City, Country/Region, Email Addresses, Display Name, Given Name (this will be the First Name), Surname (this will be the Last Name).
- Click Save.
Go back to your ReactJS application and click src directory. Add a new file. Name it as Auth.js. Copy and paste the following code inside the file.
Now open the App.js and replace with this code.
We are all done. Lets rerun our ReactJS application.
$ npm start
You will be prompted with the Microsoft login screen, after a successfull login you should see this screen.
And grab the code from here.
All the tutorial code goes here. Contribute to fiqriismail/tutorialcode development by creating an account on GitHub.
Have a nice day.