WhatsApp integration in Auth0 with Forms for Actions

This is a Guide on creating a WhatsApp integration with Forms for Actions (Pre-Template) that can be used for Multi-factor Authentication (MFA).

• WhatsApp
• Multi-factor Authentication (MFA)
• Forms for Actions

1. Create an account on Facebook Developers.

2. Integrate WhatsApp with the Facebook Developers account: Get Started with the New WhatsApp Business Platform

3. See the image below for all the information necessary to copy from the Facebook Developers interface:
 

4. Replace the necessary parameters with the ones from Facebook and add them into the Flow for the Forms to Actions like so:

The Temporary access token will be used for Vault Connection and the Phone number ID for Sender Phone ID
 

3. Once the Form For Actions is published, attach it to the Post-Login Action and test to confirm it's functioning as expected.

JSON output for Forms For Actions (WhatsApp Integration)
 

{
  "version": "3.0.0",
  "form": {
    "name": "WP FORM",
    "description": null,
    "messages": {
      "custom": {},
      "errors": {}
    },
    "languages": {
      "default": null,
      "primary": "en"
    },
    "translations": {},
    "start": {
      "nextNode": "flow_FDo3",
      "coordinates": {
        "x": -70,
        "y": 75
      },
      "hiddenFields": []
    },
    "nodes": [
      {
        "id": "step_9vHY",
        "type": "STEP",
        "alias": "New step",
        "config": {
          "nextNode": "router_FZIA",
          "components": [
            {
              "id": "text_leFS",
              "hint": null,
              "type": "TEXT",
              "label": "Insert Whatsapp One Time Code",
              "config": {
                "maxLength": null,
                "minLength": null,
                "multiline": false,
                "placeholder": null,
                "defaultValue": null
              },
              "category": "FIELD",
              "required": false,
              "transient": false
            },
            {
              "id": "next_button_c8G7",
              "type": "NEXT_BUTTON",
              "config": {
                "text": "Continue"
              },
              "category": "BLOCK"
            }
          ]
        },
        "coordinates": {
          "x": 633,
          "y": -404
        }
      },
      {
        "id": "flow_FDo3",
        "type": "FLOW",
        "alias": "New flow",
        "config": {
          "flowId": "#FLOW-1#",
          "nextNode": "step_9vHY"
        },
        "coordinates": {
          "x": 174,
          "y": -172
        }
      },
      {
        "id": "step_hasB",
        "type": "STEP",
        "alias": "New step",
        "config": {
          "nextNode": null,
          "components": [
            {
              "id": "rich_text_XUOE",
              "type": "RICH_TEXT",
              "config": {
                "content": "<p>Invalid Code Please Try Again!</p>"
              },
              "category": "BLOCK"
            },
            {
              "id": "next_button_Y1tJ",
              "type": "PREVIOUS_BUTTON",
              "config": {
                "text": "Try Again"
              },
              "category": "BLOCK"
            }
          ]
        },
        "coordinates": {
          "x": 1563,
          "y": -182
        }
      },
      {
        "id": "router_FZIA",
        "type": "ROUTER",
        "alias": "New router",
        "config": {
          "rules": [
            {
              "id": "id_9888616593010",
              "alias": "Rule 1",
              "nextNode": "$ending",
              "condition": {
                "operands": [
                  {
                    "operands": [
                      "{{fields.text_leFS}}",
                      "{{vars.code}}"
                    ],
                    "operator": "EQ"
                  }
                ],
                "operator": "AND"
              }
            }
          ],
          "fallback": "step_hasB"
        },
        "coordinates": {
          "x": 1187,
          "y": -366
        }
      }
    ],
    "ending": {
      "content": null,
      "redirection": null,
      "callback": null,
      "afterSubmit": {
        "email": null,
        "flowId": null
      },
      "coordinates": {
        "x": 1591,
        "y": -466
      },
      "resumeFlow": true
    },
    "social": [],
    "style": {
      "css": null,
      "theme": "ROUND",
      "version": "MODERN"
    },
    "tags": []
  },
  "flows": {
    "#FLOW-1#": {
      "name": "WP Integration 2",
      "description": null,
      "actions": [
        {
          "id": "generate_one_time_password_TUXY",
          "type": "OTP",
          "alias": null,
          "notes": null,
          "action": "GENERATE_CODE",
          "params": {
            "length": 5,
            "reference": "genOTP"
          },
          "allowFailure": false
        },
        {
          "id": "send_message_nWCk",
          "type": "WHATSAPP",
          "alias": null,
          "notes": null,
          "action": "SEND_MESSAGE",
          "params": {
            "type": "TEXT",
            "payload": {
              "body": "You OTP Code {{actions.generate_one_time_password_TUXY.code}}",
              "preview_url": false
            },
            "senderId": "384234264779592",
            "connectionId": "#CONN-1#",
            "recipientNumber": "{{context.user.phone_number}}"
          },
          "allowFailure": false
        },
        {
          "id": "store_shared_variable_M3cp",
          "type": "FLOW",
          "alias": null,
          "notes": null,
          "action": "STORE_STATE",
          "params": {
            "data": {
              "code": "{{actions.generate_one_time_password_TUXY.code}}"
            }
          },
          "allowFailure": false
        }
      ],
      "triggers": {
        "webhook": {
          "secret": null,
          "enabled": false
        }
      },
      "synchronous": true,
      "security": {
        "rateLimits": []
      }
    }
  },
  "connections": {
    "#CONN-1#": {
      "id": "ac_wPwJWjZgv5fa2RDhSe2wkA",
      "appId": "WHATSAPP",
      "name": "WhatsApp #2"
    }
  }
}