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 to the process. To learn more about the protocol, you can refer to RFC 7636 article.

Azure ADB2C app registration changes

Before, I was using oid-client to authenticate users against our azure ADB2C tenant using the implicit flow. To use Authorization code flow with PKCE, I needed to update a few configs in the Authentication section of the app registration in azure ADB2C tenant.

One thing I had to do was migrating the Redirect URLs from Web to Single-page application platform. Azure ADB2C provides a convenient link to help with the migration, as shown in the below screenshot.

I also had to check the option “Allow public client flows”, as shown in the below screenshot.