How to add a link to offer an alternate route in Azure B2C custom policy

Question

I've followed one of the provided samples to add TOTP multi factor authentication supported by a phone app: https://github.com/azure-ad-b2c/samples/tree/master/policies/custom-mfa-totp

I'm therefore able to offer users the ability to enter a TOTP code:

One of the things I'm considering is ensuring users still have access to their accounts if something goes wrong during the TOTP MFA process which we're using by default. I'd therefore like to be able to add an extra link to this page to send users through an alternative MFA route without successfully completing this one in case they encounter issues: "send a code via email instead".

As far as I can tell, the B2C screens expect users to only go forward through clicking continue. The best alternative instead of a link I can think of is a checkbox which sets a boolean claim to enable an email MFA OrchestrationStep. I find this a little less user-friendly than a simple link though as it adds an unnecessary extra click.

Ideal user flow: Login --> Display TOTP MFA screen --> Enter MFA code OR click link to go to email MFA screen

Any help's appreciated!

question from:https://stackoverflow.com/questions/65833195/how-to-add-a-link-to-offer-an-alternate-route-in-azure-b2c-custom-policy

Answer 1

This sample demonstrates how to use a display control to provide multiple options (Email or MFA) for a user to continue: https://github.com/azure-ad-b2c/samples/tree/master/policies/pwd-reset-via-email-or-phone

You could use the same idea here, except instead of invoking the MFA technical profiles as part of the samples display control, you can invoke the call to the REST API technical profile to verify the code.

You will need to use some CSS/JS to make the page look nice so users can toggle what option they want to use.