Resend Button for OTP via Email with Forms for Actions

Knowledge Articles
, , ,
1

Overview

This article explains how to add a Resend code button to a Step Node using Forms for Actions, which is used to verify email addresses by sending One-Time Password (OTP) codes via email.

Applies To

  • Forms for Actions
  • OTP Verification

Solution

  • Incorporate an initial step using the Step node documentation in the user flows that appears before the screen for One-Time Password (OTP) entry.
    • An example of this initial step is shown below:
...
 {
   "id": "step_abkS",
   "type": "STEP",
   "alias": "New step",
   "config": {
     "nextNode": "flow_3Qle",
     "components": [
       {
         "id": "rich_text_Xwb8",
         "type": "RICH_TEXT",
         "config": {
           "content": "<p>Hello! We need to verify your email.</p>"
         },
         "category": "BLOCK"
       },
       {
         "id": "next_button_cDil",
         "type": "NEXT_BUTTON",
         "config": {
           "text": "Start verification process"
         },
         "category": "BLOCK"
       }
     ]
   }
 }
...
  • Add a Previous button to the screen where the OTP is entered.
    • An example of this Previous button is shown below:
...
  {
    "id": "previous_button_ErZG",
    "type": "PREVIOUS_BUTTON",
    "config": {
      "text": "Re-send email"
    },
    "category": "BLOCK"
  }
...