带有 auth0 的本地主机上的同一站点 cookie 错误

IT技术 reactjs auth0 samesite
2021-05-01 05:17:13

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

const { isAuthenticated, isLoading } = useAuth0();

我也实现了登录使用

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

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

在此处输入图片说明

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

1个回答

最后对我有用的是另一个 SO 问题的答案

以下是内容,

问题是 Brave 和 Safari 都使用智能跟踪预防 (ITP),这阻止了静默身份验证的工作。

对我有用的解决方案是启用轮换刷新令牌(通过 Auth0 仪表板)并向 Auth0 提供程序提供额外的props。

要添加的两个新props是: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