How to Create a Custom Azure AD B2C Login Page (and Why You Should)

Azure AD B2C tutorial series is all about elevating your user's sign-in/sign-up experience. Learn how to create a customized authentication journey with free Bootstrap HTML templates or design your own pages that align perfectly with your application's branding.
We'll walk you through the process of hosting these tailor-made pages on Azure Storage for easy accessibility. Delve into the world of Azure AD B2C custom UI, where you have the power to shape the login and signup pages to reflect your app's identity.
Discover the secrets of configuring Cross-Origin Resource Sharing (CORS) to ensure seamless integration of your Azure B2C custom UI. To add the cherry on top, we'll showcase the impact of these personalized pages in action.
Join us on this journey to provide a unique and delightful authentication experience for your users using Azure AD B2C Custom UI.
Don't forget to like, subscribe, and share our #B2C and #AzureTutorial series!
Repo:
github.com/lea... (Angular 16)
github.com/lea... (API)
github.com/lea... (function)
github.com/lea... (Custom UI files in angular project)
Please post your questions in the comment section and I will be happy to answer your questions.
Subscribe for more useful videos just like this: / @learnsmartcoding
Happy coding!

[@pedroazevedo1666]

Hello, thank you very much for the video! I have a question: I understand that we shouldn't modify anything inside ``, but I need to make some changes to the UI. For example, I designed my layout based on Blue Ocean, but I need to add a label above the inputs. I don't want to create a new policy just for that. Do you have any solution to handle this?

[@learnsmartcoding]

Hi, thank you for watching the video. Yes, we can do that if it's just simple changes. Programmatically we can add the labels to the rendered html using Javascript.

[@nilokillian]

Sign up page is not working. It seems it needs to be the same approach as for Sign In where has to be in place and the rest is injected

[@lukaspfeiffer179]

Is it just me who does not find the "vendor" folder in the repo which is listed everywhere in the signin.html?

[@learnsmartcoding]

Hi, The custom UI files are located here github.com/learnsmartcoding/lsc-restaurant-table-booking-app/tree/main/src/Ad%20B2C%20SignupSignIn%20files Hope this helps. Let me know if you need anything specific.

[@lukaspfeiffer179]

@@learnsmartcoding E.g. looing for this one: vendor/font-awesome-4.7/css/font-awesome.min.css"

[@lukaspfeiffer179]

@@learnsmartcoding E.g. looking for this file: vendor/font-awesome-4.7/css/font-awesome.min.css"

[@lukaspfeiffer179]

which: /theme/js/global.js files is meant?

[@julianv810]

Thank you for you contribute, it´s very good.

[@BIT-VinothkumarP]

If is it possible to access blob storage file without blob anonymous access as public in User flow custom page URI

[@learnsmartcoding]

Hi Vinoth, Thank you for your question! Azure AD B2C requires custom page URIs to be publicly accessible (anonymous) because Azure needs to load the page, inject its own content (like the login form and scripts), and then serve it to the user for the authentication process. This is a necessary requirement for the custom page functionality to work properly in Azure AD B2C user flows. If you make the blob storage file non-anonymous, Azure AD B2C won't be able to access the page, as it does not support authenticating against private resources for this purpose. Why do you need a non-anonymous level for the custom page? Custom pages for Azure AD B2C are typically designed to serve login or other user flow-related content, which inherently requires public access. If you're trying to achieve something different, like user-specific content, here are some approaches you could consider: Use Cases for Private Blobs: User-Specific Content: If the page is intended to serve personalized content for authenticated users, you can use Azure AD B2C for authentication. After the user logs in, your application can fetch a token and use that token to generate a SAS URL for accessing the private blob. Restricted Access Resources: For scenarios where only authenticated or authorized users should access the content, you can protect the blob with a SAS token or API gateway that verifies the user's identity and then serves the resource. Dynamic Custom Page Requirements: If you're exploring dynamic custom page content, such as user-specific theming or localized data, consider embedding such logic within your application after the login process is complete instead of in the Azure AD B2C custom page itself. Can you share more details about why you want the custom page to be private? I’d be happy to provide guidance tailored to your scenario. Best regards, Karthik Learn Smart Coding

[@BIT-VinothkumarP]

@learnsmartcoding If possible can you share that Azure Customized code alone in Front end in all even their label container height as well button as all one need to change like wise can you provide that link

[@learnsmartcoding]

All the source code is here in the below link (repo in github), just follow the video to get the custom UI working. github.com/learnsmartcoding/lsc-restaurant-table-booking-app/tree/main/src/Ad%20B2C%20SignupSignIn%20files

[@BIT-VinothkumarP]

@@learnsmartcoding I am getting this error while contains script errors preventing it from being loaded. I done all steps correctly but i get this error

[@learnsmartcoding]

@BIT-VinothkumarP hi viboth, can you email me the error details and screenshot to help me to assist you better

[@msmvprasad]

That is interesting. If I am inviting external users to AD as guests for login from various tenants can I customise the logo or color according to the other tenant? Company?

[@learnsmartcoding]

Thank you for watching and for your question! Yes, you can customize the Azure AD B2C login experience for guest users as well, but with some limitations. Azure AD B2C allows you to modify the branding of the login page (such as the logo, colors, etc.) using custom HTML and CSS, just as I demonstrated in the video. However, dynamically changing the branding (logo or color) based on the user's tenant or company isn't natively supported in the standard user flow. Azure AD B2C treats all users, including guest users, the same when it comes to applying custom branding. The same page will be presented to all users unless you're using custom policies (Identity Experience Framework), where more advanced scenarios are possible. Potential Solutions: Custom Policies (IEF): If you're comfortable using custom policies, you can add logic to detect different conditions (such as the domain or tenant of the user) and dynamically apply branding based on those conditions. This would allow you to show different logos or themes depending on the tenant. Separate User Flows: Alternatively, you could create separate user flows for different tenants or partners, each with its own branding. You'd then redirect users to the appropriate user flow based on their company. If you're interested in custom policies or want to explore these options further, feel free to ask, and I'll be happy to guide you through it! Best regards, Learn Smart Coding

[@theile1337lol]

Hey for me the CSS and custom style is loaded but the page is not fuctional. I do not get an error and when I click submit nothing happens. Is there a way to display the error?

[@learnsmartcoding]

Hi, Thank you for watching the video. You could see errors in the developers' tool console, for windows press F12. If you don't find any error, I suggest repeat the step as per video and see if you missed any steps. Please let me know how it goes.

[@theile1337lol]

@learnsmartcoding I will check again. The html content is coming from a next js server component page, could this be a problem?

[@anu-b3n1s]

Hi I dont have access to storage accounts. how can I proceed without it. shall I create custom html page and add its url in the page layout section

[@learnsmartcoding]

Hi Anu, The custom HTML page is internally invoked by b2clogin.com when user attempts to login, so the custom html page should be accessible from a deployed place. It could be kept in public serving URL. Also, CORS should be allowed. As long as this is satisfied, it will work without storage account. if you want to use storage account only for this custom login pages, it wont incur more cost. Hope this answers your question. Please let me know if you have any other questions. Happy coding!

[@nikkhil04]

Hi, For me I injected div id= api after the logo. I don't see the username/password input. All I can see is Sign in with your existing account and then a button for 'forgot your password'. Why are the username/password controls not being injected?

[@learnsmartcoding]

Hi Nikhil, Thank you for watching and trying out this feature. Please verify the source code (right click => view source) to see the required div tag with the correct id Is first present. Let me know what you find

[@kushjohri3104]

Hi There What i want to do is if the user is not found on the tenant while signing in , i want them to go to signup directly, how can we do that ?

[@learnsmartcoding]

Hi Kush, To redirect users to the signup page directly when they are not found during the Azure AD B2C sign-in process, you can utilize custom policies. Important Notes: This approach requires some knowledge of Azure AD B2C custom policies and XML configuration. Azure AD B2C custom policies allow for more flexibility compared to built-in user flows, but they can be more complex to set up. Summary: To achieve the desired behavior of redirecting users to the signup page when they are not found during sign-in, you will need to implement custom policies in Azure AD B2C. This allows for a seamless user experience where users can quickly transition from signing in to signing up without confusion. Hope this helps.

[@kushjohri3104]

@@learnsmartcoding Thanks for your reply , is there no quick workaround with custom HTML and JS that i can leverage , i dont want to end up using custom policies as they introduce a certain level of leaks in the tenant and can be exploited. So was looking for something quick , maybe just a signup button on the sign in page that can take users to the signup flow Any advice here ?

[@learnsmartcoding]

Thanks for your follow-up! If you prefer a quicker workaround without delving into custom policies, you can certainly add a signup button on your sign-in page. Quick Workaround: Add a Signup Button: You can customize the HTML of your sign-in page to include a 'Sign Up' button. JavaScript Redirection: Use JavaScript to check the user's input when they attempt to sign in. If the credentials fail (you can do this through the Azure AD B2C API response), you can display a message encouraging them to sign up and redirect them to the signup flow. URL for Signup: The signup flow can be triggered via a direct link to your Azure AD B2C signup page, which you can set up similarly to your sign-in page. Example: Here’s a basic example of what the button and JavaScript might look like: Sign Up document.getElementById('signupBtn').addEventListener('click', function() { window.location.href = 'your-b2c-tenant.signup-url'; // Replace with your signup URL }); Benefits: No Custom Policies Needed: This method avoids the complexities and potential security concerns of custom policies. User-Friendly: It provides users with a clear pathway to sign up if their sign-in fails. This approach should give you a simple and effective solution for guiding users to sign up while maintaining the security of your Azure AD B2C tenant. Try it out and let me know if it works for you.

[@kushjohri3104]

@@learnsmartcoding Let me give this a try , will update here with the results . Thanks for your help though !

[@CGRealStudios]

How do you implement this into the default react app page

[@learnsmartcoding]

Hello, the implementation of custom ui is the same across any tech like angular, react, or Javascript. This is because the custom ui is made at the portal, not on applications. Hope this helps

[@iyad3456]

Hi, Do your files still working? I tried them after make specific changes for my case but I keep getting this error "/singin.html' contains script errors preventing it from being loaded. ". Thank you!

[@learnsmartcoding]

Hi Iyad, The content used to show in this demo is available in github repository. I might have brought down the storage account used in this demo. Please follow the exact steps shown in this video to make this work. Hope this helps Happy coding!

[@coderpump792]

Can only the CSS be modified? Currently, I'm unable to change the HTML. I cannot make any changes to the content rendered within the 'api' ID; only adjustments to the CSS are possible

[@learnsmartcoding]

Hi, You can have any HTML in your custom file. The only thing is as mentioned in the video, a div element with the specified id name should be present and this is the div used by b2clogin to inject the required fields as per your user flow. Hope I answered your question. Happy coding!

[@StevenTheGeek]

@@learnsmartcoding I think he's talking about overiding the html objects inside the Injected div with different html objects with the same element ID.

[@learnsmartcoding]

Thank you, Steven. Basically, the content inside the div produced by Microsoft should not be modified as it will be rejected by Microsoft domain. We should never modify. Instead, we can have our own customs that can eventually have our own html built. Hope this helps our viewers on this concept.

[@jyotiyadav7112]

Can you provide the css code changes you made to enhance the look of sign up page?

[@learnsmartcoding]

Hello JyotiYadav, The Custom Login complete files are placed inside UI repo and the link is provided below. github.com/learnsmartcoding/lsc-restaurant-table-booking-app/tree/main/src/Ad%20B2C%20SignupSignIn%20files I hope you liked the video, share with other so it is useful for more developers. Happy coding!

[@learnsmartcoding]

Hi Jyotiyadav, here is the file that has final css that make its beautiful look. github.com/learnsmartcoding/lsc-restaurant-table-booking-app/blob/main/src/Ad%20B2C%20SignupSignIn%20files/singin.html happy coding!

[@jyotiyadav7112]

@@learnsmartcoding yes this is what I was actually looking for earlier. I'll try this and get back to you in case I require anything else. Thank you so much!!

[@jyotiyadav7112]

@@learnsmartcoding also have you worked on custom policy?

[@learnsmartcoding]

Yes, It is recommended to use only when in-built policy is not suited for requirement. IT is for intermediate+ level.

[@andrewmooweek1367]

Is it possible to change title "Sign in with your email address". I don't know how becouse it's provided by ?

[@learnsmartcoding]

Hi Andrew, All the html/logic which is inside this div " " is injected by Microsoft. It is advisable not to touch it. There are 2 ways you can still make change. 1. Option 1: Creating our own custom policy and defining the html. Just for this kind of name change it is not worth spending time in custom policy. As per Microsoft recommendation, it is advisable to go for Custom Policy only when it is required and feature not available with inbuilt policies. 2. Option 2: Once the login/signup page is rendered we will know how the final html will be like and we can have our custom JavaScript to find such html element and change the value of some attributes. e.g. placeholder is an attribute we can change it to make it the way you want. Just consider why you want to make such change and then proceed with above options. Hope this helps. Let me know if you have other questions. Happy coding!

[@yonderrosales8883]

@@learnsmartcoding Is posible add the eye icon at the end of the password field to show and hide the password?

[@learnsmartcoding]

@@yonderrosales8883 - Yes, we can add using JS script. However, those HTML are injected by Microsoft AD B2C so ideally it is better not to touch it. we can also build custom policy that does these but it is not worth investing time for such small UI change.

[@sanjay-q5c6e]

Bro new project ah create in azure, angular, web api, tamil bro

[@learnsmartcoding]

Hello Sanjay, glad to hear about your interest. I am starting the e-commerce app in tamil and in english starting tomorrow. Here is the tamil channel link. Subscribe so you know when I post videos. www.youtube.com/@learnsmartcodingintamil/videos

[@learnsmartcoding]

Here is the new project roadway video. kzbin.info/www/bejne/mKS4Z4J_i5tjf6c We have all the new stuff , hope you are interested.

[@jayakumar2927]

I am facing some issue bro . can you clarify that

[@learnsmartcoding]

Hi Kumar, Please explain your issue and I will try to solve it ASAP.