@auth0/auth0-react - IsAuthenticated is 'true' even after calling logout() on Safari/iPhone browsers

Help
,
1

I’m using the @auth0/auth0-react package inside a react single page app.

I’m logging out my user using the logout function from the useAuth0 hook:

logout({ logoutParams: { returnTo: window.location.href } });

After logout the page redirects, the following code runs inside a useEffect call:

  useEffect(() => {
    const auth0Login = async () => {
      if (!isLoading && !isAuthenticated) {
        await loginWithRedirect({
          appState: { targetUrl: redirectUri }
        });
      } else if (isAuthenticated) {
        console.log("user is still authenticated");
      }
    }

    auth0Login();
  }, [isLoading, isAuthenticated, loginWithRedirect]);

This code redirects the user to the Auth0 log-in page in Windows and Android, but on all iPhone browsers, the ‘else if’ statement runs and the user proceeds to the main app, despite have logged out.

The app is set up like so

    <Auth0Provider
      domain={AUTH0_DOMAIN}
      clientId={AUTH0_CLIENT_ID}
      authorizationParams={{
        redirect_uri: window.location.origin
      }}
  >
    <App />
  </Auth0Provider>

I have experimented with setting useRefreshTokens to true, but this doesn’t appear to make any difference.

UPDATE: If I disable blocking of cookies on the iPhone, the code works as expected. Is there a way to use Auth0 when cookies are blocked?

UPDATE 2: Never mind. Created a custom domain and this fixed the third-party cookie restrictions on iPhone.