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.

Azure AD authentication in angular using MSAL angular v2 library

In previous projects, I use Oidc-client-js to authenticate users against azure AD. Oidc-client-js is a great library but is no longer maintained by the main author. Because of this, I have switched to MSAL angular v2 in my current project. Microsoft provides good documentation and sample projects to help developers to integrate the library into their project. I am able to follow the sample project to get authentication working in my angular application, albeit a few hiccups along the way. In this post, I share some of the issues I ran into and how I structure the codes for authentication.

Common frameworks, libraries and design patterns I use

In this short post, I share some of the core frameworks, libraries and design patterns I worked with on a regular basis.

Authenticate against azure ad using certificate in a client credentials flow

I have an API which needs to authenticate against azure ad to obtain an access token for calling another downstream API. When registering an application in azure AD for the caller API, I could either setup a shared secret or a certificate for the API to use as part of its credentials in a client credentials flow . In the past, I had always used a shared secret as it was more convenient and easier to setup. However, using certificate provides stronger security. After spending a few hours of googling and hacking, I was able to setup and use a certificate instead of a shared secret as credentials for the caller API to authenticate against azure AD.

Migrating from Microsoft.AspNetCore.Authentication.AzureAD to Microsoft Identity Web authentication library to integrate with Azure AD.

I recently had a chance to clean up some of the deprecated libraries I used for validating a JWT access token or obtain one via the client-credentials flow or the on-behalf-of flow. The libraries I used were under the Microsoft.AspNetCore.Authentication.AzureAD packages. Per the document, since ASP.NET core 5.0, users should use the Microsoft.Identity.Web package to integrate with Azure AD and Azure ADB2C.

Integrate Azure AD B2C reset password user flow in angular using oidc-client-js.

This post continues from previous posts which I go over using oidc-client-js to interact with azure adb2c:

• Integrate a sign up / sign in user flow to authenticate a user against azure adb2c
• Integrate a edit-profile user flow.

In this post, I’m going to share how to handle resetting password.

You can find the sample project here.

Integrate Azure AD B2C profile editing user flow in angular using oidc-client-js.

This post is a continuation of the blog post I wrote a couple months ago on how to authenticate user against Azure ADB2C from angular app using oidc-client-js. In that post, I discussed how to integrate AD B2C sign up and sign in flows to allow the user to authenticate against AD B2C. In this post, I’m going to show an example of integrating the editing profile user flow. You can find the accompanying sample project here.

I assume you have some basic understanding of angular and Rxjs and focus primarily on the aspects relating to integrating the edit user flow. If you have questions about the codes, feel free to reach out.

Also, check out the next post relating to oidc-client-js in which I go over handling password reset.

Building or leveraging an OIDC provider to protect web applications.

In this post, I write about OpenID and OAuth2 providers, and what can you use to build or leverage them to protect your web applications.

Obtain access token via authorization code grant with PKCE in angular using oidc-client-js and Microsoft Identity Platform.

Recently, I learned about why implicit flow is not secure because of exposing the access token in the browser. Authorization code grant with PKCE is more secure and should be preferred over implicit flow for protecting a public application which cannot keep the client secret secure. The good new is if you already use oidc-client-js and get tokens from azure ad via implicit flow, the changes you have to make to use authorization code flow with PKCE are minimal. In this post, I show what you need to change to use authorization code grant with PKCE.

Continue reading

How to authenticate user against Azure ADB2C from Angular app using oidc-client-js.

In this post, I show you how to authenticate your user against azure adb2c to obtain an id and access token. Specifically, we’ll discuss the following:

• Create azure adb2c directory
• Register applications in b2c tenant.
• Define scopes and setup permissions.
• Setup sign up and sign in user flow.
• Authentication service.
• Response to authentication events in component.

Please checkout the latest codes for this post here.

Also, check out the follow-up posts relating to using oidc-client-js to interact with Azure ADB2C:

• Integrate Azure ADB2C edit-profile user flow.
• Integrate Azure ADB2C reset-password user flow.

Continue reading