In this tutorial we will see how you can use Lock to ask for consent information, and then save this input at the user's metadata. To learn more, read Understand How Metadata Works in User Profiles.

The contents of this document are not intended to be legal advice, nor should they be considered a substitute for legal assistance. The final responsibility for understanding and complying with GDPR resides with you, though Auth0 will assist you in meeting GDPR requirements where possible.

We will configure a simple JavaScript Single-Page Application and a database connection (we will use Auth0's infrastructure, instead of setting up our own database).

Instead of building an app from scratch, we will use Auth0's JavaScript Quickstart sample. We will also use Auth0's Universal Login pages so we can implement a Universal Login experience, instead of embedding the login in our app. To learn more about Universal Login, read Auth0 Universal Login. To learn more about the differences between Universal Login and embedded login, read Centralized Universal Login vs. Embedded Login.

We will capture consent information, under various scenarios, and save this at the user's metadata.

All scenarios will save the following properties at the user's metadata:

• a consentGiven property, with true/false values, shows if the user has provided consent (true) or not (false)

• a consentTimestamp property, holding the Unix timestamp of when the user-provided consent

For example:

{
  "consentGiven": "true"
  "consentTimestamp": "1525101183"
}

We will see three different implementations for this:

• one that displays links to other pages where the Terms & Conditions and/or privacy policy information can be reviewed

• one that adds custom fields at the signup widget and works for database connections

• one that redirects to another page where the user can provide consent, and works for social connections

1. Go to Auth0 Dashboard > Applications > Applications and create a new application. Choose Single Web Page Applications as type.

2. Go to Settings and set the Allowed Callback URLs to http://localhost:3000.

   This field holds the set of URLs to which Auth0 is allowed to redirect the users after they authenticate. Our sample app will run at http://localhost:3000 hence we set this value.

3. Copy the Client Id and Domain values. You will need them in a while.

4. Go to Auth0 Dashboard > Authentication > Database and create a new connection. Click Create DB Connection, set a name for the new connection, and click Save. You can also enable a social connection at Auth0 Dashboard > Authentication > Social (we will enable Google login for the purposes of this tutorial).

5. Go to the connection's Applications tab and make sure your newly created application is enabled.

6. Download the JavaScript SPA Sample.

7. Set the Client ID and Domain values.

In this section, we will customize the login widget to add a flag that users must check in order to sign up. The flag's label will include links to pages that display the Terms & Conditions and privacy policy.

This works both for database connections and social logins.

1. Go to Auth0 Dashboard > Branding > Universal Login. At the top of the Login tab enable the Customize Login Page toggle.

2. At the Default Templates dropdown make sure that Lock is picked. The code is prepopulated for you.

3. To add a field for the consentGiven metadata, use the mustAcceptTerms option. To include links to your Terms & Conditions and/or privacy policy pages, use the languageDictionary option. To learn more, read Lock Configuration Options. The example below displays next to the flag the text I agree to the terms of service and privacy policy (including links to both pages).

       //code reducted for simplicity
       var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
         auth: {
           //code reducted for simplicity
         },
         languageDictionary: {
           signUpTerms: "I agree to the <a href='https://my-app-url.com/terms' target='_blank'>terms of service</a> and <a href='https://my-app-url.com/privacy' target='_blank'>privacy policy</a>."
         },
         mustAcceptTerms: true,
         //code reducted for simplicity
       });
   
   

   Was this helpful?Yes/No

4. To see what this will look like, click the Preview tab, and when Lock loads select the Sign Up tab.

5. This flag does not allow users to sign up unless they accept the terms, however it does not set any metadata. To save this information at the consentGiven metadata property, add a rule. Go to Auth0 Dashboard > Auth Pipeline > Rules, and click Create Rule. At Rules Templates, select empty rule. Change the default rule's name (empty rule) to something descriptive, for example Set consent flag upon signup.

6. Add the following JavaScript code and save your changes. The code sets the consentGiven metadata to true, if it is not already set (which means it's the first login after a signup).

    function (user, context, callback) {
      user.user_metadata = user.user_metadata || {};
      // short-circuit if the user signed up already
      if (user.user_metadata.consentGiven) return callback(null, user, context);
      
      // first time login/signup
      user.user_metadata.consentGiven = true;
      user.user_metadata.consentTimestamp = Date.now();
      auth0.users.updateUserMetadata(user.user_id, user.user_metadata)
      .then(function(){
        callback(null, user, context);
      })
      .catch(function(err){
        callback(err);
      });
    }

In this section, we will customize the login widget to add a flag that users will check if they agree to the processing of their information.

This works only for database connections (if you use social logins, see the next paragraph).

1. Go to Auth0 Dashboard > Branding > Universal Login. At the top of the Login tab enable the Customize Login Page toggle.

2. In the Default Templates dropdown make sure that Lock is selected. The code is prepopulated for you.

3. To add a field for the consentGiven metadata, use the additionalSignUpFields option. To learn more, read Lock Configuration Options. The example below, sets the type to checkbox (so we have a flag), the label to I consent to data processing, and the default value to checked.

       //code reducted for simplicity
       var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
         auth: {
           //code reducted for simplicity
         },
         additionalSignUpFields: [{
           type: "checkbox",
           name: "consentGiven",
           prefill: "true",
           placeholder: "I consent to data processing"
         }],
         //code reducted for simplicity
       });
   
   

   Was this helpful?Yes/No

4. To see what this will look like, click the Preview tab, and when Lock loads select the Sign Up tab.

Note that in this option we only set the flag and not the timestamp. Displaying the current time in the login widget is not optimal, that's why we didn't add an additional signup field. What you should do is set the timestamp in the background, with a rule that will check the value of consentGiven and set the additional consentTimestamp metadata to the current timestamp.

If you are using social logins, adding custom fields is not an option, but you can redirect the user to another page where you ask for consent and any additional info, and then redirect back to finish the authentication transaction. This can be done with redirect rules. To learn more, read Redirect Users from Within Rules. We will use that same rule to save the consent information at the user's metadata so we can track this information and not ask for consent upon the next login.

For simplicity, we will use this sample consent form.

You will need to host this form, and the URL for the form must be publicly-accessible. You'll need to provide the URL where the form can be accessed to Auth0 at a later step of this tutorial.

1. Add the redirect rule. Go to Auth0 Dashboard > Auth Pipeline > Rules, and click Create Rule. At Rules Templates, select empty rule. Change the default rule's name from empty rule to something descriptive (e.g., Redirect to consent form).

2. Add the following JavaScript code to the script editor, and Save your changes.

       function redirectToConsentForm (user, context, callback) {
         var consentGiven = user.user_metadata && user.user_metadata.consentGiven;
   
         // redirect to consent form if user has not yet consented
         if (!consentGiven && context.protocol !== 'redirect-callback') {
           var auth0Domain = auth0.baseUrl.match(/([^:]*:\/\/)?([^\/]+\.[^\/]+)/)[2];
   
           context.redirect = {
             url: configuration.CONSENT_FORM_URL +
               (configuration.CONSENT_FORM_URL.indexOf('?') === -1 ? '?' : '&') +
               'auth0_domain=' + encodeURIComponent(auth0Domain)
           };
         }
   
         // if user clicks 'I agree' on the consent form, save it to their profile so they don't get prompted again
         if (context.protocol === 'redirect-callback') {
           if (context.request.body.confirm === 'yes') {
             user.user_metadata = user.user_metadata || {};
             user.user_metadata.consentGiven = true;
             user.user_metadata.consentTimestamp = Date.now();
   
             auth0.users.updateUserMetadata(user.user_id, user.user_metadata)
               .then(function(){
                 callback(null, user, context);
               })
               .catch(function(err){
                 callback(err);
               });
           } else {
             callback(new UnauthorizedError('User did not consent!'));
           }
         }
   
         callback(null, user, context);
       }
   
   

   Was this helpful?Yes/No

3. Return to Auth0 Dashboard > Auth0 Pipeline > Rules and scroll down to the bottom of the page where the Settings section is. Create a key/value pair as follows:

   1. Key: CONSENT_FORM_URL

   2. Value: your-consent-form-url.com

Be sure to provide the publicly-accessible URL where your consent form can be found.

When setting up redirection to your consent form for use in a Production environment, be sure to review Trusted Callback URLs and Data Integrity regarding security concerns.

If you require a specialized consent prompt, for example a parental consent, you need to build your own custom consent form. Be aware that laws vary according to country.

We are done with the configuration part, let's test!

1. Go to the folder where you downloaded the application and run it.

       npm install
       npm run
   
   

   Was this helpful?Yes/No

2. Go to http://localhost:3000. Click Login. Once Lock is displayed, click Sign Up. The login page will be served by default at YOUR_DOMAIN/login. To learn how to use your own domain, read Custom Domains.

3. If you followed the first implementation option, you should see the flag to accept the terms of service and privacy policy. Note that the Sign up button remains disabled until you check the flag. Follow the links to check they are working. Set an email and password and accept the terms and click Sign Up. Alternatively, if you use a social connection, accept the terms, and choose Sign Up with Google.

4. If you followed the second implementation option, you should see the new custom field we added. Set an email and password and leave the I consent to data processing flag checked. Click Sign Up.

   

5. If you followed the third implementation option, choose Sign Up with Google. You will be navigated to the consent form. Check the I agree flag and click Submit.

   

   If you do not check the I agree flag before clicking Submit, then you will see a popup error Unauthorized. Check the console for details.. At the console you will see this JSON:

       {
         error: "unauthorized", 
         errorDescription: "User did not consent!", 
         state: "q0GjMwzZN_q5r8XPHvfakkMYcYM2q1N3"
       }
   
   

   Was this helpful?Yes/No
   Note, that the user is created but they won't be able to log in. If they try to, they will be prompted again to provide consent.

6. Go to Auth0 Dashboard > User Management > Users and search for the new user.

7. Go to User Details and scroll down to the Metadata section. At the user_metadata text area you should see the following:

       {
         "consentGiven": "true"
         "consentTimestamp": "1525101183"
       }
   
   

   Was this helpful?Yes/No

That's it, you are done!