Getting “Callback URL mismatch” with Auth0

Question

I have an Auth0 client that's configured with the following callback URL:

http://localhost:4200

I can log in just fine.

The problem is when I navigate to a certain URL in my app: http://localhost:4200/places. Here's what happens:

1. I navigate to http://localhost:4200/places
2. Angular redirects me (correctly) to http://localhost:4200
3. I try to log in
4. I get an error from Auth0 saying "The url "http://localhost:4200/places" is not in the list of allowed callback URLs".

Auth0 is right, http://localhost:4200/places is not in my list of allowed callback URLs—and I don't want it to be. I don't want to list any and every URL that my user might get kicked back to the login screen from.

So for some reason something is happening that's telling Auth0 that the referring URL is http://localhost:4200/places rather than http://localhost:4200, even though http://localhost:4200 is in fact the URL in the address bar when I attempt to log in.

I realize I could specify http://localhost:4200 as the redirectUrl and "fix" the problem, but then I'd have to make redirectUrl be different on dev, staging, and production. It doesn't seem like that's probably the way people usually get around this issue.

How can I get Auth0 not to try to redirect me to /places?

Answer 1

I was experiencing this same issue and solved it with Shrek's suggestion above (not the same Schreck as me). However, I had to use window.top.location.origin instead of window.top.location.hostname. For me, window.top.location.origin equates to the Allowed Callback URLs values in my client settings in Auth0.

Here's my code:

    let stateOptions =
    {
        "auth0_authorize": this.authNonce,
        "return_url": router.url
    };

    let options =
        {
            closable: false,
            languageDictionary:
            {
                emailInputPlaceholder: "something@youremail.com",
                title: "Log me in"
            },
            auth:
            {
                redirectUrl: window.top.location.origin,
                redirect: true,
                responseType: 'token',
                params:
                {
                    state: btoa(JSON.stringify(stateOptions)),
                    scope: 'openid user_id name nickname email picture'
                }
            }
        };

    this.lock = new Auth0Lock('[your-auth0-clientid]', '[your-auth0-domain]', options);

Answer 2

this problem also confused me for a long time. Finally, I figured it out in a configuration page in Auth0.

It is very funny to do this. I do not know the reason why Auth0 use this to save the callback url. In fact, we always set the RedirectURL in the code. This is totally different from authorization in google. Anyway, the problem is solved.

By the way I google for this error at the very beginning but I found this solution in Auth0 configuration page. There is a video tutorial on the top.

I Hope this helped.