State not echoed in logout redirect

[jamesfoster]

After sending a user to

https://tenant.auth0.com/v2/logout?state=a3b7c5d1f9e&returnTo=https://myapp/logout.html

I expect the user to be redirected to

https://myapp/logout.html?state=a3b7c5d1f9e

But instead they are redirected to just

https://myapp/logout.html

with no state parameter. Is there something I need to configure in my tenant to achieve the desired behaviour. In just the same way that using state in the login request helps us check the request came from our app, the same should be true for logout.

Thanks for any assistance.

[stephanie.chamblee]

Hi @jamesfoster,

Welcome to the Community!

I believe the state functionality in the documentation you’ve linked only applies to login flows. If you’d like to keep track of the state param for logout, you should be able to include the state param in the returnTo (the returnTo value would need to be URL encoded, though):

https://tenant.auth0.com/v2/logout?returnTo=https://myapp/logout.html?state=a3b7c5d1f9e

Here is an example that uses the react SDK:

import { useAuth0 } from "@auth0/auth0-react";

const NavBar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const { logout } = useAuth0();
  const toggle = () => setIsOpen(!isOpen);

  const logoutWithRedirect = (state) =>
    logout({
      returnTo: `${window.location.origin}?state=${state}`,
    });

  return (
    <div className="nav-container">
      <Navbar color="light" light expand="md">
        <Container>
          <NavbarBrand className="logo" />
          <NavbarToggler onClick={toggle} />
          <Collapse isOpen={isOpen} navbar>
            <Nav className="mr-auto" navbar>
                <NavItem>
                  <FontAwesomeIcon icon="power-off" className="mr-3" />
                  <RouterNavLink
                    to="#"
                    id="qsLogoutBtn"
                    onClick={() => logoutWithRedirect('abc123')}
                  >
                    Log out
                  </RouterNavLink>
                </NavItem>
              </Nav>
          </Collapse>
        </Container>
      </Navbar>
    </div>
  );
};

export default NavBar;