Redirected temporarily to login page after refresh

[usaadi]

Hello,

I’ve been using The React @auth0/auth0-react package in my app, and everything is working fine. But there is a slight problem that happens when I refresh the page when I’m authenticated.

The browser redirects to the login page for a few seconds, and then back to the original page. I’m using a ProtectedRoute component that uses withAuthenticationRequired. So, how can I remove this seemingly unnecessary redirect?

Thanks

import { withAuthenticationRequired } from "@auth0/auth0-react";
//import useIsDemoAccount from "../../components/shared/hooks/useIsDemoAccount";

export const ProtectedRoute = ({
  component,
  activeDateRange,
  transactionType,
  setSelectedTxType,
}) => {
  const Component = withAuthenticationRequired(component, {
    onRedirecting: () => <div>Loading...</div>,
  });

  return (
    <Component
      activeDateRange={activeDateRange}
      transactionType={transactionType}
      setSelectedTxType={setSelectedTxType}
    />
  );
};

export default ProtectedRoute;

[ale.vesga1]

Our team is going back to answer some frequently asked question.

This issue has to do with the withAuthenticationRequired method. Looking into the Auth0 documentation it describes the following:

When you wrap your components in this Higher Order Component and an anonymous user visits your component they will be redirected to the login page; after login they will be returned to the page they were redirected from.

(Reference: withAuthenticationRequired | @auth0/auth0-react)

Hope this helps someone!