State and Code Parameters Stuck in URL react-auth0 - User Getting Logged Out on Page Refresh

Knowledge Articles
,
1

Overview

After logging into an application that utilizes react-auth0, state and code parameters are still shown on the callback URL, resulting in the user getting logged out after a page refresh.

Applies To

  • Applications using react-auth0

Cause

This is caused by the misconfiguration or the lack of the function onRedirectCallback found in the Auth0Provider, which deals with the code and state parameters.

Solution

Implement the onRedirectCallback function.

This function specifically deals with removing the state and code parameters from the URL after being redirected from the authorize page. Without it, the state and code parameters will still be present in the URL, making it an invalid callback URL and getting the user logged out on page reload.

Here’s a code example for it:

const onRedirectCallback = (appState) => {
  history.push(
    appState && appState.returnTo ? appState.returnTo : window.location.pathname
  );
};

Please make sure to pass this when rendering the Auth0Provider

Related References