Add Additonal Sign Up Steps with Auth0 Forms

Auth0 Forms has a visual editor that you can use to add custom steps and business logic to your authentication flow.

In this lab, you will learn:

• Configure additional signup steps using Auth0 Forms.

• Create a vault connection with Forms to store secrets or API keys.

• Add a custom Form to Auth0 Login flow.

Prerequisites

Before you can create a new Form these two steps need to be in place:

1. A Machine-to-Machine Application (M2M) with these permissions (also known as scopes) enabled:

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

2. A Forms Vault connection set up with your M2M application credentials.

Create a New Form

To start creating a new form go to the Auth0 Dashboard, click on Actions then Forms.

On the Forms page click the Create Form button, which will open the Create Form modal. On the modal, click Start from Scratch

This will open the Form Editor, by default a new form includes a Start node, a Step node, and an Ending screen node. Nodes are the progression of the Forms process, you can add and remove Nodes within this process.

Configure the Step Node

Step nodes are the graphical interface that users see when your form is rendered.

On the Components menu, scroll down to the Blocks sections and drag and drop the Rich text component to the middle step node.

A Blocks settings menu will pop on screen when you drag the Rich text component onto the step node. In the text box, type in a custom message:

Complete your profile
Add more information to personalize your content

Click Save, then proceed to the next step where you'll see a text input box for the user to enter their information.

On the Components menu, scroll up the Fields section, then drag and drop two text blocks to the Step node below the Rich text block.

Click on the first Text field and the Field Settings menu will pop on screen. Fill in the ID field as company_name. The ID can be referenced when you pass data to your Flows (you will learn about Flows in a moment).

Next, click the Required checkbox, then enter Company Name in the Label field and click Save

Click the next Text field and the Field Settings menu will pop on screen. Fill in the ID field as job_title. Next, click the Required checkbox, then enter Job Title in the Label field and click Save

Next, click Publish to save the Form you created so far.

Configure the Flow Node

Now you'll create a new Flow to save the user inputs from the Text fields to the user metadata. The Flow will use the Auth0 Management API to use the credentials you saved in the Forms Vault.

To create a new Flow, click Flow at the bottom of the Forms editor and it will bring up the "Flow settings" menu. Click Create New Flow on the Flow settings menu. This will open the Flow name box. Enter Update User as the name, then click Create to update the flow name. Now, click Edit Flow to open the Flow Editor.

Now let's use the Flow editor to update the user metadata with the information the user inputs from your Text field. Click on the plus sign (+) right below the Start at the top of the Flow editor. This will bring up the List of Actions menu.

Now you can configure the Auth0 Update User action to get the data from the fields and update the user metadata by connecting to the Auth0 Management API. Click the drop-down on the Vault connection and select the Auth0 vault connection you created before you start this lab.

For the User ID field, you're going to use Forms variables

Forms variables are surrounded by curly brackets {{ variable }}. You can use different types of variables to reference and change data you receive from customers with Forms and Flows. In the User ID field, you'll use the {{context.*}} variable, which references the context data of the current transaction, including the current user.

In the User ID field, enter {{context.user.user_id}}.

{{context.user.user_id}} references the user_id of the user object.

To update the user metadata with company_name and job_title properties, add the code below to the Body section using the Forms field variables.

{
  "user_metadata": {
    "company_name": "{{fields.company_name}}",
    "job_title": "{{fields.job_title}}"
  }
}

After you configure your Update User action, click Save.

Now that the Flow is done, on the Flow editor click Publish to save the Flow, and close out the Flow editor tab in your browser.

To add the logic of of the Update user Flow to the Form, on the Flow editor delete the "line" connecting the Step node and the Ending Screen node. Drag and Drop the Update user Flow in between the Step Node and the Ending Screen node. Then, connect the "lines" on each side of the Flow to the Step node and Ending Screen node as pictured below.

Now that the Form is completed, click Publish. This will save the form and the logic. Now you need to render the form so that it prompts your users when they log in. So, next, you'll get the code to render the Form and add it to the Login flow with an Auth0 Action.

Render Form with Auth0 Actions

On the top of the Form editor, you have options for "Edit" and "Render". To render the form, click Render. This will bring up the Render page, which has the code you need to add to an Auth0 Action to render the form. On the bottom of the page, click the Copy button.

Above the render code box, go and click the Create a Post Login Action link. This will open up the Auth0 Actions Library to create a new Action. Click Create Action, then choose Build from scratch

The Create Action modal will pop up. The first step is to name the Action. You can name this Action Render Additional Signup Info

Render Additional Signup Info

Confirm that Login / Post Login is the trigger and keep the recommended runtime. Once all that is complete, click Create to open the Action code editor.

For post-login Action to render the Form, start by deleting the existing code from the Action Code editor. Next, paste the Form render code into the Code editor. Then, edit the code to define the conditional logic that will render the form.

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);
  }
}

Once the code is entered, click Deploy to save the Action.

In the final step, you need to add the Action to render the Form when the user logs in.

On the left side of the Auth0 Dashboard, click Actions, then Triggers. On the Triggers page, click "Post Login". This will open the Actions trigger drag and drop editor.

On the right side of the Trigger editor under Add Action, click on Custom to bring up the Actions you've built. Drag your Action that renders the Form you just created and drop it in between the Start and Complete points on the editor. Then click *Apply to update the Login with the new Form.

Now, you can run your application and start the login process with a user that doesn't have company_name or job_title in their user_metadata

Recap

Congratulations! You have successfully collected additional information about a user with Auth0 Forms! You learned how to:

• Create a Custom Form from scratch
• Change the authentication flow to update the user's metadata and resume authentication after the information is submitted.
• Render the Form by using Auth0 Actions.