Auth0は、電子メール/パスワードのページ更新時にログインを保持しません

Aug 23 2020

Reactを使用するSPAの認証プロバイダーとしてAuth0を使用しています。私はAuth0反応チュートリアルと彼らのブログからのこのより詳細なチュートリアルに従いました。

現在、メール/パスワード認証のみを使用しています。また、認証はログイン/ログアウト、ユーザー情報の取得などで期待どおりに機能します。

ただし、ページを更新するとisAuthenticated、useAuth0常にの値はfalseを返します。isLoadingtrueに解決した後でも、再度ログインする必要があります。

この動作は、ChromeまたはFirefoxでは奇妙なことに発生しません。ブレイブとサファリでは失敗します。

Auth0（同様の問題を抱えている別の人）のフォーラム投稿でAuth0Provider、authorizeを使用して電話をかける必要があることに気づきましたprompte=none。また202、ページが読み込まれた直後に成功を返します（ただし、に変更さisAuthenticatedれませんtrue）。この呼び出しはCookieも設定しauth0.is.authenticated=trueます。

authorize?client_id=VALUE&redirect_uri=VALUE&scope=openid%20profile%20email&response_type=code&response_mode=web_message&state=VALUE&nonce=VALUE&code_challenge=VALUE&code_challenge_method=S256&prompt=none&auth0Client=VALUE

これが認証状態をチェックする私のルートです。このコンポーネントはAuth0ProviderWithHistory、Auth0チュートリアルで提案されているようにコードでラップされています。

export default function Routes() {
  const { isLoading, isAuthenticated } = useAuth0()

  const getDashboard = () => {
    //determine which dashboard to return
  }

  if (isLoading) return <p>Loading...</p>

  if (isAuthenticated) {
    return (
      <Suspense fallback={<p>loading...</p>}>
        <Switch>
          <Route exact path="/">
            {getDashboard()}
          </Route>
          <Route path="/customer/:customerId">
            <Customer />
          </Route>
          <Route>
            <NotFound />
          </Route>
        </Switch>
      </Suspense>
    )
  }

  return <SignInAndRegister />
}

ページをリロードしloginWithRedirectて、ユニバーサルログインページにリダイレクトされない関数を呼び出すと、代わりに2つのトークン呼び出し（POSTとOPTIONS）があることに気付きました。POSTコールレスポンスには次の詳細がありますが、どういうわけかこれをキャプチャして保存し、ログインに再利用する必要がありますか？

access_token: "VALUE"
expires_in: 86400
id_token: "VALUE"
scope: "openid profile email"
token_type: "Bearer"

実験として、Auth0ダッシュボードのアプリケーションの「クイックスタート」セクションにreactサンプルをダウンロードして、動作がそこで複製されているかどうかを確認しました。そしてそうだった。

Auth0Providerサイレント認証を自動的に処理する必要があるという印象を受けましたが、そうではありませんか？

auth0-reactnpmパッケージで使用するオプションは多くないので、次に何を試すべきかわかりません。使用可能な機能は次のとおりです。

getAccessTokenSilently: ƒ (opts)
getAccessTokenWithPopup: ƒ (opts)
getIdTokenClaims: ƒ (opts)
isAuthenticated: false
isLoading: true
loginWithPopup: ƒ (opts)
loginWithRedirect: ƒ (opts)

これが不可能な場合は、@auth0/auth0-spa-jsSDKに移行する必要があるようです。

回答

11 Charklewis Aug 27 2020 at 23:22

問題は、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