Search code examples
reactjsauth0samesite

Samesite cookie error on localhost with auth0

I am using auth0 to implement authentication in my react app. I'm using the useAuth0() hook as follows,

const { isAuthenticated, isLoading } = useAuth0();

I have also implemented login using

const { loginWithRedirect } = useAuth0();
.
.
.
<button onClick={() => loginWithRedirect()} />

When I press on the button, it redirects to auth0, and I am able to login. After login, it redirects back to the app, and shows the logged in routes without any issue. The problem however is when I make any change in the app, it reloads, and I am presented with the login page again, although I was logged in. In the Chrome issues tab it shows this message.

enter image description here

I'm not able to figure out why it does not work on refresh, but why it works on redirect after login, and I have been trying to find a solution since yesterday, but no luck so far. I came across Find the cookie that causes Chrome's SameSite warning which is the closest question I could find, but it doesn't seem to give a proper answer on how to solve it.

Solution

  • What worked for me in the end was an answer on another SO question.

    Here is the content,

    The issue was that Brave and Safari both use Intelligent Tracking Prevention (ITP), which was preventing the silent authentication from working.

    The solution that worked for me was to enable rotating refresh tokens (via the Auth0 dashboard) and providing additional props to the Auth0 provider.

    The two new props to add are: useRefreshTokens={true} and cacheLocation="localstorage".

    <Auth0Provider
  domain={process.env.REACT_APP_AUTH0_DOMAIN}
  clientId={process.env.REACT_APP_AUTH0_CLIENT_ID}
  redirectUri={window.location.origin}
  onRedirectCallback={onRedirectCallback}
  useRefreshTokens={true}
  cacheLocation="localstorage"
>
  {children}
</Auth0Provider>

    Here are the official docs to learn more about rotating refresh tokens: https://auth0.com/docs/tokens/refresh-tokens

    And this was the github issue which cleared up the issue https://github.com/auth0/auth0-react/issues/101