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

[@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

[@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?

[@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

[@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

[@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!

[@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 !

[@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.

[@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.

[@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

[@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.

[@julianv810]

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

[@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.