I want to create a wizard style approach during signup not post login ideally with universal

Get Help
,
1

In my scenario, during signup I want to validate my user’s email, username and telephone number against business rules in my API BEFORE their account has been created. This includes whether they have an existing social/email account .

The email and telephone should be validated to see if they are real (email proof, telephone text code). Users could potentially log in with social accounts whilst having done an email/pw or forget and try to signup again so this is designed to intercept them rather than creating multiple accounts. I also want to capture first and last names so that when the account is created it is already populated.

I don’t want to do this post-login as a data enhancement as that is too late and auth0 has then created an account in the db. I need it to call my APIs after each wizard stage. The final call to my api will then create the account in the database with the validated username/firstname/lastname/telephone/email.

I experimented with adding extra fields/api call using forms but these only seem to work with the post-login. My android application receives an incomplete jwt token for a partially set up user then would have to redirect back again which also caused concurrency problems. I know I could add an additional “Profile_incomplete” flag but this feels like a hack because the front ends all then have to be coded to handle it rather than being presented with a complete and validated user.

The only option I see for doing this in a nice way is a wizard within the classic but that seems really difficult to get styling right for. I have an android/ios/web site so need this to work the same across all. Is there a handy code library to match the universal style as a wizard but in classic? Currently my attempts to style have looked horrible but if that is the only way I will put more effort into understanding the css better.

Given the flow chart below can I achieve what I need?

Thank you!

image
image580×1254 26.2 KB

3

Hi @zebslc

The matter you have presented is quite a complicated one and presents some issues with the implementation.

Firstly, in order to verify an user’s email, phone number and username on signup, you can enable all of these attributes within your Auth0 Database by going to Authentication → Databases → {{YOUR_AUTH0_DATABASE}} → Attributes. You can configure both the the phone and email attributes to be required on signup and to verify them on signup. Please take note that for the email attribute you need to verify it using OTP otherwise the user will be able to sign up without verifying the email using Verification Link. Once you have completed these steps, the users will be asked to verify both elements on signup. In order for you to be able to do this, you will need to set the Authentication Profile to Identifier First.

Regarding including the first name and last name of the user while signing up, you should be able to do this using a PostLogin Action via a Form or add the respective partials to the signup prompts. To learn more about partials and how to add those fields, please review our documentation on the matter.

The main issue that you would experience with such an implementation is when the user is logging in using a social or enterprise connection. For these users, the email will be considered verified on signup and will also bypass the phone verification if the attribute is missing from their profile. In these cases, you would either to implement a custom form which is rendered whenever a user signs up through those specific connections and verify the email and phone number through the forms. It would look something like this:

if(event.connection.strategy == '{{SOCIAL/ENTERPRISE_CONNECTION_NAME}}{

     api.prompt.render('{{FORM_ID}}');

}

Unfortunately, you are unable to check the login count for these users and I would recommend to assign user metadata to these sign ins using a PostUserRegistration Action:

if(event.connection.strategy == '{{SOCIAL/ENTERPRISE_CONNECTION_NAME}}){

        api.user.setUserMetadata("first_login", true);  
 
}

Otherwise, if can also verify these elements by enforcing MFA through sms and email otp on signup in the same matter:

if(event.connection.strategy == '{{SOCIAL/ENTERPRISE_CONNECTION_NAME && user.user_metadata.first_login == true}}){

        api.authentication.challengeWith({ type: 'email/sms' }); 
//update user metadata as seen in the post below to set first_login to false

}

Update user metadata

I would recommend reading our documentation regarding customizing MFA.
Unfortunately, you aren’t able to challenge the user with both of these MFA methods and the in the case of the phone number, it will not be assigned to the user profile only under the guardian_authenticators value and it will be censored. I would recommend to use the Forms approach regarding this matter.

If you have any other questions, let me know!

Kind Regards,
Nik

1 Like