withAuthenticationRequires returns user to another route after page refresh

Help
, ,
1

Hey there,

I’m having an issue with the withAuthenticationRequired HOC. If I refresh a ProtectedRoute page it returns me to redirectUri page even if I declare the returnTo parameter.

Here is a quick summary of my code:

index.js

ReactDOM.render(
    <BrowserRouter>
        <Auth0Provider domain="xx" clientId="xx" redirectUri='http://127.0.0.1:3000/profile' audience="xx" scope="xx">
            <App />
        </Auth0Provider>
    </BrowserRouter>,
    document.getElementById('root')
);

Main.jsx

const Main = () => {
    return (
        <Switch>
            <Route exact path="/" component={Home} />
            ...
            <ProtectedRoute path="/credentials" component={Credentials} />
        </Switch>
    )
}

protected-route.jsx

const ProtectedRoute = ({ component, ...args }) => (
  <Route
    component={withAuthenticationRequired(component, {
      onRedirecting: () => <Redirection />,
      returnTo: window.location.origin
    })}
    {...args}
  />
);

What am I doing wrong? How can I fix this? Thanks in advance.

3

Hi @AlperenOzturk,

Looking at the example The Complete Guide to React User Authentication with Auth0, it looks like you can use the onRedirectCallback property of the Auth0Provider to handle the redirect:

import React from "react";
import { Auth0Provider } from "@auth0/auth0-react";
import { withRouter } from "react-router-dom";

class Auth0ProviderWithHistory extends React.Component {
  domain = process.env.REACT_APP_AUTH0_DOMAIN;
  clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
  audience = process.env.REACT_APP_AUTH0_AUDIENCE;

  onRedirectCallback = (appState) => {
    this.props.history.push(appState?.returnTo || window.location.pathname);
  };

  render() {
    return (
      <Auth0Provider
        domain={this.domain}
        clientId={this.clientId}
        redirectUri={window.location.origin}
        onRedirectCallback={this.onRedirectCallback}
        audience={this.audience}
      >
        {this.props.children}
      </Auth0Provider>
    );
  }
}

export default withRouter(Auth0ProviderWithHistory);

The returnTo prop of the withAuthenticationRequired component works alongside the onRedirectCallback. If you don’t have an onRedirectCallback prop, then I don’t believe the prop will do anything.

If you use the onRedirectCallback example above, then you shouldn’t need to use the returnTo prop unless you want to redirect somewhere other then the link the user clicked. For example, if a user clicked on the protected /profile link in the app, you could either leave out the returnTo prop from withAuthenticationRequired to have them land on /profile after they log in, or you could include the returnTo prop to have them land somewhere else after login (e.g. /welcome-back).

4

I don’t understand the usage of onRedirectCallback exactly so I couldn’t get it to work. I would be glad if someone with a bit knowledge on this could explain further out.

5

Hi @AlperenOzturk,

Here is the documentation for onRedirectCallback: https://auth0.github.io/auth0-react/interfaces/auth0_provider.auth0provideroptions.html#onredirectcallback

By default this removes the code and state parameters from the url when you are redirected from the authorize page. It uses window.history but you might want to overwrite this if you are using a custom router, like react-router-dom

This function runs after authentication to handle the redirect callback.

You can find a full example of overriding the default behavior specifically for React Router in this article:

Here is another example that is referenced in the documentation: https://github.com/auth0/auth0-react/tree/9a15c540fee6d53514eaaea77cbadfb767b14891/examples/cra-react-router

Let me know if you have additional questions regarding onRedirectCallback. Thanks!

6

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.