Connecting Azure AD B2C with React JS

Hey, folks. In this article, I’m gonna talk about Azure AD B2C and connecting it to your react project. Let’s get started.

First thing first. For this task, you need to have a react JS project, an Azure account, and an active B2C tenant. If you don’t have those, follow the below links before reading the rest of this article.

Create an Azure account. Click on the “Start free” button https://azure.microsoft.com/en-us/

Follow this link to create an active B2C tenant. When giving a name to the B2C tenant, I’m gonna give reactTest as my tenant name.

https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-tenant

Finally, run below command to create a fresh react JS project

npx create-react-app react-azure-b2c

Ok. If you have successfully created a react project, an Azure account, and a B2C tenant, you are good to go.

Let’s start with the Azure B2C configurations. Head over to the newly created B2C tenant. At there, you can see the overview page is loaded. There is a value that you need to grab from there. Domain name. Copy the key and paste it in notepad. We will need that value later.

Next, you need to register the react JS application in the Azure portal. To do that, head over to the Application in the sidebar. After that and click Add button on top. Now you will get a form like below.

Creating the application

Fill the form and click Create on the bottom. After that, you will get the new application inside your B2C tenant. Click on the application. You will be redirected to the overview page of the application. At there, you can see a set of values. Grab the value of Application ID and paste it to the notepad. We will need that too.

We need one other value. the scope URL. Head over to the published scope tab. You can see a table something like below. Grab the value in the Full Scope Value column. And paste that too in the notepad.

Now, Let’s create a user flow to sign in. Head over to the User flows tab. Then click on New user flow button. Then you can see user flow types. Ther are a lot of user flows. For this article, I’m gonna choose Sign up and sign in the user flow. Now you will get a form to create the user flow. I’m gonna fill the form like below.

Scroll down to section 4. User attributes and claims. Click on show more. You will see a set of claims. You can choose anything out of these claims. There are two columns in this window.

1. Collect attribute — When you signing up for the B2C, you need to fill these selected values.

2. Return attribute — When you sign in, these selected values will be returning with the token.

Fell free to select anything you want. I’m gonna tick Email Address, Identity Provider, Identity provider access token and Surname.

You can edit those values later.

Click Ok. then click Create. You can see the newly created user flow now. B2C_1_react_sign_in. Copy the user flow name and paste it in notepad.

Ok. Now, your notepad should be like this.

Before we move into the react project, Let’s create a user in B2C tenant. go to the Users tab and click the New User button.

You will see 3 options in that window

1. Create Azure AD B2C user
2. Create user
3. Invite user

Select Create Azure AD B2C user option for this task.

I have already created a user with my email. So you guys go ahead and create a user. It’s really simple.

Right now, B2C configurations are done. Now we have to make the changes in the react project. Open your project with your preferred IDE or Editor. Mine is VSCode.

There are a lot of packages out there that can support B2C integration with react js. I’m using react-aad-msal for this. run the command. When you are choosing an npm package for this, make sure the package is up to date.

npm install react-aad-msal msal --save

It will install the package. While it’s installing let’s create a file to add B2C configuration inside the react project. I’m naming the file as authProvider.js. Add the following code to that file.

import { MsalAuthProvider, LoginType } from "react-aad-msal";const tenant = "reactTest.onmicrosoft.com";
const signInPolicy = "B2C_1_react_sign_in";
const applicationID = "5eccef0f-5c4e-4e45-94c9-b054c3c32aeb";
const reactRedirectUri = "http://localhost:3000";const tenantSubdomain = tenant.split(".")[0];
const instance = `https://${tenantSubdomain}.b2clogin.com/tfp/`;
const signInAuthority = `${instance}${tenant}/${signInPolicy}`;// Msal Configurations
const signInConfig = {
  auth: {
    authority: signInAuthority,
    clientId: applicationID,
    redirectUri: reactRedirectUri,
    validateAuthority: false
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: true
  }
};// Authentication Parameters
const authenticationParameters = {
  scopes: [
    "https://graph.microsoft.com/Directory.Read.All",
    " https://reactTest.onmicrosoft.com/api-1/user_impersonation"
  ]
};// Options
const options = {
  loginType: LoginType.Redirect,
  tokenRefreshUri: window.location.origin + "/auth.html"
};export const signInAuthProvider = new MsalAuthProvider(
  signInConfig,
  authenticationParameters,
  options
);

Now, go to the index.js and paste below import statements at the top.

import AzureAD from "react-aad-msal";
import { signInAuthProvider} from "./authProvider";

And change the bottom code like this

ReactDOM.render(
  <AzureAD provider={signInAuthProvider} forceLogin={true}>
    <App />
  </AzureAD>,
  document.getElementById("root")
);

Now run the react project. Use

npm start

or

yarn start

for this.

You can see the browser automatically redirects to the B2C login page. Enter your credentials.

B2C login page

After successful login, You can see the react project.

That’s it for this article. Your comments and thoughts are much appreciated.

Reference

https://www.npmjs.com/package/react-aad-msal

https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-tenant