Auth0 redirect loop after auth.loginWithRedirect() - @auth0/auth0-spa-js

Viewed 1684

I'm currently switching the authentication of my (React) application from the Auth0 react SDK to the normal SPA SDK (as I don't like the way tokens are fetched in the react SDK)

The issue I'm facing now is that when I sign in to the application I'm stuck in an endless redirection loop that is caused (I think) by the component below. Some context: the router uses protected routes that will redirect the user to the /login route that handles the authentication. Inside the component bellow auth.isAuthenticated() always returns false... That's why auth.loginWithRedirect() is called. But I can't see how to solve this...

const LoginRoute: React.FunctionComponent<any> = ({ ...props }) => {
  const { isLoggedIn, loading } = useSelector(userSelector);
  const dispatch = useDispatch();

  useEffect(() => {
    const handleAsyncLogin = async () => {
      const isAuthenticated = await auth.isAuthenticated();
      if (isAuthenticated) {
        // Auth0 says we are logged in, so we only need to store the user in the store
        dispatch(login());
      } else if (!!auth && !loading) {
        // We are *not* logged in. Go to Auth0 login page.
        await auth?.loginWithRedirect();
      }
    };
    handleAsyncLogin();
  }, [dispatch, loading]);

  return (
    <Route
      {...props}
      component={() => {
        if (isLoggedIn) {
          console.log("Is Logged In");
          // We are *definitely* logged in, go to projects
          return <Redirect to="/questionsFromMe" />;
        }
        if (loading) {
          return <Loader />;
        }
        return <div />;
      }}
    />
  );
};

Please help me out! Thanks in advance.

0 Answers
Related