How to Add Hidden Fields and Custom JavaScript to the Auth0 Sign-Up Form
Last Updated:
Overview
Tracking sign-ups from external sources, such as Google Ads, requires adding hidden fields and custom JavaScript to the sign-up form. Auth0 supports this configuration using Partials or Page Templates.
Applies To
- Auth0
- Universal Login
- Sign-up Form Customization
- Partials
- Page Templates
Solution
How is Partials used to add hidden fields and custom JavaScript to the Auth0 sign-up form?
Auth0 recommends using Partials as the primary method for inserting custom HTML into the signup prompt. Update the partials for the signup prompt using the Auth0 Dashboard or the Auth0 Management API.
Update the signup prompt partials via the Auth0 Dashboard by following these instructions:
- Navigate to Branding, and then select Universal Login.
- Select Enhance Screens with Partials.
- Select the Signup form by clicking the Edit signup button.
- Open the code editor by clicking one of the dotted sections on the right side of the interface.
- Insert the custom HTML and JavaScript into the editor.
- Select Save and Publish.
Insert the following HTML and JavaScript snippet into the partial to create the hidden fields and handle the external tracking cookie.
NOTE: The following code is for example purposes only and must be thoroughly tested before running in a production environment.
<input type="hidden" name="utm_source" id="utm_source">
<input type="hidden" name="gclid" id="gclid">
<script>
const urlParams = new URLSearchParams(window.location.search);
const source = urlParams.get('utm_source');
const gclid = urlParams.get('gclid');
if (source) {
document.getElementById('utm_source').value = source;
}
if (gclid) {
document.getElementById('gclid').value = gclid;
}
</script>
After a user signs up, Auth0 must capture and save the value from the hidden field. Create a Pre User Registration Action using the following example code to accomplish this requirement.
NOTE: The following code is for example purposes only and must be thoroughly tested before running in a production environment.
exports.onExecutePreUserRegistration = async (event, api) => {
const utmSource = event.request.body['utm_source'];
if (utmSource) {
api.user.setUserMetadata("utm_source", utmSource);
}
};How do Page Templates function as an alternative for adding hidden fields?
While Partials provide the most direct method for adding fields inside the signup form, Page Templates offer an alternative approach. This method introduces more complexity because the Page Template controls the HTML surrounding the login widget. A standard hidden field in the template HTML does not function as part of the form submitted by Auth0.
To resolve this limitation, the configuration requires using JavaScript within the Page Template to extract the tracking data and pass it to the Auth0 widget configuration. The widget then sends the data to the Pre User Registration Action.
Implement the following JavaScript example within the Page Template to capture URL parameters and pass them into the Auth0 widget configuration.
NOTE: The following code is for example purposes only and must be thoroughly tested before running in a production environment.
const urlParams = new URLSearchParams(window.location.search);
const utmSource = urlParams.get('utm_source');
var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
if (utmSource) {
config.extraParams = config.extraParams || {};
config.extraParams.utm_source = utmSource;
}
