Azure App Service Authentication (Ez Auth) with Azure AD B2C
Published: 2021-05-04 01:29:46

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](https://aka.ms/425show) to talk to us about it. You can catch the recording here:

{% youtube EmaHxGOzwS8 %}

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gg0lndt21et2qwfm3ufc.png)

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rf8qqinkpehn815ixrlr.png)

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/barukf6vmluu9qs3v8b5.png)

## 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).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqtlb921u5rr003812wz.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oemw0vy6n9n9m59wwgrt.png)

- 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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmfwt9ml2ucurtj7erjv.png)

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0e8zh7rzj6drj7fi6jh8.gif)

## 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](https://docs.microsoft.com/en-us/azure/app-service/overview-authentication-authorization)

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`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phlixljjnbb76xm9x7e0.png)

This is also documented [here](https://docs.microsoft.com/en-us/azure/app-service/app-service-authentication-how-to#access-user-claims)

## 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.