How to display the customized signup page in Azure B2C tenant?

Question

I prepared custom HTML pages for user sign up and multifactor authentication. Then uploaded those pages into Azure storage blob.

Next I edited signup policy of Azure B2C tenant for user signup page customization, and paste storage blob URL of custom html page what I uploaded earlier into storage blob.

When I run the policy the browser will display the signup page like this below. But I made signup page and MFA page very nice. And added CSS content inside my HTML pages only.

How can I use customized signup or MFA pages instead of Azure B2C provided?

Answer 1

As pointed out by Harsh Aseeja, your page is already rendering the customized page. You need to check with the browser's dev tools to identify the css styling that took effect in your html elements. Since these elements are just injected in your page, check for element ids and its default css styling. Chances are, if you used classes to style your page, those will be overwritten by a default style for element ids.

You can try editing the css styling on the fly with the dev tools, and when your satisfied with your changes port them to your css file(Or the css inside your HTML page) and update the relevant files in your azure storage blob.

Answer 2

Seems like you are getting the customized HTML page instead of the generic Microsoft login page. You can use the dev tools in your browser to tweak the CSS to get the desired UX you want. Also you can add explicit CSS per input box or button to make sure that your CSS is being picked up and not being overridden by the CSS coming down from the Microsoft login page.