Email Verification with OTP Web Flow Template
Last updated
Last updated
This Web Flow template has pre-configured components that allow builders to pass a user’s email and send them a one-time password to provide them with a two factor authentication flow. From Activity Builder, this Web Flow can be tailored to offer a customized experience.
This Web Flow contains a Verify Email Web Page with the following components:
Two Label controls, one with the title and a second one with instructions.
A Text Input control for the user to enter their verification code.
A Label indicating the user to enter a valid code in case an invalid one was entered.
A Container control with two Button controls:
A Generate One-Time Password Code Data Flow that creates the verification code.
A Verification Code Send Email Data Flow that sends the code to the user via email.
A Submit Button that runs the Success Event
A Resend Button that triggers two Data Flows:
This Web Flow also contains the following configuration Variables:
These Variables can be set from Journey Builder or builders can have other Variables determine these parameters.
The Web Page Variables saving the information and choices of the user are the following:
input_code
code_invalid
code_expiration
user_email
This Web Flow includes two Data Flows that can be seen from Connection Builder.
This Data Flow is run by the Submit button and generates a one time password code based on the length that is provided as an input.
Inputs
length: length of the one time password code
Outputs
code: the randomly generated code based off of the length provided
This Data Flow is run by the Submit button and the Resend button. It sends the user the verification code that is generated from the Generate One-Time-Password Data Flow.
Inputs
user_email: email of the user to send the code to
verification_code: code that is generated from the Generate One-Time-Password Data Flow
In Journey Builder, the application’s path can be extended by adding an action or a node to the Journey following the Success Event.
Present users with a two-factor authentication flow through the app.
