Auth0 Forms – Managing Privacy Policy Acceptance

Auth0 Forms is a powerful tool to extend identity flows with customisable forms and business logic. Forms allows for a hosted secure experience with no need to redirect users to external sites and consistent branding with Universal Login. In this blog post I will talk through how to use forms to ensure all your application users have accepted the latest policies, such as Terms and Conditions, before being allowed to access the application. This post will follow the guidance in Use Cases: Configure an update policy form using Forms and from the template. Before we dive in let’s introduce this functionality.

Introductions

Forms is a customisable extension to idenity flows that lets you add additional steps and business logic. Each form consists of a set of nodes and components such as fields, blocks and widgets for your users to interact with the form. There are also Router nodes that allow for branching and conditional logic and Flow nodes that call flows.

Flows allows you to build out server-side logic that can be executed within your forms and includes a variety of actions that can be called to collect data from API calls, send OTP codes or trigger other automations. Some sample actions are shown below with many more available here.

Steps required

Setting up Forms and integrating them with your

1. Create an M2M application with appropriate permissions to allow forms to update and read user data and metadata.
2. Link M2M application to Vault Connection in Forms.
3. Create a Form to display the Policy and use a Flow to update the user metadata.
4. Create an Action to trigger the form if required.
5. Test it out
6. Tweak it to make it better!

Creating an M2M Application

1. Navigate to Applications -> Applications in Auth0 dashboard and click create application. Select Machine to Machine Applications give it a useful name and click create.

2. Select Auth0 Management API and give it the following permissions.

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

I recommend filtering on users in the search box. Your dialog should look something like the below.

You’ll need the values of Domain, Client ID and Secret shown under the settings tab of the application.

Link M2M application to Vault Connection in Forms

1. On the side menu click Actions -> Forms this will open a new window displaying the Forms dashboard.
2. Click the drop down next to the tenant name in the header to expand the menu and select Vault

3. Click Add Vault Connection select Auth0 and hit continue.
4. Give the connection a meaningful name and hit next.
5. Switch back to your other window with the Machine to Machine Application and copy the values for Domain, Client ID and Secret into the connection settings and click Add Vault Connection

Create the Form

1. Navigate back to the Forms page by selection Forms in the header.
2. Click Create Form. Give the form a meaningful name AND also give the accompanying flow a useful name then click continue.

3. On the next page select the vault connection that was created earlier then click Create. If you did not yet create one you can do so from here using the +.

4. You’ll be presented with a flow like the below. This has the following parts.
   • A Start node that is where the flow starts and can be selected to optionally add hidden variables.
   • A Step node that contains a Text rich text component, a Legal component that contains the agreement checkbox and a Next button block.
   • A Flow node which triggers the Update Metadata flow, and
   • An Ending screen node which resumes the authentication flow in Universal Login effectively a redirect back to the login flow.

5. Navigate to the flow by clicking on the flow node and then selecting the Edit Flow button. As shown below

6. This will open the flow in a new window. The flow shown below is very simple. It contains a start node and update user component and that is it.

7. Selecting the Update user component opens the side bar which shows which connection is used, the User ID that will be updated and the Body that will be used in the call to the Auth0 Management API. Please note that at the present time these Update User calls consume against the management API rate limit which is smaller than the Authentication API limit. You can see here that we’re updating the app_metadata in Auth0 to show that the user has accepted the privacy policy.

8. Make sure both the form and the Flow are published by checking in the top right corner of each.

Create the Action

1. To create the linked acrtion return to the Forms page and click <> Render. This will show a dialog like the below. On the Post Login tab select Copy and then switch back to your Auth0 tenant dashboard and navigate to Actions -> Library or click the link to Create a Post Login Action”

2. Next on the Library page select Create Action -> Build from scratch give it a name and ensure that Login/Post Login is selected for the trigger type.

3. Highlight all of the code on the new action and replace it with the code copied from the forms page in the previous step. Then click Save Draft then Deploy.

4. Navigate to Actions -> Triggers and select post-login from the Sign Up & Login section. Under Add Action select the Custom tab and drag the action you’ve just created into the flow as shown below.

Test it out!

Testing this out is simple. Jump into a test app and login. After entering username and password (or whichever factor you’re using first) you should get presented with the form as shown below. Check the box and click continue to accept the terms and login. If the user does not check the box then they can not continue to login.

Next you can confirm that the user data has been updated by navigating into User Management -> Users and selecting your test user. When you scroll down to the App Metadata section you should see that the policy acceptance and timestamp have been added similar to the below.

Tweak it to make it better

Now you may have noticed that the next time the user logs in they’ll be presented with the form again. Obviously this is not ideal. There are two ways to resolve this. Check the app metadata before calling the form or checking it within the form. The best solution is to check in the action before triggering a call out to the forms. This is simply a matter of tweaking the the action we created earlier to add a check if the user has already accepted the policy. Then save and deploy your action.

exports.onExecutePostLogin = async (event, api) => {

  if (event.user.app_metadata.privacy_policies !== true) {
    api.prompt.render('<FORM ID>');
  }
  
}

To test simply logout and login again as your test user. You should not be prompted to accept the policy anymore. You can also test by adjusting the metadata to false or deleting the attribute from the user dashboard to see if it appears again.

Next Steps

If you would like to build upon this example by adding versioning and retrieving the policy data from an external source check out this follow up post – Auth0 Forms – Adding Policy Versioning