Login Validation Messages - Real Headache

Help
,
1

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.

3

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.

4

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.

1 Like
5

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

6

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.

7

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.

8

@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.

9
  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

  1. 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.

  1. 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.

10

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

image
image1620×774 107 KB

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?

11

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?

12

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:

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.

1 Like
13

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