How to Customize UI with HTML in Azure AD B2C | Azure | LSC

[@TheAcv1]

Nice tutorial, thank you so much! How to use javascript in the custom html?

[@learnsmartcoding]

Thank you for the kind words. You can either place the script 5 the html page you use it or keep it separate and give the link in the html. Either way, it works.hope this helps.

[@aniketpihulkar5141]

Hi, In Password reset flow can we eliminate or hide change email button ?

[@learnsmartcoding]

Hi, I verified the forgot password flow here lsc-table-booking-app-web.azurewebsites.net/ and I did not see any such (change email) option. could you please explain the scenario a bit more? Also, here is the latest version for the custom UI kzbin.info/www/bejne/kHeYi6aAd9VoaqMsi=MrnesaxPYpiAWP9w I have provided the complete code sample for new custom ui. hope it helps. happy coding!

[@aniketpihulkar5141]

@@learnsmartcoding Thanks for the reply, I sent you a mail where details flow is mention.

[@learnsmartcoding]

Thank you. I have responded to your query.

[@Talk378]

The CORS tip saved my bacon

[@learnsmartcoding]

I am glad it helped you ☺️

[@syednoushad7800]

Hi. To display the customized ui in an HTML seems clear , if I use the same method in the react app not working. Used the same Can you please help me how it can be done

[@learnsmartcoding]

Hi Syednoushad, This custom HTML template in AD B2C screen are nothing related to which tech stack we use. Be it Angular, React or any other technology. So, after following my video if something is not working, please take a look at the console window in developer tool (Press F12 in windows, or go to browser option and open dev tools). The error there will explain what is missing. Also, you can run the app from Portal itself to just test this screen. Hope this helps to troubleshoot. Happy coding!

[@jyotiyadav7112]

Were you able to customize UI using React? If yes, I need assistance for the same.

[@jyotiyadav7112]

@@learnsmartcoding can you help?

[@learnsmartcoding]

Hi jyoti, Thanks for reaching out. Implementation is almost the same. Only the way it hooks up with the react app might differ. I don't have a solution handy, but I will make it available soon

[@DanSau-vb1ck]

do you have on-hand A2C tutorial but only to fully creat custom claim policies instead of Flows ? i use MSFT templates but have to remove a ton of facebook references if i do not want to include facebook provider ,etc.. need to learn from you. give me the link please...

[@learnsmartcoding]

Hi Dan, Thank you for asking a question. If you are referring to a custom policy instead of using an existing user, I don't have any video for that yet. However, you might be interested in this video. kzbin.info/www/bejne/jpfWf6iEaNCmm6ssi=tUTQ9IAQNvyAiTNN Please let me know if you have any questions. Hope I answered your questions.

[@MahirSingh-lm4rr]

Can you please help me in adding the Remember Me functionality and I am working in angular so please help me this as I am not able to get this functionality working

[@learnsmartcoding]

Hi Mahir, Try the below steps. 1. Go to Azure B2C tenant. 2. Click on Company Branding 3. Click on default one => opens the property 4. You should see "Show option to remain signed in" Check this and save it. Try the app and you should ideally see the option. Sometimes it takes several minutes to reflect this on UI, so please wait for some time if this is not reflected immediately. Hope this helps. Happy coding!

[@learnsmartcoding]

Hi Mahir, I just did that to my app and it is showing up. check this link and click on Login from Action menu, lsc-table-booking-app-web.azurewebsites.net/ Happy coding!

[@ameerali4784]

As you told in the video, how to customise the CSS of input field which is noy actially present in the web site, it injecting by Microsoft. how to target the element by css thanks advance

[@learnsmartcoding]

Hi Ameer, will publish a new video on how to do this and more information for starters.

[@ameerali4784]

​@@learnsmartcoding Thank, Expecting it soon

[@learnsmartcoding]

@@ameerali4784 - Here is the latest video with complete code sample for Custom UI. kzbin.info/www/bejne/kHeYi6aAd9VoaqMsi=MrnesaxPYpiAWP9w Hope this helps

[@gsandeep069]

Hi, how can we change the default ones for an IEF?

[@learnsmartcoding]

Hi, Could you please elaborate what exactly you wanted to achieve? What do you mean IEF?

[@gsandeep069]

@@learnsmartcoding Due to some dependencies I have to use Identity Experience Framework policies instead of Userflows. And I am getting the simillar UI when I use IEF policy that you have in userflow. There is a h2 tag “Sign in with your SignIn Name”, and I wanted to remove it. So looking for your help on that.

[@learnsmartcoding]

Hi, Any HTML that is injected by Microsoft cannot be removed. Due to security, the code is further handled by Microsoft. If you want to customize, you should create your own SignIn flow. That is called custom policy. Hope this helps to proceed.

[@alexanderdeyto3208]

Would it be possible if you can share all the codes (html,css,js) for all pages you changed? Thanks

[@learnsmartcoding]

Hi Alexander, These files I showed in the demo are licensed files so you can use any free versions from the internet. Below link is the free version E.g. startbootstrap.com/previews/sb-admin-2

[@daddy_girl_dhakshu]

how to hide defult UI like Emil address field, password field in azure b2c

[@learnsmartcoding]

Hi, Thanks for watching the video. For ad b2c, the main part is emailid and password as it is customer provided input. Why do you need to hide those? Please explain bit more on your ask to help you better. Hope this helps

[@daddy_girl_dhakshu]

@@learnsmartcoding I need to customise entire page but showing duplicate entry input appears that why, plz help on this

[@learnsmartcoding]

@@daddy_girl_dhakshu There is a way to build custom UI for AD B2C. It is called custom policy. "Custom policies are configuration files that define the behavior of your Azure AD B2C tenant user experience. While user flows are predefined in the Azure AD B2C portal for the most common identity tasks, custom policies can be fully edited by an identity developer to complete many different tasks." Here is the documentation. learn.microsoft.com/en-us/azure/active-directory-b2c/user-flow-overview I currently do not have such example in my channel but you can refer this document to build custom UI for AD B2C Hope this helps

[@ricky-i8z]

Hey sir Can you please provide the HTML and css Thanks

[@learnsmartcoding]

Hi Pandat, Thank you for watching the video. Here is the latest video with complete custom ui code. kzbin.info/www/bejne/kHeYi6aAd9VoaqM After going through it, please let me know if you face any challenges in implementing.

[@rickgamingx1464]

Can you please provide this HTML sir

[@learnsmartcoding]

Hi Rick, Thank you for watching the video. Here is the latest video with complete custom ui code. kzbin.info/www/bejne/kHeYi6aAd9VoaqM After going through it, please let me know if you face any challenges in implementing.

[@AnnexusGroup]

@11:27 looks absolutely atrocious! You are clearly a developer, not a designer. I'm sorry, but that is the truth.

[@learnsmartcoding]

Hope you liked it. The idea of this video is to help understand how to bring our own css. I have another video for custom ui where I fixed all of these css issues. I will provide you with the video link to check.