CODEWITHSUNDEEP
reactjsauth0auth0-connection
harsh pamnani
harsh pamnani

Reputation: 1756

Auth0 Logout always redirects to first url from Allowed Logout URLs

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?

Upvotes: 0

Views: 782

Answers (2)

Sam Maclean
Sam Maclean

Reputation: 21

I posted an answer on Auth0's community board, but I'll paste it here just in case:

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

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

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

Hope this helps!

Upvotes: 2

Ahmed Mera
Ahmed Mera

Reputation: 583

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

Upvotes: 1

Related Questions