Inifinite redirecting after loginWithRedirect()

Hi,

I’m encountering a very weird (and annoying problem). We want to switch from loginWithPopup() to loginWithRedirect(). The problem is that it works well in dev & staging environment, but not in production mode (staging & production share exactly the same deployment and code, except for the URL). In production mode, there is an infinite redirect (or re-render?) after the user logs in (but the URL stays the same in the address bar).

Here is the code we use (ReactAuth0Provider is above AuthenticationGate):

const useReactAuth0Authentication = (): AuthenticationInterface => {
  const {
    getAccessTokenSilently,
    isAuthenticated,
    isLoading,
    loginWithRedirect,
    logout,
  } = useAuth0();
  const [authToken, setAuthToken] = useState<string>();

  const fetchToken = async () => {
    const token = await getAccessTokenSilently({
      audience: __AUTH0_AUDIENCE__,
    });
    setAuthToken(token);
  };

  useEffect(() => {
    if (isAuthenticated) {
      fetchToken();
    }
  }, [isAuthenticated]);

  return {
    authToken: authToken,
    isAuthenticated,
    isLoading,
    login: loginWithRedirect,
    logout,
  };
};

const AuthenticationProvider = ({ children }: PropsWithChildren<{}>) => {
  return (
    <AuthenticationContext.Provider value={useReactAuth0Authentication()}>
      {children}
    </AuthenticationContext.Provider>
  );
};

export const ReactAuth0Provider = ({ children }: PropsWithChildren<{}>) => {
  return (
    <Auth0Provider
      audience={__AUTH0_AUDIENCE__}
      clientId={__AUTH0_CLIENT_ID__}
      domain={__AUTH0_DOMAIN__}
      redirectUri={window.location.origin}
    >
      <AuthenticationProvider>{children}</AuthenticationProvider>
    </Auth0Provider>
  );
};
export const AuthenticationGate = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const { isAuthenticated, isLoading, login } = useReactAuth0Authentication();
  const session = useUserSession(); // fetch user data from our own database (auth0 token is needed)

  useEffect(() => {
    if (!isAuthenticated && !isLoading) {
      login();
    }
  }, [isAuthenticated, isLoading, session]);

  if (isAuthenticated && session.data) {
    return <>{children}</>;
  }

  return <LoadingPage />;
};