React SPA failed logins on iOS and iPadOS in Safari and Chrome

Help
,
1

Hi!

I use Auth0 to authenticate users in React SPA using Social Connection.

The app is served at https://app.custom-domain.com.

Auth0 custom domain is configured: auth.custom-domain.com.

auth0-react is configured in the following way:

<Auth0Provider
    domain="auth.custom-domain.com"
    clientId="..."
    authorizationParams={{
      redirect_uri: window.location.origin,
      connection: 'ConnectionName',
    }}
    useRefreshTokens={true}
    cacheLocation="localstorage"
  >

Login with popup is used:

<Button type="primary" onClick={() => void loginWithPopup()}>

SPA uses only ID Token. It gets full name and custom claims from ID token:

const {user, isAuthenticated, isLoading} = useAuth0<AppUser>();
const customClaim = user?.[CUSTOM_CLAIM];

There is an Post-Login action that injects custom claims into ID Token:

exports.onExecutePostLogin = async (event, api) => {
  if (event.authorization) {
    api.idToken.setCustomClaim("https://custom-domain.com/custom-claim", {...});
  }
};

There is no API and Access Token is not used by the SPA.

This set up perfectly works on Linux, Windows, Android, and even macOS.
But some users on iOS and iPadOS in both Safari and Chrome are not able to login.
In the logs I see that for these users “Success Exchange” never happens after “Success Login”.
Also, for these users in logs there are errors:

You may have pressed the back button, refreshed during login, opened too many login dialogs, or there is some issue with cookies, since we couldn’t find your session. Try logging in again from the application and if the problem persists please contact the administrator.

There is a configured Application Login URI: https://custom-domain.com/login.

Only part of iOS and iPasOS users are affected. If this is a general problem, then all users should be affected. But this set up perfectly works on Linux, Windows, macOS, Android.

Some users were able to successfully login after doing the following on iPad or iPhone:
Go to “Settings” > “Safari” > “Privacy & Security” > turn off “Prevent cross-site tracking”, turn off “Hide IP address”.
Go down to “Advanced settings” > turn off “Advanced tracking”, turn off “Block all cookies”.

But the app uses custom Auth0 domain: auth.custom-domain.com while SPA is served on https:/app.custom-domain.com. Why doesn’t it fix the problem?

What can be configured to make authentication work out of the box, so people don’t have to change so much settings on their iPhones and iPads?