Securing a Web API using Azure AD B2C React Client App Authorisation

1 Create the Azure Architecture

Azure provides a comprehensive out of the box authentication package, which works with several different types of end-user applications. In this article we will be using a B2C tenant to allow the users to integrate with the protected and unprotected endpoints provided by an API that you will also need to manage. This can be utilised in role management and for the security of sensitive data. 

The first step to achieve the above is to create a B2C Tenant – these next steps are described well in the available Microsoft documentation: 

Step 1a – Create a B2C Tenant 

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

Step 1b – Create AD Tenant 

https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-register-applications  

Step 1c – Create Necessary User flows 

https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-user-flows?pivots=b2c-user-flow  

The next part of the article will only focus on the sign-up and sign-in user flow, with self -service password reset. 

Step 1d – Optional Step – Integrate with extra identity providers 

Azure AD provides various options to integrate with other identity providers such as: Google Accounts, Microsoft Accounts, Facebook accounts and many more. The link below will take you through how you can add one or more identity providers.  

https://docs.microsoft.com/en-us/azure/active-directory-b2c/add-identity-provider  

2 Create API Project and Download Packages

Step 2 – Create API Project locally in Visual Studio 

Now we need to create the API that you will be securing, it does not need to have your desired endpoints now for the protection to be active. Feel free to use the starter endpoint provided or add your own. You should create a project file wherever you wish to store this, in your source control or local directory. 

Step 2a – Create Project and Download Packages 

You then create a local API project selecting ASP.NET Core Web API in the project template in Visual Studio, leaving all configurations as default. 
To be able to authenticate using Azure AD you will need to download NuGet packages listed here:  

Microsoft.Identity.Web 

Microsoft.AspNetCore.Authentication.JwtBearer 

Step 2b – Adding to Config and Startup.cs 

We then add to appsettings.json the following code to the left.

Once added, in your controllers you can now can add [Authorise] above where the route is called to mean that this endpoint is now protected by the AD that has been set up.  

3 Create Web API application in Azure

You now need to create the Azure instance of your Web API in Azure so you can make calls to it from your frontend app. 

Follow these steps to create an API Registration: 

Step 3a:  

Go to your AD B2C Tenant and select ‘App Registrations’ and select ‘new registration’ from the top menu. 

Step 3b:  

Call the app something obvious such as ‘webapi1’ – you should allow accounts in any identity provider or organisation and leave both access and id tokens blank as this Web API will not be returning them. 

Step 3c:  

Once this has been created go to the ‘Expose an API’ section from the left-hand menu. This is where you will create a ‘scope’ for your API. 

Step 3d:

First set the Application ID URI, this should be set to something easy to remember and recognise such as https://<tenant -name>.onmicrosoft.com/api 

Step 3e:

  
Now you can create a scope, you will have to reference this again so make a note of the full-length URL of the scope. Tip: give the scope a name and description to help differentiate it from others you may create in the future. 

Step 3f:

Go to your originally created webapp and go to ‘API Permissions’ again on the left-hand menu, to add the scope you have just created in the Web API. 

Step 3g:

Select ‘add a permission’ then select ‘My APIs’ from the next menu. Then select the Web API you have just created and check the permission that you have also just created. 

Step 3h:

Once you have added the permission, you need to grant consent for access to the newly added permission. You do this by selecting the button marked ‘Grant admin consent for <tenant-name>’ and you will see a green check mark appear next to the newly added permission. 

4 Create React Login App

You now need to create a React App using the create-react-app function where a blank starter app will be created with a homepage and initial config. 

Step 4a – Adding the required NPM Packages 

We can now install the NPM packages for the app. These are the two packages that you will need to add, details on how to add them to your project are in the following links:  
https://www.npmjs.com/package/react-azure-b2c  
https://www.npmjs.com/package/jwt-decode 

Step 4b – Add Authentication Config 

Now we need to add our authentication credentials to the app, this is done by adding the code on the right into the index.js file this is located in the src directory. 

Step 4c – Create authentication.js file 

You will need to create an authentication file call it auth.js, this acts as an interface within your app to call login and logout endpoints, as well as getting information about the user that is provided by Azure AD in a token. 

The file needs to contain this code: 

import authentication from 'react-azure-b2c'; 

import decodeJWT from 'jwt-decode'; 

class Auth { 

    isLoggedIn() { 

        if (authentication.getAccessToken()) { 

            return true; 

        } 

        return false; 

    }; 

    logout() { 

        authentication.signOut(); 

    }; 

    getToken() { 

        return authentication.getAccessToken(); 

    }; 

    currentUser() { 

        const token = authentication.getAccessToken(); 

        const decoded = decodeJWT(token.accessToken); 

        return { 

            decoded 

        }; 

    }; 

} 

export default Auth; 

5 Create Your endpoints

Finally, your app will run, and it will require you to login before you can view the basic pages that are provided in the stater app. 

Now you can create endpoints in your API project and add the authorise attribute to them, these will be available from your frontend app, and they will work as expected.