1

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

Md. Fazlul Hoque
  • 15,806
  • 5
  • 12
  • 32
Pepper
  • 194
  • 11
  • That’s not a page, it’s just how the email verification widget changes. https://stackoverflow.com/questions/59960579/azure-b2c-remove-change-email-button-from-verification-step. You can use JavaScript to auto submit the page too. – Jas Suri - MSFT Oct 10 '21 at 09:02
  • @JasSuri-MSFT., can you point to an example of how to auto submit the page? I've asked a question https://stackoverflow.com/questions/76515868/how-to-add-javascript-event-handlers-for-action-completion-in-b2c-emailverificat – Michael Freidgeim Jun 21 '23 at 03:02

2 Answers2

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

Kartik Bhiwapurkar
  • 4,550
  • 2
  • 4
  • 9
1

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.

Pepper
  • 194
  • 11
  • 1
    I do the same in my css code, it hides change button but not remove the page!! – Nicolas Mar 02 '22 at 18:47
  • @Nicolas My solution only removes the "Change email" button and not the whole page which was fine for me so the user gets a confirmation that the verification was successful. – Pepper Mar 31 '22 at 10:50