Our Azure B2C custom policy includes email verification during sign-up to combat spam accounts.
The default email verification process in B2C can be cumbersome as it requires users to complete multiple steps on the same form:
- Enter email.
- Send verification code.
- Enter verification code, resend the code, or change email address.
- Click button to verify code.
- Complete remaining sign-up fields.
- Click button to finish sign-up.
This all happens in ONE FORM, which can overwhelm regular consumers.
To improve the user experience, we have implemented the split email verification and sign-up user journey from the CIAM sample journeys project. While this has helped, there are still issues such as lack of guidance on each screen, disappearing and reappearing user controls, and confusion around button labels like "Continue" and "Cancel". We aim to simplify the process further and create a smoother UI.
One key improvement we need is the ability to customize CSS styling based on the user's current stage in the process. For instance, hiding the "Continue" button when the user is entering their email or verification code, and overriding B2C's default behavior of hiding controls during AJAX requests. Unfortunately, it seems that B2C's JavaScript system restricts access to these elements, making it difficult for us to identify the step the widget is at.
Is there a way to integrate with B2C's JavaScript to better understand its logic? Our goal is to set a "mode" data attribute on our page for reference in our stylesheets.