auth0を使用したローカルホストでのSamesitecookieエラー
auth0を使用してreactアプリに認証を実装しています。次のようにuseAuth0()フックを使用しています。
const { isAuthenticated, isLoading } = useAuth0();
また、を使用してログインを実装しました
const { loginWithRedirect } = useAuth0();
.
.
.
<button onClick={() => loginWithRedirect()} />
ボタンを押すと、auth0にリダイレクトされ、ログインできるようになります。ログイン後、アプリにリダイレクトされ、ログインしたルートが問題なく表示されます。ただし、問題は、アプリに変更を加えるとリロードされ、ログインしていてもログインページが再度表示されることです。[Chromeの問題]タブにこのメッセージが表示されます。

なぜ更新で機能しないのか、ログイン後のリダイレクトで機能するのか理解できません。昨日から解決策を見つけようとしていますが、今のところ運がありません。ChromeのSameSite警告の原因となるCookieを見つけました。これは、私が見つけた最も近い質問ですが、それを解決する方法について適切な答えが得られていないようです。
回答
最終的に私のために働いたのは、別のSOの質問に対する答えでした。
これが内容です、
問題は、BraveとSafariの両方がIntelligent Tracking Prevention(ITP)を使用しており、サイレント認証が機能しないことでした。
私のために働いた解決策は、(Auth0ダッシュボードを介して)更新トークンのローテーションを有効にし、Auth0プロバイダーに追加の小道具を提供することでした。
追加する2つの新しい小道具は次のとおりです。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