Authentication and authorization using Azure B2C and MSAL

Authentication

I have used 2 separate libraries to perform authentication on the client-side:

 "@azure/msal-angular": "^0.1.2"
 "msal": "^1.0.2" - authentication with SSO

and 2 libraries on the server-side:

 "passport": "^0.4.0"
 "passport-azure-ad": "^4.0.0"

Client-side code

The client's configuration is displayed below.

The client executes the sign-in policy into Azure B2C by constructing the address from below:

authority: ${azureInstance}/${tenant}/${commonEnv.signInPolicy}

The client connects to the following server's address when testing locally (using environment.ts file):

http://localhost:3000/public/controllers/api

The API management layer subscription key it is used inside the HttpInterceptor when constructing the requests for the server's API's calls (see Fig. 7)

Fig 1 - configuring B2C settings in the environment.ts file

Fig 2 - configuring B2C settings in the environment.common.ts file

Fig 3 - Test the sign-in policy for your application into B2C

Guard

The application consists of several modules, one of which is named: "iap".

A route guard has been added to protect the activation of this module based on the call to the AuthService's isAuthenticated() method. - see Fig 5.

Fig 4 - Module protected by the route guard

Fig 5 - Route guard makes calls into the authentication service

Authentication Service

The authentication service contains methods to perform MSAL authentication (login, logout, acquireTokenSilent) as well as methods to parse the roles from inside the token's claims.

Fig 6 - Authentication service uses MSAL library to perform authentication calls

The following method of authentication's service returns the token from the local storage if the authentication has been previously performed.

HttpInterceptor

The HttpInterceptor adds the token to every request made to the server's APIs.

One of the headers added to the request contains the API Management key that will be checked by the server-side code.

Fig 7 - Http Interceptor adding a header to the request using the API management key

Server-side code

The server code uses the libraries from below to authenticate the request sent by the client:

var Passport = require('passport').Passport;

var BearerStrategy = require('passport-azure-ad').BearerStrategy;

Fig 8 - configure passport options using B2C settings

A middleware authorization class has been added to the Express application and this class performs the authentication/authorization for each request.

Fig 9 - authenticate the client using the OAuth "bearer" authentication

Note: the client ID value stored in the environment variable "IWA_B2C_CLIENT_ID" is the same value as on the client and it is the client application's GUID.

Authorization

On the server-side code, the B2C logged-in user's email address is verified against an external party (in this case it has to exists in PeopleSoft).

At the same time, the middleware verifies that the request's API name is part of a list of APIs stored in the database and performs authorization only in this case.

The API management rules are configured as such that the APIs can be called only by the Azure STS.