Use Cases: Configure additional signup steps using Forms

Before you start

Create a Machine-to-Machine Application with the following scopes enabled:

read:users
update:users
create:users
read:users_app_metadata
update:users_app_metadata
create:users_app_metadata

Forms for Actions is currently in Early Access. To learn more about Auth0 release stages, review Product Release Stages.

Forms for Actions allows you to create additional steps in your signup flows and make them required before allowing users to access your application.

The sections below outline how you can create additional signup steps forms using nodes and flows, along with steps for adding your form to a Post Login Action.

Create a form from scratch

To create a new information gathering form, follow these steps:

Navigate to Auth0 Dashboard > Actions > Forms.
Select Actions > Forms to open the Form editor in a new tab.
Select Create form > Start from scratch.

By default, a new form contains a Start node, a Step node, and an Ending screen node.

Configure the Step node

The Step node is the graphical interface visible to users. Add Fields to the Step node to collect the user full name and job title values by following these steps:

Drag a Rich text field from the Components menu into the Step node.
- Rich text: Enter a custom message.
Drag a Text field into the Step node.
- ID: Enter full_name.
- Label: Enter Full name.
- Label: Enable the checkbox.
- Required: Enable the checkbox.
Drag a Text field into the Step node.
- ID: Enter job_title.
- Label: Enter Job title.
- Label: Enable the checkbox.
- Required: Enable the checkbox.
Select Publish to save.

Add an Update user_metadata flow

Add a Flow node after the Step node to update the user_metadata and resume the authentication flow by following these steps:

Select Flow from the bottom of the Form editor.
Remove the existing link between the Step and Ending Screen nodes.
Select the new Flow > Click to add a flow > Create a new flow.
- Enter Update user_metadata in the Name field.
- Select Create.
Link the Flow node to the Step and Ending Screen nodes as pictured below.
Select Publish to save.

Select the Flow Update user_metadata > Edit flow to open the Flow editor in a new tab.
Below the Start Action, select the + icon to add an Auth0 Update user Action. Complete the fields below, then select Save to continue.
- Connection: Select the + icon to add a connection to the Machine to Machine Application.
- User ID: Enter {{context.user.user_id}}.
- Body: Copy and paste the following code
  { "user_metadata": { "full_name": "{{fields.full_name}}", "job_title": "{{fields.job_title}}" } }
  Was this helpful?
  /
Select Publish to save.

Retrieve your form embed code

Retrieve your form embed code to visually render the form with a custom Post Login Action by following these steps:

From the Form editor, select > Embed.
Select Copy.

Dashboard > Actions > Forms > Form > Embed

Create a custom Post Login Action to render your form by following these steps:

Navigate to Auth0 Dashboard > Actions > Flows > Login.
Select Custom.
Select the + icon to Build from scratch:
- Name: Enter Render Additional Signup Form.
- Trigger: Select Login / Post Login.
- Runtime: Select the recommended version.
Select Create.

To configure the custom Action:

Delete the existing code from the Code editor.
Paste the form embed code into the Code editor.
Edit the code to define the conditional logic that will render the form.
```
/**
* @param {Event} event - Details about the user and the context in which they are logging in.
* @param {PostLoginAPI} api - Interface whose methods can be used to change the behavior of the login.
*/
exports.onExecutePostLogin = async (event, api) => {
  const FORM_ID = 'REPLACE_WITH_YOUR_FORM_ID';

  if (
    !event.user.user_metadata.full_name &&
    !event.user.user_metadata.job_title
  ) {
    api.prompt.render(FORM_ID);
  }
}

exports.onContinuePostLogin = async (event, api) => { }
```
Was this helpful?
/
The example code above will render the form when a user is missing the user metadata full_name and job_title properties.
Select Deploy.
Drag and Drop the Render Additional Signup Form Action to the Login flow.
Select Apply.

Test implementation

Test the implementation by following these steps:

Sign up to an application with a new user.
The custom Post Login Action in the Login flow will render the form and prompt for the information.
Select Auth0 Dashboard > User Management > Users, locate the new user and verify that its attributes full_name and job_title contain the information from the additional signup step.

Customize