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.