Using MSAL angular to authenticate a user against azure ADB2C via authorization code flow with Proof Key for Code Exchange.

Previously, I switched from using oidc-client to MSAL Angular to integrate an Angular app with Azure AD for authentication. If you’re interested, you can read more here. More recently, I used MSAL Angular again to connect another application, but this time to an Azure AD B2C tenant. Since I had prior experience and Microsoft provided good documentation and sample projects to follow, connecting to Azure AD B2C using MSAL Angular was not too difficult. In this post, I share how I adapted the sample project provided by Microsoft to integrate the application with our Azure AD B2C tenant and describe a few minor obstacles that I encountered.

In the past, if you needed to authenticate users against an identity provider such as Azure AD in a single-page application, chances are you would have used the Implicit Flow. However, the Implicit Flow is not as secure as the Authorization Code Flow due to the lack of client authentication and the use of the front-channel, which makes the token susceptible to interception by attacker.

The Authorization Code Flow with PKCE is more secure than the Implicit Flow because it uses the back-channel for token delivery, which makes it less vulnerable to token interception by malicious users. In addition, the authorization server can verify the identity of the client through the use of a code verifier and code challenge, adding an extra layer of security…