Custom error message using lock template in universal login not working

I’m using Universal Login with custom code.
I’m working from the Lock template.

I want to show a custom error message when sign up fails with “user_exists” error key and when login fails with “invalid_user_password” key.
I’ve added languageDictionary but the error that pops up is the fallback error. What am I doing wrong?

This is the relevant code:

// Decode utf8 characters properly var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@')))); config.extraParams = config.extraParams || {}; var connection = config.connection; var prompt = config.prompt; var languageDictionary ={ error: { forgotPassword: { too_many_requests: 'You have reached the limit on password change attempts. Please wait before trying again.', 'lock.fallback': "We're sorry, something went wrong when requesting the password change.", enterprise_email: "Your email's domain is part of an Enterprise identity provider. To reset your password, please see your security administrator." }, login: { blocked_user: 'The user is blocked.', 'invalid_user_password': 'Wrong credentials.', 'lock.fallback': "We're sorry, something went wrong when attempting to log in.", 'lock.invalid_code': 'Wrong code.', 'lock.invalid_email_password': 'Wrong email or password.', 'lock.invalid_username_password': 'Wrong username or password.', 'lock.network': 'We could not reach the server. Please check your connection and try again.', 'lock.popup_closed': 'Popup window closed. Try again.', 'lock.unauthorized': 'Permissions were not granted. Try again.', 'lock.mfa_registration_required': 'Multifactor authentication is required but your device is not enrolled. Please enroll it before moving on.', 'lock.mfa_invalid_code': 'Wrong code. Please try again.', password_change_required: 'You need to update your password because this is the first time you are logging in, or because your password has expired.', // TODO: verify error code password_leaked: 'We have detected a potential security issue with this account. To protect your account, we have blocked this login. An email was sent with instruction on how to unblock your account.', too_many_attempts: 'Your account has been blocked after multiple consecutive login attempts.', too_many_requests: "We're sorry. There are too many requests right now. Please reload the page and try again. If this persists, please try again later.", session_missing: "Couldn't complete your authentication request. Please try again after closing all open dialogs", 'hrd.not_matching_email': 'Please use your corporate email to login.' }, signUp: { invalid_password: 'Password is invalid.', 'lock.fallback': "We're sorry, something went wrong when attempting to sign up.", password_dictionary_error: 'Password is too common.', password_no_user_info_error: 'Password is based on user information.', password_strength_error: 'Password is too weak.', user_exists: 'The user already exists.', username_exists: 'The username already exists.', social_signup_needs_terms_acception: 'Please agree to the Terms of Service below to continue.' } }, title:"Sign in to Leap Finance", }; var loginHint = config.extraParams.login_hint; var colors = config.colors || {}; console.log(config); // Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration var lock = new Auth0Lock(config.clientID, config.auth0Domain, { auth: { redirectUrl: config.callbackURL, responseType: (config.internalOptions || {}).response_type || (config.callbackOnLocationHash ? 'token' : 'code'), params: config.internalOptions }, /* additional configuration needed for custom domains */ configurationBaseUrl: config.clientConfigurationBaseUrl, overrides: { __tenant: config.auth0Tenant, __token_issuer: config.authorizationServer.issuer }, assetsUrl: config.assetsUrl, allowedConnections: connection ? [connection] : null, rememberLastLogin: !prompt, languageDictionary: languageDictionary, theme: { logo: 'https://production.leapfinance.com/static/leap-finance-logo-192x192.png', primaryColor: '#443eff' }, prefill: loginHint ? { email: loginHint, username: loginHint } : null, closable: false, defaultADUsernameFromEmailPrefix: false, // uncomment if you want small buttons for social providers // socialButtonStyle: 'small' }); if(colors.page_background) { var css = '.auth0-lock.auth0-lock .auth0-lock-overlay { background: #F5F7F9 }'; var style = document.createElement('style'); style.appendChild(document.createTextNode(css)); document.body.appendChild(style); } lock.show();

Hi @aniket.behera and welcome to the Auth0 Community!

Have you setup your custom error messages in accordance with this documentation? It would also be a bit more helpful to see this code formatted for ease of readability, would you mind sending me your tenant name in a DM so I can have a look at your lock code?

Best Regards,
Colin

Hello.

It has been a while, but it might be helpful for other audiences, so let me share.

Could you please confirm “Use a generic response in…” in your tenant settings?


If this is on, then you will see the fallback error message.
when you turn it off, you will see the “user_exists” error message.

But the default setting is on for a security reason.

Hope it helps
Shunsuke

2 Likes

Once you have a chance to check out @shunsuke.tsutsui advice @aniket.behera let us know if you have any other questions!