本地主机上具有auth0的Samesite 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的Samesite Cookie错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！