Email Verification with OTP Web Flow Template

emailverif0.png

Overview

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.

Web Flow template components

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:

Web Flow Variables and Inputs

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.

Web Page Variables

The Web Page Variables saving the information and choices of the user are the following:

Text

• input_code

Boolean

• code_invalid

DateTime

• code_expiration

Email

• user_email

Data Flows

This Web Flow includes two Data Flows that can be seen from Connection Builder.

Generate One-Time-Password Code

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

Verification Code Send Email

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

Events

In Journey Builder, the application’s path can be extended by adding an action or a node to the Journey following the Success Event.

Use Cases

• Present users with a two-factor authentication flow through the app.