Adventures with Azure AD B2C: Customizing Sign In and Sign Up UI

Lately I have been working a lot with Azure AD B2C.

One of my most recent requests was to customize the Sign In and Sign Up pages.

If my memory was serving me correctly, which is often not the case, I thought this was possible, just didn’t know what challenges or issues I was going to encounter.

After a day or two of aggravation fighting HTML and CSS, I through in the towel on customizing the UI and decided on another direction, a direction where I had absolute control over the UI.

I created an ASP.NET Core MVC application and used the Resource Owner Password Credentials (ROPC) policy in Azure AD B2C to authenticate my users.

This worked, but I soon ran into an issue where I could not call the Microsoft Graph API with the authenticated user’s access token. I needed to do this so the user could change their password if they wanted.

Talking with my peers, by peers I mean people way smarter than me, I was quickly hand-slapped for even thinking about ROPC, citing the potential security concerns and the things I would be given up out of the box, e.g. Multi-factor authentication, email verification, etc.

These were the articles that resonated the most as to why I should avoid this:

• https://winsmarts.com/ropc-prefer-strongly-to-use-8b99039573d8
• https://www.scottbrady91.com/OAuth/Why-the-Resource-Owner-Password-Credentials-Grant-Type-is-not-Authentication-nor-Suitable-for-Modern-Applications

I picked back up the towel I through in a couple days back and started down the path of customizing the UI through the Azure AD B2C provided framework.

My implementation can be found at https://github.com/mattruma/AzureADB2CBootstrapTemplates.

Some caveats:

There is a page flicker on initial load. I tried to get around this with some JavaScript and an onload listener for my document, but Azure AD B2C does something to strip this functionality one page render.

In order to JavaScript to work on your pages you need to enabled it from within the portal, see https://docs.microsoft.com/en-us/azure/active-directory-b2c/user-flow-javascript-overview.

The CSS and HTML is a bit inconsistent, so what one would think would work for all pages, instead only works for one … translated, lots of custom CSS to make this work.

Next steps will be adding the Password Reset page.