Azure AD B2C - Custom template - rely on injected element IDs in JS

Question

I'm having a signup page in AD B2C with custom template and standard User flows.
I needed to add some extra UI logic, to hide and show some buttons in different stages of form completion.
For example I would initially hide the main "continue" button, and only show it after code verification has succeeded.
I managed to do all of this with custom JS and JQuery and it works well.

But to achieve this, I rely on the visibility state of some Azure injected buttons, which I identify by id.
For example I look with JQuerry for buttons with IDs like "emailVerificationControl_but_verify_code" or "continue" and operate on them.

So the question is how safe is this approach on the long run. Can we rely on the fact that the IDs of those buttons will not change in time (breaking our logic)?

Thank you,
Vasile

Answer 1

Hi @VasiT • Thank you for reaching out.

In the string ID emailVerificationControl_but_verify_code, but_verify_code is a fixed string. A list of all the strings used in B2C is provided in the Localization string IDs document. At the beginning of this string ID, attribute/claim ID emailVerificationControl is added as a prefix. In the case of user flows, this value is predefined and is not configurable.

In case of Custom Policy, this prefix is based on the email Claim ID that you can change in the claims schema section of your custom policy files. That means, if the email claim is changed to email1, the string ID will change to email1_but_verify_code

The string for the continue button cannot be changed in either user flows or custom policy.

-----------------------------------------------------------------------------------------------------------

Please "Accept the answer" if the information helped you. This will help us and others in the community as well.