Modify login input before evaluating authentication data

[o.schimratzki]

We do currently use a customized version of the classic universal login with Lock.js. Our login name is always a 10 digits customer number and if the number is shorter, it is filled up with leading zeroes. But customers regularly try to login without the leading zeroes and contact our support when their login fails. So we do have a requirement to automatically add the missing zeroes upon login. We tried to do this by adding a javascript that updates the form’s content upon the focusOut&keydown or submit event, but even if the content of the input field is visually changed to the right value, the submitted value is still the original one. I suspect this to be related to the react component nature of the Lock.js. The script looks roughly like this:
function rectifySyntax(el) {
el.value = ‘testOut’;
}
document.addEventListener(“focusout”, function(e){
if(e.target.matches(“input[name=username]”)){
rectifySyntax(e.target);
}
});

I also alternatively looked into the new login experience, but if I understand the capabilities correctly it is not possible to add a custom javascript to this login UI, right?

Does anybody see a possibility to get this requirement solved? Thanks in advance!

[dan.woda]

Hi @o.schimratzki,

Welcome to the Auth0 Community Forum!

This would be a workaround, not exactly what you describe, but this may work for you.

You can enforce certain username lengths. You could set it to 10 digits. Then customize the error message, specifically the usernameFormatErrorHint to tell the user it should be a 10 digit username starting with zeros.

Let me know what you think,
Dan

[o.schimratzki]

Hi @dan.woda ,

thanks for your reply! I’ve tried your approach on a test tenant, but I don’t get the hint on any input that breaks the connection boundaries. Just the usual ‘wrong username and password’ when the authentication fails. Do I need to enable the validation somewhere?

Regards,
Oli

[dan.woda]

Could you post the code showing how you implemented the hint?

[o.schimratzki]

Essentially I did it like this:

var languageDictionary= {
    	usernameOrEmailInputPlaceholder: "customer id",
    	title: "Custom title",
        error: {
      	  login: {
      		'lock.invalid_username_password': 'Wrong username or password. <br/>Attention: Username is always 10 digits long - missing digits should be filled up with leading zeros.'
    	 }
      }
};

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      assetsUrl:  config.assetsUrl,
      allowedConnections: ['Username-Password-Authentication'],
      rememberLastLogin: !prompt,
      language: language,
      languageDictionary: languageDictionary,
      theme: {
        logo:            'logo.url/logo.png',
        primaryColor:    colors.primary ? colors.primary : 'green'
      },
      forgotPasswordLink: 'password.url',
      prefill: null,
      closable: false,
      defaultADUsernameFromEmailPrefix: false
});

lock.show();

[dan.woda]

Hi @o.schimratzki,

I got this to work using the same code. Can you cmd-f and make sure there isn’t another language dictionary object overriding?