React + Auth0 : Hot reloading after logging in successfully (keeps refreshing and assigning new tokens)

Help
, , ,
1

I’m new to React and Auth0 both, and so I struggled a bit to implement Auth0 to my application as the only tutorials (for ReactJS+Auth0) available are to add a login/logout button in your app which means we had to somehow manage to make Auth0 our primary login screen, and once the user is authenticated they should be redirected to our app. And once the user logs out, they should go back to the auth0 login screen.
And now I somehow managed to integrate Auth0 in my react application, but whenever the user successfully logins to the app using Auth0 authentication, the app keeps refreshing for a couple of seconds and then it throws the user back to the Auth0 login screen.

My App.js looks something like this:

import React, { useState } from 'react';
import { useAuth0 } from "@auth0/auth0-react";

const App = () => {
  const { isAuthenticated, loginWithRedirect, user, isLoading } = useAuth0();

  const [condition, setcondition] = useState(false)

  React.useEffect(() => {

    function checkUser() {
      console.log(isAuthenticated, condition)
      if (isAuthenticated) {
        // await console.log('AUTHENTICATED', isAuthenticated)
        setcondition(true)
      } else {
        if (condition === false) {
          console.log("CONDITION FALSE", condition)

          loginWithRedirect()
        }


      }


    }
    checkUser();
  }, [isAuthenticated]); 

  return (

    <h1>login success</h1>
  )
}

export default App;

Your help will be highly appreciated. Thanks in advance!!

1 Like