In this post I will explore the process of customising the Microsoft Cloud branding default sign in page experience when we login to the Azure Portal, 365 and other services.
When users authenticate into your corporate intranet or web based applications, Microsoft Entra ID (formerly Azure AD) offers an identity and access management service.
There is a default sign in page which all Microsoft customers experience when logging onto the Admin portals, 365 services, third party apps or your own apps. Below is what the default sign in experience looks like for all customers. However, we can change this default look and that’s what I will be covering in this post.
Why change the custom default page?
- You’ll be able to create a custom look and feel for the default sign in page. This ensures that users encounter a familiar and visually appealing interface when logging in.
- A customised branded page helps users identify legitimate login prompts. When users encounter a familiar and consistent interface, they are less likely to fall for phishing attempts that mimic the default login page. Attackers often create fake login pages to steal credentials, but a branded page reduces the effectiveness of such attacks.
- A well designed branded login page instills trust and confidence in users. When they see your organisation’s logo and branding, they feel more secure during the authentication process.
- The default login page might appear generic and impersonal. In contrast, a branded page provides a reassuring and professional experience. Users are less likely to be anxious or suspicious when logging in, which contributes to a positive security posture.
Is Entra ID Company Branding Free?
No, this is a licensed feature and requires one of the following licenses at the time of writing this post. Entra ID P1/P2, Microsoft 365 Business Standard or SharePoint (Plan 1).
Can anyone in my organisation configure company branding?
The Organisational Branding Administrator role is the minimum role required to customise company branding. If you have a team of people in the organisation who look after the Entra branding page, following least privilege, it would make sense to assign them the Organisational Branding Administrator role.
Configure Company Branding step by step
Let’s go through the process and explore what we are able to customise.
1. Login to entra.microsoft.com or portal.azure.com. I’ll be accessing branding via entra.microsoft.com
2. From the left pane, expand Identity > User experiences and click Company branding
3. Click default sign-in experience
4. Click customize
5. It is important to note that we are only able to upload images of a certain size. Let’s go through the options one at a time.
Starting with favicon.
A favicon is the image which appears in the browser tab, to the left as shown in the image below.
We could change this favicon as shown in the image below.
6. Scroll down and we are able to change the page background colour of the login page from blue to a colour of your choice.
Page background color
7. Click next to move to the Layout tab
Visual Templates
Here you can decide the layout of the login experience. By default, the Sign in box appears in the middle of the screen. We can also hide the default footer links as shown in the image below. More on footer links later.
On the same page we have the option of custom CSS
A new feature introduced in July 2023 allows you to upload a CSS (Cascading Style Sheets) file. You can customise self-service password reset (SSPR), footer hyperlinks, browser icon, style sign-in experiences and enable header and footer using one of the pre-defined templates. Using a custom CSS allows you to change the colour of links, colour of buttons and more. Microsoft offer a free CSS template which you could upload or change as per your requirements. The free template is available at the following Microsoft Learn link, CSS reference guide for customizing company branding. The benefit of uploading a CSS is that you have the capability to change the complete default login experience which was not previously possible.
8. Click next to move to the Header tab. Here you can add a header. A logo is displayed in the header of the Microsoft Entra ID sign-in page when users sign-in. See images below.
9. Click next to move to the Footer tab
If you have decided to hide footer links, you won’t be able to add custom footer links. Enable footer links via the layout tab we visited earlier.
Here we can replace the default footer links by adding custom Privacy & Cookies and Terms of use links.
The links appear in the footer as shown below.
10. Click next to move to the Sign-in form tab
Banner logo
This option replaces the Microsoft logo icon as shown below.
Microsoft logo replaced with a custom Cloud Build logo as shown in the image below.
11. Square logo (Light theme) and Square logo (Dark Theme)
Light theme
The square logo is used to represent user accounts in your organisation, on Microsoft Entra ID web UI and in Windows. An image showing what this experience looks like is available below.
Dark theme
If configured, this image will be used instead of the Square logo (light theme) image in combination with dark backgrounds, such as Windows Microsoft Entra ID Join screens in the out of box experience. If your logo already looks good on white and on dark blue/black backgrounds, there’s no need to configure a separate dark theme logo.
Logo shown below
12. Whilst on the Sign-on forms tab we have two further options, username hint text and sign-in page text.
Username hint text
The text that appears before a user enters their information. Using the username hint text assists users in your organisation who may have forgotten the format of their username. If guest users sign-in to your apps, Microsoft recommend that you do not set this option.
Sign-in page text
Appears at the bottom of the Microsoft Entra ID sign-in page and in the Microsoft Entra ID Join experience on Windows. Use this to convey instructions, tips, etc to your users. Anyone can see your sign-in page, so don’t put sensitive info here.
13. Finally, the remaining option on the sign-in form tab is self-service password reset.
This option enables the Forgot my password link under the password field as shown in the image below,
If we were to disable the option Show self-service password reset, the Forgot my password option will no longer be visible as shown in the screenshot below.
We could also change the Forgot password link text or redirect it to a different url as shown in the images below.
Common url
Customises the destination URL of the ‘self-service password reset’ hyperlinks in the username collection and password collection screens. If configured, a custom destination URL will be used instead of the Microsoft default value. In the example above, I changed the url to https://cloudbuild.co.uk/testlink
Account collection display text
Customises the display text of the ‘self-service password reset’ hyperlink on the account collection screen. If configured, a custom destination URL will be rendered instead of the Microsoft ‘Can’t access your account’ default value.
Password collection display text
Customises the display text of the ‘self-service password reset’ hyperlink on the password collection screen. If configured, a custom destination URL will be displayed instead of the Microsoft ‘forgot password’ default value. In the example above, I changed the text to ‘test forgot password’.
14. Browser language customizations
Browser language customizations will allow you to create a personalised sign in experience for a subset of end users based on their browser language. The browser language customizations option will override the default sign in experience. The process for customising the experience is the same as the default sign in experience process, except you must select a language from the dropdown list in the Basics section.
If browser language customisations are not configured, all your users see the same sign in page. However, if you have users logging in from a different country and using a different language, the sign in page will automatically default to their browser language customisation profile if one exists.
The customised branding sign in page appears only after the user types their email and clicks next, is this by design?
Yes, but as per the instructions below, it is possible to change this behavior.
More info available at the following Microsoft Learn link, Home Realm Discovery policy
And that’s it. Remember that you can customise the colour of the buttons, link colours and more by uploading a CSS file as mentioned in step 7 above.
Thanks for reading. See you at the next post.
