App infinitely redirecting after login ReactJS {PLEASE HELP}

Help
,
1

Hey there, my ReactJS App is infinitely looping after login. Loops between my homepage and then the Auth0 login page. I have this error in incognito, and regular. Also have error with all browser.

Below is code snippets. Any thoughts?

import { Auth0Provider } from ‘@auth0/auth0-react’;

App.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Auth0Provider
    domain="dev-1v7prir5.us.auth0.com"
    clientId="8dlquRgNeFZqx9TgkaYPR7U3tTKCENaS"
    redirectUri={window.location.origin}
    cacheLocation="localstorage"
    useRefreshTokens={true}
  >
    <App />
  </Auth0Provider>

Homepage

export default withAuthenticationRequired(Homepage)

My login page that redirects user

const LoginIdentity = () => { 
    const { loginWithRedirect, isLoading, error} = useAuth0();
    // used for navigation
    useEffect(() => {
        loginWithRedirect()
      },[]);
      if (isLoading) {
        return <div>Loading...</div>;
      }
      if (error) {
        return <div>Oops... {error.message}</div>;
      }
    }
export default LoginIdentity
2

@agentggg

When you use loginWithRedirect(), you are redirecting the user to the Universal Login page.
However, if the user has already logged in and has a valid Auth0 session already, then loginWithRedirect() will bring the user to the Universal Login page, detect their valid login automatically, and redirect them to the redirectUri defined in the request.

Without looking at how you’ve set up the code, you might always be calling the loginWithRedirect() function on the page without checking if the user is already logged in first.

Take a look at the Getting Started section of the auth0-react SDK here: @auth0/auth0-react (specifically where it uses isAuthenticated to determine whether to show a login button or a logout button)

Hope that helps!

1 Like
3

Thanks for sharing that with the rest of community!