Lock: Lock still not showing rule errors in redirect mode

[adamtay]

Lock version: 10.5.1
Browser: Chrome 54.0.2840.71
Issue related to issue #637 and supposedly fixed in PR #639.

I am still unable to display custom errors in redirect mode. I am using the latest lock version (10.5.1) which has PR #639 merged in.

Simple rule to throw unauthorized error

function (user, context, callback) {
  return callback(new UnauthorizedError('This is an UnauthorizedError.'));
}

Specified the flashMessage property in the lock options. Nothing is shown on lock.

var lockOptions = {
  flashMessage: {
    type: 'error',
    text: 'error message'
  }
 };

var lock = new Auth0Lock(auth0ClientId, auth0Domain, lockOptions);
lock.show();

Specified the flashMessage property as an argument which display 'error message' on lock.

var lock = new Auth0Lock(auth0ClientId, auth0Domain, lockOptions);
lock.show({
  flashMessage: {
    type: 'error',
    text: 'error message'
  }
});

Hooked into the authorization_error event which contains the error message in the error parameter but is not shown on lock.

lock.on('authorization_error', function(error) {
  lock.show({
    flashMessage: {
      type: 'error',
      text: error.error_description
    }
  });
});

[AmaanC]

Your problem is probably that you're calling lock.show() on page load, and that is overriding the lock.show({ flashMessage: ... });.

Here's a simple HTML page to help you out:

<script src="https://cdn.auth0.com/js/lock/10.5.1/lock.min.js"></script>
<button id='login'>Login</button>

<script>
var lock = new Auth0Lock(
    'YOUR_CLIENT_ID',
    'YOUR_ACCOUNT.auth0.com',
    {}
);

lock.on("authorization_error", function(error) {
    console.log('AuthZ error', error);
    lock.show({
        flashMessage:{
            type: 'error',
            text: error.error_description
        }
    });

});

document.getElementById('login').addEventListener('click', function() {
  lock.show();
});
</script>

[adamtay]

Thanks @AmaanC but the app that I am working with has a dedicated login page (/login) which would need to display lock on page load.

[AmaanC]

Could you try this slight modification? Instead of calling lock.show(); on page load, call it when the hash_parsed event fires like this:

lock.on('hash_parsed', function(hash) {
    // There is no hash, which means that this is the user's first
    // visit, i.e. the authenticated or error events
    // haven't fired
    if (!hash) {
        lock.show();
    }
});

lock.on("authorization_error", function(error) {
    console.log('AuthZ error', error);
    lock.show({
        flashMessage:{
            type: 'error',
            text: error.error_description
        }
    });

});

[adamtay]

Handling the hash_parsed event has resolved it. Main issue was lock.show() overriding lock.show({ flashMessage: ... }). Thanks @AmaanC

[eroncastro]

I am having the same issue. But I am using the hosted pages.
How can I automatically display Auth0Lock and handle the flash messages?

My code:

    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: config.callbackOnLocationHash ? 'token' : 'code',
        params: config.internalOptions
      },
      assetsUrl: config.assetsUrl,
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageDictionary: languageDictionary,
      theme: {
        logo: 'https://s3-sa-east-1.amazonaws.com/imagens-cgcmd-plataformas/icons/plat.png',
        primaryColor: '#00A6D3'
      },
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      closable: false,
      loginAfterSignUp: false,
      // uncomment if you want small buttons for social providers
      // socialButtonStyle: 'small'
    });

    lock.on('hash_parsed', function(hash) {
      // There is no hash, which means that this is the user's first
      // visit, i.e. the authenticated or error events
      // haven't fired
      if (!hash) {
          lock.show();
      }
    });

    lock.on("authorization_error", function(error) {
      console.log('AuthZ error', error);
      lock.show({
        flashMessage:{
            type: 'error',
            text: error.error_description
        }
      });
    });

[AmaanC]

@eroncastro The flashMessage option is for SPAs that don't redirect anywhere and therefore need to handle the errors on the same page as where the authentication happens.

If you're using the Hosted Login Page, you need to redirect back to your client (mobile app, webapp, etc.) so that the _client_ can deal with the error and take the appropriate action. If we were to show the flashMessage on the Hosted Login Page itself, you might see users go from your client to Auth0 and never come back and your client would have no idea why.

Per the spec:

If the End-User denies the request or the End-User authentication fails, the OP (Authorization Server) informs the RP (Client) by using the Error Response parameters defined in Section 4.1.2.1 of OAuth 2.0 [RFC6749]. (HTTP errors unrelated to RFC 6749 are returned to the User Agent using the appropriate HTTP status code.)

Unless the Redirection URI is invalid, the Authorization Server returns the Client to the Redirection URI specified in the Authorization Request with the appropriate error and state parameters. Other parameters SHOULD NOT be returned.

If you insist on showing these errors on the Hosted Login Page, you'll need your current Hosted Login Page setup + you'll need your redirectUrl to redirect back to our hosted login page.
For example, if your redirectUrl is set to example.com/foo, you can put JS like this on that page:

if (location.hash.indexOf('error') !== -1) {
  location.href = auth0.buildAuthorizeUrl(myCustomOptions) + location.hash;
}

That way, if there is an error sent to example.com/foo, the error is forwarded to your Hosted Login Page and displayed there.

More about buildAuthorizeUrl here.

Please note that this is _not_ recommended and may have unintended side-effects - for example renewAuth may also redirect to your client with a login_required at times - in this case, sending the user back to the Hosted Login Page may or may not be appropriate, and you'll have to handle all such cases yourself.

[hnordt]

@AmaanC

The flashMessage option is for SPAs that don't redirect anywhere and therefore need to handle the errors on the same page as where the authentication happens.

I don't think it's right. For example, I have a SPA that uses redirection instead of popups, and I still need to show the flashMessage on authorization error, for example, I'm blocking some domains.

[omar]

Bumping this to get visibility? I couldn't find a way to display error messages on the login page for unauthorized errors in a redirect mode hosted login page.