Universal Login Page Customization - Partials

Knowledge Articles
1

Overview

This article explains how to customize specific sections of the Universal Login widget.

Applies To

  • Universal Login
  • Customizations
  • Customize specific sections of the Universal Login widget

Solution

Upload custom HTML and JavaScript (JS) code, known as Partials, to display in specific sections or to collect and validate additional data of the Universal Login and Signup widget. Update Partials exclusively via the Set partials for a prompt API endpoint.

The following requirements must be met:

  • The tenant must use a Custom Domain.
  • A Custom Page Template must be configured.
  • The Customize Login Page toggle must be disabled for Login Prompts.

For example, to add a “Test Link” to the sign-up widget, follow these steps:

  1. Open the Auth0 Dashboard and navigate to Applications > APIs.
  2. Select Auth0 Management API.
  3. Select API Explorer and copy the token.
  4. Go to the Management API Explorer.
  5. Select the Set API Token button and paste the API Token from step 3.
  6. Select the Set Token button.
  7. Select the prompt type, such as signup or login.
  8. In the body field, build the syntax needed to add the partial.
    Example Body:

JSON

{
   "signup": {
     "form-content-end": "<div class='ulp-text-align-center'><a href='https://www.example.com' target='_blank'>Test Link</a></div>"
   }
}

NOTE: Object properties such as signup or form-content-end must be in double quotes, the same as the string value containing the HTML element. The HTML element properties must use single quotes.

  1. Select Test Endpoint and confirm a 200 status code response is received.

The example above uses form-content-end to place the link at the end of the form content. Other available partials can be used to position the link differently within the widget.

Review the documentation on Customize Signup and Login Prompts for more information.