'Callback URL mismatch' even though URL is present

My Auth0 logins on my Node.js/Angular 1.x app started failing unexpectedly this week, with the following error:

“Failed to load resource: the server responded with a status of 403 (Forbidden). There was an error fetching the SSO data. This could simply mean that there was a problem with the network. But, if a “Origin” error has been logged before this warning, please add “http://mxxxx-xxxxx.herokuapp.com” to the “Allowed Web Origins” list in the Auth0 dashboard.”

This was affecting my live server as well as my test environment, in which case the above would be replaced with “http://localhost:5000”. Both of these addresses are in my list of “Allowed Web Origins”.

I saw that some endpoints were removed recently, and that it was recommended that I update my Lock v9 to Lock v11, so I followed the migration guide, and updated it to the latest (11.9.1), as well as migrating to angular-lock (3.0.0). Same error.

While the migration guide used lockProvider.init(), none of the other Lock v11 guides use this anywhere, instead instantiating the Lock object directly using Auth0Lock(ClientID, Domain). I tried this as well, and get the same error.

I got this more specific error randomly after reloading one time:

" Callback URL mismatch.

The URL “http://localhost:5000/access_token=qQALlxxxxxw3&id_token=eyJ0exxxxxxxxxxxxxxxxxxxxxxxxxxw_OdI&scope=openid%20profile%20email&expires_in=86400&token_type=Bearer&state=s6ZMchxxxxxxxqp8L-677x5YH” is not in the list of allowed callback URLs. "

Obviously, the base URL is in the list, could it be checking the entire URL? Seems unlikely?


I think you might be missing a ? inside your callback.

Your callback URL in the application settings should be: http://localhost:5000/access_token

But the URL would be: http://localhost:5000/access_token?=qQALlxxxx...etc

Without the ? it may read the whole thing, instead of splitting off part as a query string.

I’ve added http://localhost:5000/access_token to the list, which didn’t help.

I’m unsure what to do with the change to the URL you recommend. I believe that URL was generated by the Auth0Lock object, which seems like the most basic initialization I could do, so if that wasn’t creating the right URL, it seems like it wouldn’t work for anyone using it.

That also doesn’t look like the correct format for a GET request to me… wouldn’t it be http://localhost:5000?access_token=qQAL1xxx In which case, adding the above to the callback list wouldn’t help, because the parameters wouldn’t be part of the URL.

@mayhew3 I see what you mean. I hadn’t digested the parameter names!

Can you provide a link to a repository where this code is? So I can have a look at how you’ve configured Auth0lock.

lockService.js and toolbarController.js are the other main auth logic centers.


Actually, here’s a much simpler one. I forked the Auth0.com QuickStart guide example for Angular 1.x, which is using the older auth0.js 9. After setting this up with my Auth0 account, it could log in correctly. I then went through the steps in the Auth0 Migration Guide:


Which, judging by the examples, was based on that same QuickStart code. However, after making all the recommended changes, I got the same access errors.

If you hover over the URL that timed out, you get the following (decoded and simplified for readability):

https://mayhew3.auth0.com/authorize?client_id=QdwxxxQNb&response_type=token id_token&redirect_uri=http://localhost:3000/access_token=hl03NCvxxxZp&id_token=eyJ0eXAiOxxxY7VhXwc&scope=openid%20profile%20email&expires_in=86400&token_type=Bearer&state=GrUBSaAzSUf41uHnvuB4DGokhbxBaXKu&scope=openid profile email&state=NSLxn1PxxxeMM42cfnddt&nonce=tuoxxxxoX_8DaL9XB9&response_mode=web_message&prompt=none&auth0Client=eyJuYW1xxxI6IjkuNS4xIn0=

You can see that the generated redirect_uri has no question mark. Not sure if this is the same problem.

Here is the modified QuickStart code:

Ok great, let me contact the quickstart team and see if this is something they’re aware of.