Unable to get login working with React using Safari and Brave

Help
,
1

I am working on fixing the login for a React SPA app which has trouble logging in with Safari and Brave (w/ shields). I’ve gone through a bunch of community posts (some prior mine) and this, Troubleshoot Renew Tokens When Using Safari, and am still unable to get this to work.

React v18
@auth0 react v2.2.0

How things are setup

<Auth0Provider
    domain="auth.example.com"
    clientId="Z<SCRUBBED>xyz"
    authorizationParams={{
      redirect_uri: `${window.location.origin}/login-success`,
      audience: 'https://api.example2.com,
      scopes: 'openid profile email offline_access',
    }}
    useRefreshTokens
    useFormData={false}
  >

LoginSuccess looks like:

const LoginSuccess = () => {
  const { user } = useAuth0();
  const { data, loading, error } = useQuery(GET_USER);
  let redirect = false;
  if (user?.email_verified === false) {
    redirect = <Navigate to="/verify-email" />;
  }
  if (!loading) {
    if (data?.users?.me) {
      redirect = <Navigate to="/dashboard" />;
    } else {
      redirect = <Navigate to="/create-profile" />;
    }
  }
...
}

When using Safari or Brave the user var above is always undefined and thus, useQuery() never returns a value. All of this is fine on browsers not restricting 3rd party cookies (cross site tracking).

Token rotation is enabled and needed domains have been added to the settings.

We have even setup a custom domain of auth.example.com and still things aren’t working on these browsers.

If Safari cross site tracking is disabled, or Brave shields are disabled, all works as expected.

I am out of ideas and am hoping someone can help me figure out where things are not setup correct.

fyi, I am not a react developer so my milage there varies.

1 Like
3

Hi @brett2,

Can you try using the cacheLocation: 'localstorage' option in the Auth0Provider?

Here’s the doc for it: Auth0ProviderOptions | @auth0/auth0-react

1 Like
4

Hi @dan.woda. Adding cacheLocation made no difference.

Another finding is when useRefreshTokens is true, regardless of cacheLocation setting, Safari does not work correct with or without ITP setting.

It’s only when useRefreshTokens={false} does Safari work, and thus only with ITP disabled. Very strange I do agree.

I am on vacation this week so responses may be a little delayed.

5

@brettski,

Thanks for the additional info. I’m going to close this topic as it looks like you have an open one on the same issue and an engineer is working with you towards a solution.

Please let me know if you need any help.

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.