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:

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);
     });
 }

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.

Now you can run the application from Visual Studio and click Login.

On the Auth0 login screen, click Sign Up and complete the steps to create a new user.

After the sign up process is completed, and for subsequent sign ins, you will be redirected back to the home page.

If the sign in was successful the Logout option and Claims option will be available.

That’s it!

Next step is to convert this application from using Auth0 to Azure AD B2C.

In Part 2 we will Create the Azure AD B2C Tenant.

In Part 3 we will Convert Our Application to Authenticate with Azure AD B2C.

Leave a Reply

Your email address will not be published.