Auth0 to Azure AD B2C Migration – Part 1

In this series of articles we will look at converting an existing ASP.NET Core 2 Web Application from using Auth0 to using Azure AD B2C.

This series of articles assumes you have some familiarity with Auth0 and Azure AD B2C, but just in case you don’t, below are several links that should get you caught up on the technologies:

Auth0 Overview https://auth0.com/docs/getting-started/overview
Auth0 Basics https://auth0.com/docs/getting-started/the-basics
Azure AD B2C Documentation https://docs.microsoft.com/en-us/azure/active-directory-b2c
About Azure AD B2C https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-overview

In order to follow along, you will need to have an account with both Auth0 and Azure. You can setup free or trial accounts with both Auth0 and Azure.

To get this series started, I created an ASP.NET Core 2 Web Application, leveraging the instructions from Auth0 at https://auth0.com/docs/quickstart/backend/aspnet-core-webapi/01-authorization, and wired-up Auth0 authentication..

You will also need to download the repository athttps://github.com/mattruma/Auth0AzureADB2CMigrationDemo.

The first thing you will need to is create an application in Auth0.

To do this, log into Auth0, click Applications and then click Create Application.

You will need to provide a Name for the application.

Next, update the appsettings.json file, in the Auth0WebApp project, with the Auth0 Domain, Client ID and Client Secret.

You will also want to update the Allowed Callback URLs and Allowed Logout URLs, since we are developing locally we will just have them point to http://localhost:44329.

One additional feature I wanted to add was when users went to sign up I wanted them to provide a Display Name and a Phone number.

To do this in Auth0, you need to click Universal Login and then the Login tab.

Switch on the feature Customize Login Page.

Now scroll down and add the additional fields support for display_name and phone. This will make it so the fields show up on the sign-up screen when a new user attempts to register.

One last thing, in order for these fields to be returned in the JWT token we will need to add a rule to enriched the token.

From the Auth0 dashboard, click Rules, then click Create Rule.

From the display rule templates, select the Add persistent attributes to the user template.

Paste the code below into the rule:

function (user, context, callback) {
   user.user_metadata = user.user_metadata || {};
   user.user_metadata.display_name = user.user_metadata.display_name || '';
   context.idToken['https://localhost/display_name'] = user.user_metadata.display_name;
   user.user_metadata.phone = user.user_metadata.phone || '';
   context.idToken['https://localhost/phone'] = user.user_metadata.phone;
 auth0.users.updateUserMetadata(user.user_id, user.user_metadata)
     .then(function(){
         callback(null, user, context);
     })
     .catch(function(err){
         callback(err);
     });
 }

function (user, context, callback) {

user.user_metadata = user.user_metadata || {};

user.user_metadata.display_name = user.user_metadata.display_name || '';

context.idToken['https://localhost/display_name'] = user.user_metadata.display_name;

user.user_metadata.phone = user.user_metadata.phone || '';

context.idToken['https://localhost/phone'] = user.user_metadata.phone;

auth0.users.updateUserMetadata(user.user_id, user.user_metadata)

.then(function(){

callback(null, user, context);

})

.catch(function(err){

callback(err);

});

}

In order for our ASP.NET Core application able to retrieve additional user profile information in the claims, you will need add the scopes email and profile to application Startup.cs file.