Auth0 still lacks the ability to show custom error message when using custom HTML universal login page

[giladweiss]

Unfortunately, if you have a custom HTML universal login page AND you want to show specific errors from Actions. you are UNABLE to do that. It will only show “WE’RE SORRY, SOMETHING WENT WRONG WHEN ATTEMPTING TO SIGN UP.”

When code in Actions runs the following line: api.access.deny('cant-signup-with-this-domain', "This domain is prohibited from signing up"), the response coming back to the user’s frontend looks like this:

{
  "name":"InternalExtensibilityError",
  "statusCode":400,
  "code":"extensibility_error",
  "message":"cant-signup-with-this-domain",
  "friendly_message":"This domain is prohibited from signing up",
  "description":"Denied ",
  "fromSandbox":true}
}

One would expect that if the error contains “friendly_message”, the universal login page would show it, but instead it checks the constant strings defined in the languageDictionary (in error.signUp.extensionabilty_error and error.lock.fallback)

A not-so-good workaround was suggested by a user:

Pre-Registration Action calls api.access.deny, how to show specific message in Universal Login

Finally I did find a workaround: If your action reports an error like this: return api.access.deny(`something_happened`, `Something Specific Happened`); Then in the old Lock (if you have custom html/css for your login branding), there is no way to see that specific message Something Specific Happened however you can at least detect that any action had an error, which come through as a extensibility_error type. So in your customized html for the branding login you would have this as the langu…

This workaround suggest bad UX: having to distinguish between the errors in the frontend and displaying it as alert instead of the awesome red banner.

Having custom errors normally is possible since that same user reported that it works perfectly if you’re using “New Universal Login with no custom html/js”.

Bottom line, Auth0, please let us display custom errors from the Actions straight to the custom HTML error pane.

Acceptable solutions:

1. Letting api.access.deny(reason, friendly_message dictate the message for the frontend.
2. Let us control the error pane completely using lock.on("signup error"): give us the option to change the text of the error pane according to the error that was received.

[giladweiss]

Hi, I have found the correct solution. Apparently, you can just update the HTML element of the red banner:

lock.on('signup error', function(error) {
        const originalError = error?.original?.response?.body;
        
        // if we get error back from Auth0 Actions, this code makes sure the error is written in the red error banner
        if (originalError.code === 'extensibility_error' && originalError.friendly_message) {
        	const message = originalError.friendly_message;
        	const spanElement = document.querySelector('.auth0-global-message');
        	spanElement.textContent = message;
      	}
      });

This is an imperfect solution because I’m relying on the structure of the response - which I cant control - and I’m changing an HTML element which can be changed by Auth0