Adjust email verification user interface in AzureB2C custom policies - azure-ad-b2c

Question

My custom policies for AzureB2C is based on this example:
https://github.com/azure-ad-b2c/samples/tree/master/policies/split-email-verification-and-signup
This splits the email verification from the actual sign-up and provides a better user experience.
I would like to remove the third page in the email verification flow as you can see in the image from the page above. (It's the one with the 'Change email' button)
Is there a way to achieve this?
I research in the official documentation and a lot of examples but did not find a solution yet :(
I'm thankful for any hint in the right direction.
Karin

Answer 1

• You can try hiding the change email button or to be more appropriate, remove that entry from the html page file that contains this entry, most probably ‘selfAsserted.html’. Please find the below entry in your CSS page and modify it to hide the associated HTML elements or remove them to omit the ‘change email’ page and continue to the user signup details page.
' <style type="text/css">
.changeClaims
{
visibility: hidden;
}
</style> '
The default name of the Change email button in selfAsserted.html is changeclaims. To find the button name, on the sign-up page, inspect the page source by using a browser tool like Inspect.
• The removal of the ‘changeclaims’ entry in the page source HTML file will directly redirect the user to the user details fill up and sign-up page.
Please find the below link for more information: -
https://learn.microsoft.com/en-us/azure/active-directory-b2c/add-password-reset-policy?pivots=b2c-user-flow
https://learn.microsoft.com/en-us/azure/active-directory-b2c/customize-ui-with-html?pivots=b2c-user-flow

Answer 2

The answer from #KartikBhiwapurkar-MT pointed me in the right direction to solve my problem.
I don't no why but adding
<style type="text/css">
.changeClaims {
visibility: hidden
}
</style>
to my selfAsserted.html and unified.html did not work. In my case the name of the "Change email" button in selfAsserted.html and unified.html was not changeclaims. I had to use the CSS id of the button which was "email_ver_but_edit".
#email_ver_but_edit {
visibility: hidden;
}
I advice everyone to inspect their html page with some Inspector tool of your favourite browser. If you are doing iOS app development and you want to inspect the webpage on your iOS device, you can do the following:
On you iOS device open the settings page
Tap on "Safari"
Scroll down to "Advanced"
Enable "Web Inspector"
Now connect your iOS device via USB cable to your Mac
Open the web page you want to inspect on the iOS Device
Open your Safari browser on the mac
Go to menu "Developer" and look for a menu entry with the name of your iOS device.
Here you should see an entry which opens up the inspector on the Mac and let you inspect the page on your iOS device.
Thank you Apple for this feature. It saved me a lot of time.