Auth0 Universal Login Button Text Customization Fails
Last Updated:
Overview
An administrator attempts to change the text of the "LOG IN >" button on the Auth0 Universal Login screen using the buttonText variable, but the change does not apply. This occurs because the tenant uses a Custom Login Page with the Lock template, which relies on the Classic Login experience rather than the New Universal Login. Resolve this issue by either modifying the languageDictionary in the Lock template or switching the tenant to the New Universal Login experience.
Applies To
- Auth0
- Classic Login
- New Universal Login
- Lock Template
- Custom Login Page
Cause
The buttonText variable only applies to the New Universal Login experience. When a tenant uses a Custom Login Page with the Lock login form, Auth0 displays the Classic Login experience. The Classic Login experience requires different configuration settings to customize text elements.
Solution
What steps are required to customize the button text in the Classic Login experience?
Modify the languageDictionary option in the Lock template to change the text displayed by applying the provided code snippet.
if (config.dict && config.dict.signin && config.dict.signin.title) {
languageDictionary = {
title: config.dict.signin.title,
loginSubmitLabel: 'Your Custom Text'}; // Modify the value here to your preference
} else if (typeof config.dict === 'string') {
language = config.dict;
}
Switching to the New Universal Login Experience Enables the buttonText Variable
Switch the tenant to the New Universal Login experience to use the buttonText variable by navigating through the Auth0 Dashboard and updating the core configuration.
- Navigate to Branding > Universal Login > Pro-code customizations > Core configuration in the Auth0 Dashboard.
- Select Universal Login.
NOTE: The Classic and New Universal Login experiences operate independently. Switching experiences requires rebuilding the entire user interface from scratch.
