make better "onRedirectCallback" example to remove code and state about auth0-react

[type]

@37108 I had the same problem, the issue ended up being that I was using the latest 5.x version of history with react-router 5.
Try using history ^4.10.1

"history": "^4.10.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",

[37108]

@adamjmcgrath thanks for a quick response.

Passing a pathname as a string to history.replace will replace the whole relative url, including removing the url's query params.

I'll check replace behavior and test my application again.
This is probably my problem.

I can't show whole of code because the repository is private. So, I show my environment and related code.
I expect like below, but browser shows like /secure?code=xxx&state=xxxx.

1. anonymous user access to /secure
2. redirect to Universal Login
3. success authentication and redirect buck to /secure
4. browser only shows /secure

environment

• "history": "^5.0.0",
• "react": "^16.13.1",
• "react-dom": "^16.13.1",
• "react-router-dom": "^5.2.0",

// protected.tsx
import { withAuthenticationRequired } from '@auth0/auth0-react';
import React from 'react';
import { Route } from 'react-router-dom';

// eslint-disable-next-line
export function ProtectedRoute({ component, ...args }) {
  return (
    <Route component={withAuthenticationRequired(component, {})} {...args} />
  );
}

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Auth0Provider, useAuth0 } from '@auth0/auth0-react';
import { createBrowserHistory } from 'history';
import { Route, Router, Switch } from 'react-router-dom';

import { ProtectedRoute } from './protected';

import { Header } from './components/header';
import { Secure } from './secure';
import { Welcome } from './welcome';

export const history = createBrowserHistory();

// working not exptected
// const onRedirectCallback = async appState => {
//   history.replace(pathname: appState?.returnTo || window.location.pathname);
// };

// working well if I write this
const onRedirectCallback = async appState => {
  history.replace({
    pathname: appState?.returnTo || window.location.pathname,
    search: '',
  });
};

function App() {
  const { isLoading } = useAuth0();

  if (isLoading) {
    return <p></p>;
  }
  return (
    <Router history={history}>
      <div className="w-screen h-screen">
        <Header />
        <Switch>
          <Route path="/" exact component={Welcome} />
          <ProtectedRoute path="/secure" component={Secure} />
        </Switch>
      </div>
    </Router>
  );
}

ReactDOM.render(
  <Auth0Provider
    domain="DOMAIN"
    clientId="CLIENT_ID"
    redirectUri={window.location.origin}
    onRedirectCallback={onRedirectCallback}>
    <App />
  </Auth0Provider>,
  document.querySelector('#root')
);

[adamjmcgrath]

np, thanks @37108 - will close. But please feel free to reopen if you have any other questions

[adamjmcgrath]

Hi @37108 - thanks for raising this

Passing a pathname as a string to history.replace will replace the whole relative url, including removing the url's query params. I've just verified this on our react-router example app (https://github.com/auth0/auth0-react/tree/master/examples/cra-react-router) which uses the same logic.

Do you have an example I can look at where this is not working as expected?

[adamjmcgrath]

// history.replace(pathname: appState?.returnTo || window.location.pathname);

history.replace(appState?.returnTo || window.location.pathname); should work - let me know if it doesn't

[37108]

should work - let me know if it doesn't

I tried this code, but did not work.
If there is no problem router, I think Webpack or Webpack Devserver are not working well...

@adamjmcgrath
Thanks for helping a lot! maybe this is not problem about examples environment, about my environment.
If you don't need to action, please close this issue.

[andrewli-ca]

I'm just commenting for anyone that is running into the same issue and is using react-router-6 and history v5. The solution to remove the code and state parameters from the browser location bar is to use the navigate API instead of the history API. This was mentioned in the react-router-6 migrating docs here.

[connershoop]

I had the problem of the url parameters being replaced, even after they were cleared.
This solution worked. It forces a page reload and the code and state url parameters cannot be reset as they were being before.

  history.replace(
    appState && appState?.returnTo
      ? appState?.returnTo
      : window.location.pathname
  );
  // code and state url parameters are reset unless page reload is triggered
  history.go(0);
};