How to Know which Button is Selected in a Form within the onContinuePostLogin Function of the Action

Knowledge Articles
, ,
1

Overview

This article explains how to implement a solution using Auth0 Forms with multiple buttons in a form. In the onContinuePostLogin function of the Action, the admin needs to access which button the user clicked.

Detailed use case:

  1. A form is rendered after providing the valid credentials on the login page.
  2. The form has a single view with multiple buttons the user can click.
  3. Once the user clicks on any one of the buttons, exports.onContinuePostLogin is triggered in the post-login action.
  4. In exports.onContinuePostLogin function we want to know which button the user has clicked.

Applies To

  • Forms
  • Post Login Action

Solution

This use case can be implemented with the Jump Buttons and a separate flow for each button, with the “Store shared variable” Action storing the same variable (the variable name can be arbitrary). Here is a screenshot showing a solution for two buttons; however, the same idea can be extended to any number of buttons.

11.jpeg
11.jpeg3196×1094 108 KB

The “Stored Shared variable” action stores an attribute named buttonSelection . This action in the Button-1 Flow sets this variable to FirstButton. A similar action in Button-2 Flow sets the same attribute to SecondButton.
12.jpeg
12.jpeg2758×1708 116 KB

In the onContinuePostLogin function, the attribute is available with event.prompt?.vars?.buttonSelection and can be used to implement a custom business logic.

exports.onContinuePostLogin = async (event, api) => {
   console.log(event.prompt?.vars?.buttonSelection);
   if (event.prompt?.vars?.buttonSelection === "FirstButton") {
     // First button clicked
   } else if (event.prompt?.vars?.buttonSelection === "SecondButton") {
     // Second button clicked
   } else {
     // This use case should not happen.
   }
};