Cognito + react-oidc-contextでsignoutRedirect()が失敗する

先日公開した英語多読Webアプリ「Extensive Reading Service Beta」では、構成としてSPA(React) + Cognitoで認証フローを作っています。Cognitoのほうはマネージドログイン画面を利用しており、Reactのほうは認証用のライブラリとして「authts/react-oidc-context」を使わせてもらっていますが。で、これで signoutRedirect()を実行すると、マネージドログイン画面に飛ばされてエラーが表示されるという症状に見舞われました。

目次

症状

環境

  • react 18.3.1
    • SPA
  • react-oidc-context 3.2.0
  • Amazon Cognito
    • マネージドログイン画面利用

signoutRedirect()を実行すると、マネージドログイン画面にぶっ飛ばされた挙げ句、Missing required parametersと言われる。エラーメッセージは以下。

リクエストに client_idがないと言われる。開発者ツールでリクエストURLを調べると、まず/loginからlogoutにリダイレクトされているし、クエリパラメータに含まれているのはid_token_hint(IDトークン?)とpost_logout_redirect_uriだけだった。

原因と対応

恐らくCognitoがOIDCの標準に則っていないことによるっぽい。AI時代でも俺たちのスタックオーバーフロー「openid connect - OIDC-react signtOut doesn't end Cognito session - Stack Overflow」を参考に。

以上の記事を参考に、ログアウト用のURLを、以下のように自分で作成したら解決した。

  const buildLogoutUrl = () => {
    const logoutEndpoint = `${import.meta.env.VITE_COGNITO_DOMAIN}/logout`; // Cognitoのログアウトエンドポイント
    const clientId = encodeURIComponent(import.meta.env.VITE_COGNITO_CLIENT_ID); // アプリケーションクライアントID
    const postLogoutRedirectUri = encodeURIComponent(
      import.meta.env.VITE_COGNITO_LOGOUT_URI
    ); // サインアウト後のリダイレクトURL

    return `${logoutEndpoint}?client_id=${clientId}&logout_uri=${postLogoutRedirectUri}`;
  };

  const logout = async () => {
    const logoutUrl = buildLogoutUrl();
    window.location.href = logoutUrl;
    auth.removeUser();
  };

vite使っているので環境変数がvite仕様。

ここで定義したlogoutを実行すると、問題なくログアウトできる。

所感

インフラとか認証周り、詰まった時に驚くほどAIが役に立たない。恐らく、コード周りで詰まるのは「コードにロジックとして間違いがあるから」が比較的多いのに対し、インフラとか認証って「論理的にはうまくいくはずなんだけど、固有の事情で理屈通りにならない」みたいなことが多いからかなと思う。

他にも異常系を始めとする「論理的・合理的ではない動きをされること」に対する設計とかも現状弱そうだなと思う。でもそこらへん考慮し始めると、正解とは何かがわからなくなり初めて、正常系にも影響が出そう。

すると、結局人間がそういうよしなしごとを担当し続けるのだろうか。たいくつなことばかり人間がやっている気がする。

本サイトはUXを悪くするevilなGoogle広告を消しました。応援してくださる方は おすすめガジェット を見ていってください!
よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

目次