Add Terms and Conditions to the Signup Screen using Forms for Actions

Knowledge Articles
, ,
1

Last Modified: Sept 13, 2024

Overview

This Article explains how to add an option to accept Terms and Conditions on the Sign Up page when using the New Universal Login Experience.

Applies To

  • Terms and Conditions / Terms of Service
  • Forms for Actions
  • Actions
  • New Universal Login

Solution

Follow the steps or video below:

Forms for Actions is a visual editor that allows to create customizable forms that can extend the identity flows with additional steps and business logic. It is possible to use Auth0 Forms to add a checkbox on the login screen to show and request acceptance of Terms of Service.

The Terms and Conditions flow will look like this:

  1. Users who have not accepted the terms and conditions log in.
  2. The login flow displays a Terms and Conditions screen.
  3. User Accepts Terms and Conditions.
  4. Forms for Actions updates the user’s profile by adding the following fields to the user’s
    app_metadata
    {
  "app_metadata": {
    "privacy_policies": true,
    "privacy_policies_timestamp": "{{ functions.toTimestamp() }}"
  }
}
  5. Login flow continues normally.

NOTE: The app_metadata will later be used to define whether the user should or should not be displayed on the Terms and Conditions screen.

To add Terms and Conditions, follow these steps:

  1. Create a Machine-to-Machine Application and Authorize the Auth0 Management API with the following scopes enabled:
  • read:users
  • update:users
  • create:users
  • read:users_app_metadata
  • update:users_app_metadata
  • create:users_app_metadata

This application will be used to update the user’s app_metadata to store the acceptance of terms and conditions.

  1. Add a Vault connection to Auth0 Forms. A vault connection securely stores secrets or common settings. When creating the Vault Connection, add the Client ID and Client Secret of the Application created in step #1.

For more information about how to create Vault Connections click here.

  1. Create a Form from scratch:
  • Open the Form editor by navigating to Auth0 Dashboard > Actions > Forms.
  • 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

  1. Drag a Legal Field into the Step node.
  2. Write the Legal Policy and add a link to it if needed.
  3. Click Save and then Publish.

Configure the Flow Node

  1. Add and link a Flow node after the Step node. This node will update the app_metadata and resume the authentication flow.

    1.jpeg
    1.jpeg3828×1204 145 KB

  2. With the new flow selected, on the right side bar, click Create New Flow. Enter a Flow Name and click Create.

  3. Now that the new Flow has been created, it can be selected from the dropdown and Click Edit Flow.

  4. On the new tab that opened, below the Start Action, select the + icon to add an Update user action. Complete the fields below, then select Save to continue.

    • Connection: Select from the dropdown the Vault connection to the M2M application.
    • User ID: Enter {{context.user.user_id}}.
    • Body: Copy and paste the following code to update the app_metadata with the privacy_policies and privacy_policies_timestamp properties.
    {
  "app_metadata": {
    "privacy_policies": true,
    "privacy_policies_timestamp": "{{ functions.toTimestamp() }}"
  }
}

    2.jpeg
    2.jpeg3576×1816 164 KB

  5. Publish the new Flow Node.

  6. Go back to the Form Editor and click Publish again.

Render the Form from a Post Login Action

  1. Retrieve the Form Code:

  2. Navigate to Auth0 Dashboard > Actions > Flows > Login .

  3. Select the + icon and Select Build from scratch:

  • Name: Enter Render Update Policy Form.
  • Trigger: Select Login / Post Login.
  • Runtime: Select the recommended version.
  1. Select Create .
  2. To configure the post-login Action, Delete the existing code from the code editor and Paste the Form Code copied in step one (1).
  3. 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.app_metadata.privacy_policies !== true) {
    api.prompt.render(FORM_ID);
  }
}

exports.onContinuePostLogin = async (event, api) => { }

  1. Select Deploy.

  2. Drag and Drop the Render Update Policy Form Action to the Login flow.

    4.jpeg
    4.jpeg1370×668 72.3 KB

  3. Select Apply.

Related References