先日公開した英語多読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が役に立たない。恐らく、コード周りで詰まるのは「コードにロジックとして間違いがあるから」が比較的多いのに対し、インフラとか認証って「論理的にはうまくいくはずなんだけど、固有の事情で理屈通りにならない」みたいなことが多いからかなと思う。
他にも異常系を始めとする「論理的・合理的ではない動きをされること」に対する設計とかも現状弱そうだなと思う。でもそこらへん考慮し始めると、正解とは何かがわからなくなり初めて、正常系にも影響が出そう。
すると、結局人間がそういうよしなしごとを担当し続けるのだろうか。たいくつなことばかり人間がやっている気がする。
コメント