Auth0 Home Blog Docs

Redirect URL doesn't work

redirect
callback
environment

#1

If I log in from my local host environment which is compiled with the auth0.WebAuth object looking like this:

auth0 = new auth0.WebAuth({
     clientID: 'adscsdcascascascasdcsdac',
     domain: 'webatom.auth0.com',
     responseType: 'token id_token',
     audience: 'https://api.webatom.com',
     redirectUri: 'http://localhost:5000/callback',        
     scope: 'openid profile'
 });

I want it to redirect the developer to the localhost.

If I log in (or the user logs in) from the production environemnt ie. from jtrade.pro I want them to be redirected to jtrade.pro/callback. Obviously the object in the production version looks like this (with a different redirect uri):

auth0 = new auth0.WebAuth({
    clientID: 'adscsdcascascascasdcsdac',
    domain: 'webatom.auth0.com',
    responseType: 'token id_token',
    audience: 'https://api.webatom.com',
    redirectUri: 'http://jtrade.pro/callback',        
    scope: 'openid profile'
});

As far as I understood, thats how you do it. Pass the uri and you will be redirected to the required page if the uri is whitelisted and comma separated in the client settings. Beautifull, I whitelisted and comma separated.

Last step, the hosted page.

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
  auth: {
    redirectUrl:  config.callbackURL,
    responseType: 'token',
    params: config.internalOptions
  }

Redirect URL is set to config.callbackURL which is as far as I understood makes auth0 look into the whitelist and see if one of the provided uri is there and redirect the user if it is.

However, this doesn’t happen. Auth0 only redirects the user to the first uri in the whitelist. I can’t find a suitable solution for this issue. Hopefully someone ran into this situation as well.


#2

I took a quick look at the environment you linked to and the login action is being performed through an hardcoded URL similar to this:

<a href="https://[your_domain].auth0.com/login?client=yOqKcx...">Login</a>

There are a few thing wrong with doing the above, in particular:

  • you MUST NOT be navigating your end-users directly to /login endpoint; you SHOULD navigate to the /authorize endpoint instead.
  • you MUST include more parameters than just the client identifier when you navigate to the appropriate endpoint. In particular, if you want to use a specific redirect URL then you need to include the parameter.

You can quickly meet the above requirements if you use the SDK authorize method instead of using a simple anchor pointing to an URL. You already seem to be configuring the Auth0.js library instance correctly so you should just update the code to handle the login as a button click and then call the appropriate method.


#3

Thank you, I totally forgot about this.


#4

Thank you, I totally forgot about this.


#5