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

Help
1

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

3

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
4

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

2 Likes
5

Great! Glad to hear it is working for you.

6

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