Show rule error in Universal Login

[FDX]

Hi! I’m trying out the new version of the Universal Login and would like to show errors returned by rules. For example, a rule for verifying email:

function (user, context, callback) {
  if (!user.email_verified) {
    return callback(new UnauthorizedError('Please verify your email before logging in.'));
  } else {
    return callback(null, user, context);
  }
}

Nothing shows up in the Universal Login after this rule returns error. Based on other comments in this forum or GitHub, I believe this used to work with Lock before. I’ve read it’s possible to redirect to custom pages, but in order to keep the same UX we’d prefer if the Universal Login can show the errors itself.

Ideally, this error would be shown after signups + auto login since the email hasn’t been verified yet.

I also read the current limitations of the new Universal Login but it doesn’t mention anything about this. Is there anything I’m missing?

Thank you.

[dan.woda]

Hi @FDX,

I just added that error to a rule and tested in both classic UL and new UL and am getting the same experience. Can you post a screen shot of what you are experiencing with the classic UL error handling?

Thanks,
Dan

[FDX]

Thanks for answering!

The experience I get is the same in both, nothing shows up, it just redirects to a plain login without showing any error just like nothing happened. However, in the dashboard I can see the failed login attemp: Failed Login Please verify your email before logging in. a few seconds ago Username-Password.

I read around the forum or GitHub that it used to work with Lock (before UL), so I’m not sure if this is a problem in UL or I’m doing something wrong.

The code that opens the UL is similar to this: vue-graphql-enterprise-boilerplate/index.js at master · frandiox/vue-graphql-enterprise-boilerplate · GitHub , but then we call webAuth.authorize() instead of webAuth.login() to open the UL.

– Just found something interesting. Refreshing the UL (or rather, going to my app and being redirected again by calling webAuth.authorize() ), does show the error in console, but not in the UI:

{original: {…}, code: "unauthorized", description: "Please verify your email before logging in.", error: "unauthorized", error_description: "Please verify your email before logging in."}

Any idea of what can be happening?
Thanks

[dan.woda]

Okay I think I may have an idea of what is happening. Can you post your webAuth and your authorize code. Be sure to obscure any sensitive data. In addition, can you send me your tenant name via DM.

[FDX]

Something like this:

import auth0 from 'auth0-js'

const authConfig = {
  domain: process.env.VUE_APP_AUTH0_DOMAIN,
  clientID: process.env.VUE_APP_AUTH0_CLIENT_ID,
  audience: process.env.VUE_APP_AUTH0_AUDIENCE,
  redirectUri: `${window.location.origin}/login`,
  responseType: 'token id_token',
  scope: 'openid profile email',
}

const webAuth = new auth0.WebAuth(authConfig)

/**
 * @description Open Universal Login
 */
export function authorize() {
  webAuth.authorize()
}

Sending you a DM in a minute.

[dan.woda]

Side note, have you looked through these docs and the methods described aren’t having the desired effect:

Default Auth0 Error Page

Customize Error Pages

[FDX]

@dan.woda I have the generic error pages selected. Is that what should appear after the rules return errors? I was assuming that the UL would show the login form plus an error message, just like when the password is wrong. But in any case, not even the generic error page appears

[dan.woda]

I think I understand what you are asking. Take a look at this topic, Josh outlines the typical handling of errors.

Universal Login, Showing error messages returned from rules

Happy to help! The method you’re using, Auth0\SDK\Auth0->login() does not take into account parameters, you’re correct. But you can build the link yourself and include those parameters if you want. The method is here: … and an example of how that method is used is here: In your error handling, you can build out the authorize link if those error params are present.

Let me know if that addresses it.

Thanks,
Dan

[FDX]

This is how I expected rule errors to work (just a mockup):

But looks like this is not supported (related Custom error in rules in Auth0 - HOW TO )

It’s a bit confusing since there are docs that suggest it could be supported (like Customize Lock Error Messages for Lock, not UL).

Also, looks like errors in rules always redirect to the default callback url, not to the generic/custom error page. At least a hash with error_description is appended to the callback. Therefore, the only thing I can do is handle that hash in my callback url and redirect to a custom page to handle it.

@dan.woda Please let me know if anything I said is wrong.

[dan.woda]

Hi @FDX,

I dug in on this one, and the answer is a no, you cannot return an error from a rule in the login form. This is because the rule happens after authentication and the redirect. Essentially, you are already redirected by the time the rule runs. I had a suspicion of this, but that doc you listed is fairly confusing. I think the particularly confusing part is in regards to this line:

“If you are returning custom error codes from a rule or a custom database script, you can also add the error messages in the dictionary:”

I think this is true for custom DB scripts, but not a rule. I am going to confirm with the team and try and clarify. I will report back with any relevant info.

With that being said, the best route will be to use a custom page to display the error returned from the rule.

Thanks for working through this.

Best,
Dan