Auth0 login and logout profiles are not working. react typescript

Question

I have a question about Auth0. Log in. and logout. Using react typescript.

This is in Index.tsx.

root.render(
  <Auth0Provider
        domain="somecode.us.auth0.com"
        clientId="somecode"
        authorizationParams={{
          redirect_uri: window.location.origin
        }}
      >
      <React.StrictMode>
        <Provider store={store}>
          <CssBaseline />
          <App />
        </Provider>
      </React.StrictMode>
  </Auth0Provider>
);

Some code is given in Authentication Configuration.

Now I have a login or logout button.

const AuthButton = () => {
  const { isAuthenticated, loginWithRedirect, logout } = useAuth0();

  const handleLogin = () => {
    loginWithRedirect();
  };

  const handleLogout = () => {
    logout({ logoutParams: { returnTo: window.location.origin } });
  };

  return (
    <button
      style={{
        color: 'white',
        backgroundColor: '#142952',
        marginRight: '4rem',
        fontFamily: 'Consolas',
        border: 'none',
        borderRadius: '3px',
        width: '110px',
        height: '40px'
      }}
      onClick={isAuthenticated ? handleLogout : handleLogin}
    >
      {isAuthenticated ? 'Logout' : 'Login'}
    </button>
  );
};

export default AuthButton;

Also. I retrieve user information to display.

const Profile = () => {
  const { user, isAuthenticated, getAccessTokenSilently } = useAuth0();
  const [accessToken, setAccessToken] = useState('');

  useEffect(() => {
    const getAccessToken = async () => {
      try {
        const token = await getAccessTokenSilently();
        setAccessToken(token);
      } catch (error) {
        console.error(error);
      }
    };

    if (isAuthenticated) {
      getAccessToken();
      console.log("authenticated")
    }
  }, [isAuthenticated, getAccessTokenSilently]);

  if (!isAuthenticated) {
    return <div>Please login to view your profile.</div>;
  }

  return (
    <div>
      {user?.picture && (
        <img src={user.picture} alt="Profile Picture" />
      )}
      <h2>Hello {user?.name}</h2>
      <p>Email: {user?.email}</p>
      <p>Login Method: {user?.sub?.split('|')[0]}</p>
      <p>Access Token: {accessToken}</p>
    </div>
  );
};

export default Profile;

Here's my problem: After I log in with the Auth0 protocol, the Login Logout button doesn't change. First. It opens and goes to the auth0 dialog. However. After logging in with my Google account. Then the button still says "Login". This means it will never log in. I really don't know what to do. Here are the auth0 configuration settings I have.

It has been explained above

Answer 1

I solved this problem by using loginWithPopup instead of loginredirect. I also used this link.

authorizationParams={{
redirect_uri: 'mysiteadress.com/home'
}}

I am not using window.location.origin. But I'm using address in this part of the code.