Customize error for wrong mobile number and otp in lock passwordless universal Login

Hi,

I’ve been integrating auth0 in my mobile app using the universal login flow. The following options I’ve enabled in my account
Experience : Classic
Customization: Identifier + Password

I followed this solution, where i was passing error json into my languageDictionary variable, but still i wasnt getting the error messages which i customized

https://community.auth0.com/t/custom-error-message-using-lock-template-in-universal-login-not-working/35871

const config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
       config.extraParams = config.extraParams || {};
       const connection = config.connection;
       const prompt = config.prompt;
       var languageDictionary;
       var language;

       if (config.dict && config.dict.signin && config.dict.signin.title) {
           languageDictionary = { title: '' };
       } else if (typeof config.dict === 'string') {
           language = config.dict;
       }
       languageDictionary = Object.assign(languageDictionary, {
           "error": {
               "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.",
                   "mobile" : "",
                   "otp" : "",
                   "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.",
                   "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 are 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."
               }
           }
       })
       const loginHint = config.extraParams.login_hint;

       const lock = new Auth0LockPasswordless(config.clientID, config.auth0Domain, {
           auth: {
               redirectUrl: config.callbackURL,
               responseType: (config.internalOptions || {}).response_type ||
                   (config.callbackOnLocationHash ? 'token' : 'code'),
               params: config.internalOptions
           },
           configurationBaseUrl: config.clientConfigurationBaseUrl,
           overrides: {
               __tenant: config.auth0Tenant,
               __token_issuer: config.authorizationServer.issuer
           },
           assetsUrl: config.assetsUrl,
           allowedConnections: connection ? [connection] : null,
           rememberLastLogin: !prompt,
           language: language,
           languageDictionary: languageDictionary,
           theme: {
               logo: '"',
               primaryColor: '#8d1831'
           },
           closable: false
       });

       lock.show();

Though I’ve enabled this, I’m not able to make it work. Please help

Thanks in advance

Hi @ssharma,

Welcome to the Community!

You can customize the passwordless error messages like this:

    var languageDictionary = {
        error: {
          passwordless: {
           // User enters incorrect code
            invalid_user_password: 'That is not the code',
           // User does not enter code (i.e. leaves field blank)
            'bad.verification_code': 'No code provided',
            // invalid phone number
            'bad.phone_number': 'Please enter a valid phone number'
          }
        }
    };

You can update your lock code like so:

const config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
       config.extraParams = config.extraParams || {};
       const connection = config.connection;
       const prompt = config.prompt;
       var languageDictionary;
       var language;

       if (config.dict && config.dict.signin && config.dict.signin.title) {
           languageDictionary = { title: '' };
       } else if (typeof config.dict === 'string') {
           language = config.dict;
       }
       languageDictionary = Object.assign(languageDictionary, {
           "error": {
              passwordless: {
               // User enters incorrect code
                invalid_user_password: 'That is not the code',
               // User does not enter code (i.e. leaves field blank)
                'bad.verification_code': 'No code provided',
                // invalid phone number
                'bad.phone_number': 'Please enter a valid phone number!!!'
              }
           }
       })
       const loginHint = config.extraParams.login_hint;

       const lock = new Auth0LockPasswordless(config.clientID, config.auth0Domain, {
           auth: {
               redirectUrl: config.callbackURL,
               responseType: (config.internalOptions || {}).response_type ||
                   (config.callbackOnLocationHash ? 'token' : 'code'),
               params: config.internalOptions
           },
           configurationBaseUrl: config.clientConfigurationBaseUrl,
           overrides: {
               __tenant: config.auth0Tenant,
               __token_issuer: config.authorizationServer.issuer
           },
           assetsUrl: config.assetsUrl,
           allowedConnections: connection ? [connection] : null,
           rememberLastLogin: !prompt,
           language: language,
           languageDictionary: languageDictionary,
           theme: {
               logo: '"',
               primaryColor: '#8d1831'
           },
           closable: false
       });

       lock.show();
1 Like

Thanks Stephanie. I really appreciate for your reply. The solution is working for me.

2 Likes

Great! Glad to hear it is working for you.

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.