Microsoft Entra ID
A Microsoft Entra identity service that provides identity management and access control capabilities. Replaces Azure Active Directory.
24,509 questions
Customizing Azure AD B2C Sign-In/Sign-Up UI Beyond Basic Styling — Best Practices?
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(166.4, 92%, 26%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EHC%3C/text%3E%3C/svg%3E)
Harshal Choksi
0
Reputation points
Hi,
I would like to customize the Azure AD B2C Sign-in and Sign-up user interface to match a specific design (similar to what I have attached below).
I have gone through the documentation provided by Microsoft, and from what I understand, the customization is largely limited to modifying the styles of existing elements — without much flexibility to rearrange elements like moving Social Login buttons to the top, etc.
While I realize that it may be possible to override individual elements using CSS (targeting specific IDs or classes), is there any other official or recommended way to achieve deeper UI customization in Azure AD B2C? Additionally, I want the final UI to be responsive and render well across all device sizes.
Are there any best practices, alternative approaches (like custom HTML templates, newer guidelines, or UX libraries), or examples that allow more flexible UI control within Azure AD B2C?
Any suggestions or insights would be highly appreciated. Thanks!
Microsoft Entra ID
{count} votes
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(35.2, 30%, 13%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EGP%3C/text%3E%3C/svg%3E)
Goutam Pratti 4,720 Reputation points Microsoft External Staff Moderator2025-04-28T15:12:14.2733333+00:00 Hello @Harshal Choksi ,
I understand you're looking to customize the Azure AD B2C Sign-In/Sign-Up UI beyond basic styling. To achieve deeper UI customization in Azure AD B2C, beyond what basic CSS styling allows, consider the following best practices and approaches:
- Custom HTML Templates
You can create your own HTML pages and integrate them into Azure AD B2C. This gives you greater control over the layout, structure, and overall design of the UI elements. - JavaScript Customization
Azure AD B2C supports JavaScript within custom policies. By using JavaScript, you can dynamically interact with UI elements—such as showing or hiding specific components based on user actions—and communicate with your application to adjust the experience accordingly. - Embedded Experiences
Another option is to embed the sign-in or sign-up experience within an iframe in your application. This allows you to customize the layout and styling of the surrounding elements while seamlessly integrating Azure AD B2C into your app’s UI.
For detailed guidance, refer to the following documentation:
Customize the user interface of your Azure AD B2C application
I hope this information helps! If you have any further questions, feel free to reach out — we're happy to assist you further.
- Custom HTML Templates
-
Goutam Pratti 4,720 Reputation points Microsoft External Staff Moderator
2025-04-29T14:38:53.9633333+00:00 Hello @Harshal Choksi ,
following upto see if the above suggestion is helpful. let me know if you have any additional queries. Happy to assist you further.
-
Goutam Pratti 4,720 Reputation points Microsoft External Staff Moderator
2025-04-30T13:03:06.5566667+00:00 Hello @Harshal Choksi ,
following upto see if the above suggestion is helpful. let me know if you have any additional queries. Happy to assist you further.
Sign in to comment
Sign in to answer