带有 auth0 的本地主机上的同一站点 cookie 错误 [英] Samesite cookie error on localhost with auth0

问题描述

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

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

const { isAuthenticated, isLoading } = useAuth0();

我也使用

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

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

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.

我无法弄清楚为什么它在刷新时不起作用，但为什么它在登录后重定向时起作用，并且我从昨天开始一直试图找到解决方案，但到目前为止没有运气.我遇到了 找到导致 Chrome 的 SameSite 警告的 cookie是我能找到的最接近的问题，但它似乎没有给出如何解决它的正确答案.

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.

推荐答案

最后对我有用的是 另一个问题.

这是内容，

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

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

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

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

要添加的两个新道具是:useRefreshTokens={true} 和 cacheLocation=localstorage".

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>

以下是了解有关轮换刷新令牌的更多信息的官方文档:https://auth0.com/docs/tokens/refresh-tokens

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

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

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

这篇关于带有 auth0 的本地主机上的同一站点 cookie 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！