Auth0 Logout always redirects to first url from Allowed Logout URLs

Question

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/logout',
            }}
        >

So, let’s say my application is located at https://example.com. I have mentioned https://localhost:3000/logout, https://example.com/logout in the Allowed Logout URLs list for my application on Auth0. I have also mentioned them on the advanced settings on my Tenant level.

I have also tried to provide returnTo while calling logout like below:

const { logout } = useAuth0();
logout({ returnTo: window.location.origin });

I am planning to use different Auth0 tenant for differnet environments going forward, but for now we just have a single tenant between dev and staging envs.

I have already looked at Auth0 community but no success so far. For example - https://community.auth0.com/t/auth0-allowed-logout-urls-only-working-with-1st-url-in-the-list/113002

Still, whenever I do logout when I am on https://example.com, it redirects me to https://localhost:3000/logout since thats the first URL in the list.

How to redirect users to https://example.com/logout instead of the localhost?

Answer 1

Instead of statically returnTo URL in the Auth0Provider component, try setting it dynamically based on the current environment, Like that:

<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: window.location.origin + '/logout',
  }}
>