Customizing Universal Login Page Sections in Auth0 Using Partials

Auth0 Partials allow customization of specific sections of the Universal Login widget by injecting HTML and JavaScript into predefined insertion points. Updates to Partials via the Management API resolve issues where default widget sections cannot be visually or functionally modified.

• Auth0
• Universal Login
• Partials
• Management API

The Universal Login widget renders predefined sections that do not expose direct UI controls for customization. Without using Partials, injected HTML or JavaScript cannot target specific insertion points within the widget, so custom content does not appear.

What are Partials, and how do they customize the widget?

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

The tenant must meet specific requirements before using Partials.

The following requirements must be met by the tenant:

• 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.

How do Partials integrate into the Universal Login widget?

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, matching the string value of the HTML element. The HTML element properties must use single quotes.

9. 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.