Azure App Service Authentication (Ez Auth) with Azure AD B2C

The new version of the Azure App Service Authentication (aka EZ Auth) was announced a couple months back and we recently had one of the PMs, Yafet Woldegabriel, as a guest on the 425 Show to talk to us about it. You can catch the recording here:

But we wanted to take things one step further and configure Ez Auth to work with Azure AD B2C. Since this is not as straightforward as configuring Azure AD, this blog shows you how to do it step by step.

Configure the App Registration in B2C

In Azure AD B2C, create a new App Registration. Give it a name and press Register. Make a note of the Client ID in the overview tab. Next, open the Secrets and certificates tab and create a new secret. Make a note of it. Last step, navigate to the Authentication tab and add a new Platform.

I chose Web App since I'm running a .NET Core Web App using Razor Pages. The Redirect URI needs to have the following format:
<your webapp url>/.auth/login/aad/callback

You also need to, unfortunately, configure Implicit Flow by checking both the ID and Access Tokens:

We're all done with the App Registration

Update the User Flow in B2C

Select the sign in/sign up user flow you wish to use with your application. Navigate to the Properties and search for the Token Compatibility settings section. In the Issuer dropdown, update it to use the one with the user flow name in the URL:

Make sure to press Save to persist the changes... Finally, you want to press the Run user flow so that we can copy the issuer URL. Copy the value, leaving out everything after v2.0/ as per the picture below:

Configure the Authentication in the Azure Web App

Navigate to your Web App in the Azure Portal and select the new Authentication tab (the old once has classic next to it).

Press Add identity provider

On the next tab, select Microsoft and configure the necessary settings based on the information we collected in the previous steps

• Client ID: the Azure AD B2C App Registration Client ID
• Client Secret: the secret we created earlier
• Issuer URL: should look like this https://<your B2C Name>.b2clogin.com/tfp/<your B2C Name>.onmicrosoft.com/<your user flow name, e.g B2C_1_susi>/v2.0/

Leave everything else as default

Restart your web app and try to navigate to it. You should be presented with the sign in page of your user flow, as per the gif below:

Accessing User Claims

Although Ez Auth is fairly rudimental (an on/off switch for auth), you can still access the user claims via a special URL. This is all documented here

The Principal ID and Principal Name values are available as headers in the HTTP Request so your app can look into these. You can also use a specially crafted URL to get the full user claims. the URL is:

<your azure web app URL>/.auth/me

This is also documented here

Conclusion

Ez Auth is a great solution for certain scenarios. And now, there is a way to authenticate users to your Azure Web Apps and Azure Functions using B2C and Ez Auth.

Give it a go and let us know if you have any feedback or questions in the comments.