OAuth2 for google not working

App.jsx

  const navigate = useNavigate();

  return (
    <>
      <Routes>
        <Route path="/recipe" element={<RecipeDetails/>} />
        <Route path="/add" element={<AddRecipe/>} />
        <Route path="/" element={<RecipeList/>} />
        <Route path="/login" element={<Login/>} />
      </Routes>
    </>
  );
}

export default App;```

**Login.jsx**

async function handleLogin () { account.createOAuth2Session( 'google', 'http://localhost:5173/login', 'http://localhost:5173/fail' ) }

const Login = () => { const [user, setUser] = useState(null) const navigate = useNavigate();

// Check if user is logged in when the component mounts useEffect(() => { const checkSession = async () => { try { const currentUser = await account.get() setUser(currentUser) navigate("/") } catch (error) { console.log("Not logged in") } }

checkSession()

}, [])

return ( <> <div>Login</div> {user ? ( <div> Welcome, {user.name}! </div> ) : ( <button onClick={handleLogin}>LOGIN with GOOGLE</button> )} </> ) }

export default Login

So if you go to /login andclick the button you can login with google and then it takes you back to login.  In theory if you logged in correctly the useEffect should redirect you back to / but it doesnt

Attached photo is the console before and after logging in through google. It's the same both times