Login Validation Messages - Real Headache

[Phil2020]

There’s a real lack of consistency in the validation responses for Universal Login. Here’s a taste of how I have to parse validation responses:

function displayError(err) {
        var errorMessage = document.getElementById('error-message');
        console.log('err', err);
        
        if (err.original?.response?.text == 'invalid username') {
          errorMessage.innerHTML = 'Username is invalid or already in use.';
        }
        else if (err.code != 'invalid_password'
            && err.description != undefined && err.description.indexOf('(password)') !== -1) {
          errorMessage.innerHTML = 'Password is too short.';
        }
        else if (err.code == 'invalid_password') {
          	errorMessage.innerHTML = 'Password:<br/>' + err.policy.split('\n').join('<br/>');
        }
        else if (err.description != undefined
                 && err.description.indexOf('email') !== -1) {
          errorMessage.innerHTML = 'Email is invalid.';
        }
        else {
          errorMessage.innerHTML = err.description;
        }

Can this be improved? It’s pretty crazy. If I don’t parse at all – some validation messages don’t even appear – with the default behavior.

[art.rosnovsky]

Hey there @Phil2020! Let’s figure it out.

I’m not entirely sure what is going on here. Are you trying to customize error messages?

Could you please take a look these documents? There are ways to customize error messages, if that’s what you’re trying to achieve.

https://auth0.com/docs/universal-login/new-experience/text-customization-new-universal-login

https://auth0.com/docs/universal-login/prompt-login

Please let me know if I misunderstood your intentions.

[Phil2020]

But the default login won’t even display correctly for certain use-cases. Like, if I don’t enter a username or password, it presents a red-hued element that contains no text whatsoever. Which, given the inconsistency in the validation models, makes sense – as a likely bug.

[art.rosnovsky]

I’m not sure I understand. Could you please provide an example of this happening?

[Phil2020]

No, but if you look closely at the original post, you’ll see exactly what I’m talking about.
When you submit the login form, it gives you back a response. If it’s an error code response (ex: validation fails for some reason) you end up with an “error” object. Pretty standard.

So, the error object has different structures/properties, depending on the validation use-case.

You have everything at your disposal to re-create this on your side. It doesn’t get any easier.

[Phil2020]

You need to open your browser’s dev console to examine the response after you submit the form, under different use-cases. In one use-case – include neither username or password. Then try username, but no password. Then try password, but no username. Then try a password that doesn’t meet the validation criteria. Etc.

How to open the browser console — Screenful

[art.rosnovsky]

@Phil2020 I genuinely don’t understand what the issue is exactly, and what issue you’re trying to solve. Are you using new Universal Login or does it happen in a Classic one?

You shouldn’t be parsing errors like this. You shouldn’t be replacing Auth0 provided error messages like this (there’s a proper way to customize prompts). You shouldn’t rely on text or code of error messages in order to ‘parse’ them.

What I’m looking for is a link to where this is happening and steps to reproduce. Could you please provide this? I’m unable to reproduce red-hued element that contains no text whatsoever, and need your help getting to this state.

[Phil2020]

1. Are you using new Universal Login or does it happen in Classic one?

OP: There’s a real lack of consistency in the validation responses for Universal Login

2. You shouldn’t be parsing errors like this.

OP: But the default login won’t even display correctly for certain use-cases. Like, if I don’t enter a username or password, it presents a red-hued element that contains no text whatsoever.

Additionally, it doesn’t even display the reasons for password validation failure. Ex: length, characters, etc.

3. I’m unable to reproduce red-hued element that contains no text whatsoever

I’m in the middle of refactoring my project locally, and don’t have a deployed version to test. In any case, when I have a chance I’ll screenshot it for you here.

[art.rosnovsky]

There are functional differences between the New Universal Login experience and the Classic Universal Login experience.

New Universal Login Experience

Depending on which one you’re using, troubleshooting approaches will vary. I haven’t seen the issue with empty error elements yet, and I’m having troubles reproducing it.

Could you please try the orange Sign In button (top right) here: https://dseapps.dev/ and see if you can reproduce the issue there?

[Phil2020]

I see – I was unable to reproduce with the link you provided. It appears that I am using Classic, as my understanding is that it won’t use New if Custom Login is enabled. Which it is, because I want to do things like change the background, and other custom styling.

Is that correct?

[art.rosnovsky]

Yes, Classic allows for more extensive customizations, but that’s also where most of the errors and issues arise, especially when these customizations go beyond what’s supported.

Here’s a brief overview of the Classic experience and its customization options:

Customize Classic Universal Login Pages

Specifically for UI stuff, check this out: https://auth0.com/docs/libraries/lock/lock-configuration

It may be worth trying to reset your existing custom page to the default one to see if some of your changes contributed to the issue at hand.