I’m trying to fully customize the registration page on Azure AD B2C. The goal is to break down the registration process into different sections or "cards," each of which contains various user attributes. Instead of displaying a long list of fields on a single screen, I’d like to separate them into different sections. For instance, the first card should ask the user to input their name, surname, display name, email, and password. After filling out these fields, clicking a "Next" button should reveal the next section with additional fields to fill in, and so on until the registration process is complete.
I’m wondering if it’s possible to achieve this level of customization in Azure AD B2C using JavaScript or jQuery. I have experience in C# programming but I’m new to using Azure AD B2C for access and registration management.
I would appreciate any advice, guidance, or suggestions on how to proceed with this customization. Thanks in advance!
2
Answers
One way to do this is to make each "card" a separate self-asserted technical profile.
So, each "card" will then be a separate screen.
One drawback is that you won’t be able to go back.
As mentioned, you’d need to make each "card" a separate self-asserted technical profile, something similar to the Split email verification and sign-up Azure AD B2C sample.
Although, a better approach to this, would be to use progressive profiling. There’s a community lab tutorial to follow setting this up step by step.
Note, in addition to the drawback that the user will not be able to go back as @rbrayb mentioned, once the user is created, they may not complete the additional fields but will still have an account to login (progressive profiling protects against this). Therefore, it is recommended leave the password screen to the end (so their profile creation is at the end, or check the profile is fully completed during sign-in also).