When an application is configured to use Azure AD B2C for authentication, the application shows sign in and sign up pages. The contents of these pages are obvious subjected to what is configured in the user flows.

These pages are not part of the application. So, the application’s theme may be completely different from these pages and this difference many not be preferable by many.

Azure AD B2C provides some options to customize these pages. In this article, let’s have a look at those options.

Company Branding

Login to Azure Portal and search Azure AD B2C in the search box provided in top navigation panel. A panel as shown below will open. On this new panel, there is a menu Company Branding.

If this option is selected, a new panel will be opened which shows list of configurations you have already configured. As you are doing this first time, this page will be empty.

On this page below inputs are asked:

• Language first company branding configuration, this will be set to “default” and cannot be changed. If you want to create language specific branding configuration, then new configuration should be created later.
• Sign in page background image of dimensions 1920 x 1080, which is shown on the login page, the size cannot be more than 300 KB. The sign in box appears in the center and it can cover any part of image, depending on dimensions image, or dimensions of browser in which it is rendered.
• Banner logo of dimensions 280 x 60, and it will appear on sign in page. The size cannot be more than 10 KB.
• Username hint, this appears on the page if they forget their username.
• Sign-in page text – Type the text that appears on the bottom of the sign-in page. You can use this text to communicate additional information, such as the phone number to your help desk or a legal statement.

There is also an advanced settings section, and it can have

• Sign-in page background color – Specify the hexadecimal color
• Square logo image – The image can’t be larger than 240 x 240 pixels in size and must have a file size of less than 10 KB
• Square logo image, dark theme – Same as the square logo image above. 
• Show option to remain signed in – choose this to let your users remain signed in to Azure AD until explicitly signing out. 

Just for demo, I have set below images on my Azure AD B2C instance to see how the page looks. It may take about an hour to reflect those settings on the UI.

Unexpected Behavior

To my surprise, the changes I made did not appeared on the sign in pages. The default ocean blue login page was shown always.

So, after trying few things, I got to know that the company branding gets applied to login pages only if the Page Layout version is 1.2.0.

Login to Azure Portal and go to the user flow option under Policies.

Then select the user flow for which the company branding configurations should appear. On the edit user flow panel, select Page Layout menu from left navigation. There are four entries on the panel

• Unified sign up and sign in page
• Local account sign up page
• Social account sign up page
• Error page

Select first entry and then set Page Layout Version to 1.2.0.

Now, run the user flow with test application and you should be able to see the background image and logo both on the sign in page.

User Flow – Page Layouts

In a given user flow, there are options to modify the page layouts.

The easiest option in page layouts is to change the template. The default login page template has blue color in background. That template can be changed to slate gray or classic.

Below slide shows the ocean blue and slate gray templates, assuming you have not specified anything in the Company Branding options.

The classic layout template is shown in below snapshot.

On this page, there are also advanced option to have completely custom pages for sign in and sign up. I will try to cover a demo on this in next blog article.

I hope you enjoyed this article. Let me know your thoughts.