Support Plans     System Status     Developers     Dashboard     Contact Us    

Articles in this section

See more

How to set up Email OTP solution in Flow Builder

MessageBird
  • Updated
Follow

In this guide, you’ll learn how to set up a one-time password (OTP) email solution with Flow Builder. OTPs are single-use passcodes that allow you to verify your customers' identity.

 

Requirements

Before you begin

  • Familiarize yourself with Flow Builder, which can be reached from your MessageBird Dashboard.
  • If you’d like to send authentication emails from your email domain (we'll show you how to do this in Step 2), you’ll need to install Email as a channel. For detailed instructions, go to our guide.

Pro tip: In this guide, we’ll use screenshots to help you navigate through the more technical set up steps. 

 

Step 1: Set up and connect the Email OTP Send and Email OTP Verification flows in Flow Builder


Once set up, the Email OTP Send flow will send an OTP to your customer. The Email OTP Verification flow will check the input that your customer returns against the original OTP. If it matches, the customer will be sent a Success email. If it doesn't match, the customer will be sent a Failed email.

 

1. Log in to your MessageBird Dashboard and go to Flow Builder.

2. Click Import Flow, upload and import the Email OTP Send JSON file, which you can download here. You’ll be taken to the flow. 

3. Publish the Email OTP Send flow. You don’t need to copy the webhook URL from the dialogue box.

4. Navigate back to Flow Builder.

5. Click Import Flow, upload and import the Email OTP Verification JSON file, which you can download here. You’ll be taken to the flow. 

6. Publish the Email OTP Verification flow.

7. Copy the webhook URL from the dialogue box that appears. You’ll also be able to find and copy this webhook URL in the Webhook step, as demonstrated in the screenshot below.


Email_OTP_Verification_Webhook_step.png

8. With the webhook URL copied, navigate back to the Email OTP Send flow. Go to the HTTP Request step and paste the URL into the URL field, as shown in the screenshot below.

 

Email_OTP_Send_flow_HTTP_request.png

9. Go to the very end of the URL that you’ve just pasted into the URL field and add the following query string:

?otp={{random[0]}}

Your URL should now look similar to this: https://flows.messagebird.com/flows/5540bbfb-71db-42ca-b421-88eadbf0cc26/invoke?otp={{random[0]}}

10. Save the changes you’ve made to the HTTP Request step.

11. Publish the Email OTP Send flow.

 

Step 2: Create a custom email channel (optional)


By default, the flows you’ve just set up will use MessageBird’s flows.messagebird.com email domain to send OTP emails. If you would prefer to send OTP emails from your email domain, you can create a custom email channel by updating the Email OTP Send flow and the Email OTP Verification flow as follows:

Update the Email OTP Send flow

Use this screenshot as a reference as you follow the steps.

 

Email_OTP_Send_flow_overview.png

 

1. Install your own email domain as an Email Inbox channel.

2. From Flow Builder, navigate to the Email OTP Send flow.

3. Add the Send conversation message step to your flow, placing it below the HTTP Request step and above the Send an email step. You can do this by dragging and dropping the new step from the Steps menu, or by clicking the plus symbol between the two existing steps.

4. In the settings of the new Send conversation message step, select Inbox Email from the Channel drop-down menu. 

5. Drag and drop the email variable from the Available variables list into the Recipient field.

6. In the Originator name field, type in an identifying name, such as OTP. 

7. In the Address field, enter the name of the email address you want to send OTP emails from. There’s no need to include the domain name here, as this information will be added automatically when an OTP email is sent.

8. In the Subject field, type in the subject line for your OTP emails. If you want to include the verification code in the subject line itself, you can drag and drop the random(0) variable from the Available variables list, as shown in the screenshot.

9. In the Content field, type in the email body text for your OTP emails, using a little basic HTML to format the email content. Remember to include the random(0) variable in your message, as seen in the screenshot, as this will display your customer’s verification code. 

10. Save the changes you’ve made to the Send conversation message step.

11. Delete the Send an email step from your flow. 

12. Publish your Email OTP Send flow.

Update the Email OTP Verification flow

Use this screenshot as a reference as you follow the steps.

 

Email_OTP_Verification_flow_overview.png

1. Navigate to the Email OTP Verification flow

2. Add the Send conversation message step to your flow, placing it below the otp equals condition of the If/Else branch and before the Send an email step. See A1 in the screenshot for more details. 

3. In the settings of the new Send conversation message step, select Inbox Email from the Channel drop-down menu.

4. Drag and drop the email variable from the Available variables list into the Recipient field. You can do this by dragging and dropping the new step from the Steps menu, or by clicking the plus symbol between the two existing steps.

5. In the settings of the new Send conversation message step, select Inbox Email from the Channel drop-down menu.

6. Drag and drop the email variable from the Available variables list into the Recipient field.

7. In the Originator name field, type in an identifying name, such as OTP. 

8. In the Address field, enter the name of the email address you want to send OTP Success emails from. There’s no need to include the domain name here, as this information will be added automatically when an OTP email is sent.

9. In the Subject field, type in a subject line for your OTP Success emails (e.g., Your account has been verified). 

10. In the Content field, type in the email body text for your OTP Success email, using a little basic HTML to format the email content. 

11. Save the changes you’ve made to the Send conversation message step.

12. Delete the Send an email step below the Send conversation message step that you’ve just set up.

13. Add a second Send conversation message step to your flow, placing it below the Else condition of the If/Else branch and before the Send an email step. See A2 in the screenshot for more details.

14. Repeat steps 3 through 7.

15. In the Address field, enter the name of the email address you want to send OTP Failed emails from. There’s no need to include the domain name here, as this information will be added automatically when an OTP email is sent.

16. In the Subject field, type in a subject line for your OTP Failed emails (e.g., Your account has not been verified). 

17. In the Content field, type in the email body text for your OTP Failed email, using a little basic HTML to format the email content. 

18. Save the changes you’ve made to the Send conversation message step.

19. Delete the Send an email step below the Send conversation message step that you’ve just set up.

20. Publish your email OTP Verification flow.


Step 3: Test your Email OTP solution


To test your Email OTP solution, install Postman. Set up two HTTP requests as shown in the screenshots below.

 

Postman_HTTP_request_1.png

Postman_2.png

 

Step 4: Implement your OTP Email solution

 

1. To trigger the OTP, implement the Webhook URL of the Webhook step in the Email OTP send flow.

2. To verify the OTP, implement the Webhook URL of the Await webhook step in the Email Verification flow. 

 

Please take note: the identifier variable is the user’s email address.

 

And that’s it! 🎉  Now you know how to set up an Email OTP solution through Flow Builder. 

 

Related articles