Azure B2C control layout of "api" injected html

Question

I am trying to find a way to control the injected "api" html that azure b2c injects when using a custom template.

I am aware of the ability to provide a custom template with either user flow or custom policy, however I need now to change the html of the azure b2c markup itself. For example, add a custom css class on the "sign in" button, change text on "sign in" button, place the forgot your password link elsewhere on the html fragment, etc.

Is this possible without hacking it with css and javascript? Can I define and control the html in a custom policy? I cannot find anything in the docs regarding this.

Answer 1

Currently there is no published document the elements since the form element that is injected in to the 'div api' element is dynamic based on your user flow or custom policy configuration. You refer this documentation

Here is the password element that we inject:

<input type="password" id="password" name="Password" placeholder="Password" tabindex="1" aria-label="Password">

If you configure a policy in B2C and then use the Run Now link, you can inspect the page with the browser dev tools to see all the element Id's that we insert into the page. When using your own custom attributes, the HTML element Ids are the name of the extension attribute.

This is general JavaScript code and not Microsoft specific. The behaviour maybe different in different browsers.

var myEle1 = document.getElementById("password");                    
var myEle2 = document.getElementById("signInName");                      
myEle1.setAttribute("autocomplete", "new-password");                 
myEle2.setAttribute("autocomplete", "new-password");

To change the text in those elements you can use localization string ID, you may refer this document. For signin button the Id would be button_signin