Logout always redirects to first url from Allowed Logout URLs

Marketplace Integration Help
,
1

I have a React application, and whenever I do logout, it always redirects to first URL from “Allowed Logout URLs” even though, I have specified the returnTo in my provider.

Here’s the code for my provider:

<Auth0Provider
            domain="<My domain here>"
            clientId="<My clientId here>"
            authorizationParams={{
                redirect_uri: window.location.origin + window.location.pathname,
                audience: '<My audience here>',
                scope: 'openid profile email',
            }}
            logoutParams={{
                returnTo: 'http://localhost:3000/login',
            }}
        >

So, let’s say my application is https://test.com (just an example). I have mentioned “https://localhost:3000/login, https://test.com/login” in the “Allowed Logout URLs” list. I have also mentioned them on the advanced settings on my Tenant level.

Still, whenever I do logout on https://test.com, it redirects me to “https://localhost:3000/login” since thats the first URL in the list.

How to redirect users to “https://test.com/login” instead of the localhost?

2

Hi there, I know it’s been a while since this was posted but I’ll provide my solution just in case someone else has the issue. I’ve used older versions of Auth0 before and not encountered this so I can only assume I was using older versions of the library.

Firstly, logoutParams doesn’t exist on the Auth0Provider, but it is an optional argument in auth0’s logout function.

I also found that the redirect_uri: window.location.origin within the authorizationParams object was seemingly being ignored. Originally, this would redirect to the correct URL in the “Allowed Logout URLs”, not just the first one.

Old:

const { logout } = useAuth0();
<Button onClick={() => logout()}>Log out</Button>

If you provide the information in the logoutParams option of the logout function, you’ll get the desired behaviour.

New:

const { logout } = useAuth0();
<Button 
  onClick={() =>
    logout({
      logoutParams: {
        returnTo: window.location.origin
      }
    })
  }
>
Log out
</Button>

Hope this helps!

1 Like