GDPR: Track Consent with Lock
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.
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.
Overview
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 Page so we can implement a Universal Login experience, instead of embedding the login in our app.
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
Configure the application
Go to Dashboard > Applications and create a new application. Choose
Single Web Page Applications
as type.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.Copy the Client Id and Domain values. You will need them in a while.
Go to Dashboard > Connections > 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 Dashboard > Connections > Social (we will enable Google login for the purposes of this tutorial).
Go to the connection's Applications tab and make sure your newly created application is enabled.
Download the JavaScript SPA Sample.
Set the Client ID and Domain values.
Option 1: Display Terms & Conditions link
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.
Go to Dashboard > Hosted Pages. At the Login tab enable the toggle.
At the Default Templates dropdown make sure that
Lock
is picked. The code is prepopulated for you.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. The example below displays next to the flag the textI 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?/To see what this will look like, click the Preview tab, and when Lock loads select the Sign Up tab.
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 Dashboard > Rules and click Create Rule. At the Rules Templates select empty rule. Change the default rule's name (empty rule
) to something descriptive, for exampleSet consent flag upon signup
.Add the following JavaScript code and save your changes. The code sets the
consentGiven
metadata totrue
, 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); }); }
Was this helpful?/
Option 2: Add custom fields for database connections
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).
Go to Dashboard > Hosted Pages. At the Login tab enable the toggle.
At the Default Templates dropdown make sure that
Lock
is picked. The code is prepopulated for you.To add a field for the
consentGiven
metadata, use the additionalSignUpFields option. The example below, sets the type tocheckbox
(so we have a flag), the label toI 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?/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.
Option 3: Redirect to another page
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. 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.
Add the redirect rule. Go to Dashboard > 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
).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?/Return to Dashboard > Rules and scroll down to the bottom of the page where the Settings section is. Create a key/value pair as follows:
Key:
CONSENT_FORM_URL
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!
Test the configuration
Go to the folder where you downloaded the application and run it.
npm install npm run
Was this helpful?/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
. If you want to use your own domain, see Custom Domains.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.
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.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: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.{ error: "unauthorized", errorDescription: "User did not consent!", state: "q0GjMwzZN_q5r8XPHvfakkMYcYM2q1N3" }
Was this helpful?/Go to Dashboard > Users and search for the new user.
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?/
That's it, you are done!