Azure AD custom login page

Question

I have gone through this link for customizing the user login page in Azure AD, but on one documentation page, microsoft have shown login page like this

How can we achieve this?

Answer 1

The page you've linked to ( link ) walks you through how to set up a custom design and associate that to your B2C journey.

You need to write your own HTML page(s) and CSS then host that yourself along with any images, fonts, etc just like you would with a normal web page, we normally refer to those as page templates.

You also need to specify in B2C that your policies will use those page templates when it's rendering its own pages for your users and the linked page walks you through that. Your page templates will need a specific element in them ( <div id="api"></div> ) that B2C will insert its content into (based on your B2C policies) when it renders its pages using those templates.

In the example you've shown in your screenshot there will be a HTML page that has that image set as its background (likely using CSS) and a white box in the center for B2C to insert its content into. It will then use CSS (and maybe some Javascript) to style the content B2C inserts onto the page.

If you want to see exactly how that page is built you can go to the Woodgrove Demo site, sign in with your personal account and that will take you to that page which you can then inspect in your browser.

If you have your browser's.network window open when you sign in with your personal account then you should see B2C loading that page template from somewhere after its initial page load. That's because it then uses Javascript to combine that template with its page content to render the final page.