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

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:

  "friendly_message":"This domain is prohibited from signing up",
  "description":"Denied ",

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:

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.

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

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