使用 auth0 的 localhost 上的 Samesite cookie 错误答案

【问题标题】：Samesite cookie error on localhost with auth0使用 auth0 的 localhost 上的 Samesite cookie 错误
【发布时间】：2020-12-07 11:30:20
【问题描述】：

我正在使用 auth0 在我的 react 应用程序中实现身份验证。我使用 useAuth0() 钩子如下，

const { isAuthenticated, isLoading } = useAuth0();

我也实现了登录使用

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

当我按下按钮时，它会重定向到 auth0，我可以登录。登录后，它重定向回应用程序，并显示登录的路线没有任何问题。然而问题是，当我在应用程序中进行任何更改时，它会重新加载，并且我再次看到登录页面，尽管我已经登录。在 Chrome 问题选项卡中，它会显示此消息。

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

【问题讨论】：

标签： reactjs auth0 samesite

【解决方案1】：

最后对我有用的是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

【讨论】：