本地主机上具有auth0的Samesite Cookie错误

问题描述

我正在使用auth0在我的React应用中实现身份验证。我正在如下使用useAuth0（）钩子，

const { isAuthenticated,isLoading } = useAuth0();

我还使用

实现了登录

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

当我按下按钮时，它将重定向到auth0，并且我能够登录。登录后，它将重定向回应用程序，并显示已登录的路由，没有任何问题。但是问题是，当我在应用程序中进行任何更改时，都会重新加载，尽管我已经登录，但仍再次显示登录页面。在“ Chrome问题”标签中，它显示此消息。

我无法弄清楚为什么它不能在刷新时起作用，但是为什么它不能在登录后重定向上起作用，而且自昨天以来我一直在尝试寻找解决方案，但到目前为止还没有运气。我碰到了Find the cookie that causes Chrome's SameSite warning，这是我能找到的最接近的问题，但它似乎并未给出解决问题的正确答案。

解决方法

最后对我有用的是关于another SO question的答案。

这里是内容，

问题是Brave和Safari都使用了智能跟踪防护（ITP），这阻止了静默身份验证的正常工作。

对我有用的解决方案是启用旋转刷新令牌（通过Auth0仪表板）并为Auth0提供程序提供其他支持。

要添加的两个新道具是：useRefreshTokens={true}和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>

以下是正式文档，以了解有关旋转刷新令牌的更多信息：https://auth0.com/docs/tokens/refresh-tokens

这是github问题，解决了问题https://github.com/auth0/auth0-react/issues/101