Amazon Cognito のマネージドログイン画面をクイックに日本語化する with react-oidc-context

Last updated at 2025-08-27Posted at 2025-08-25

TL;DR

oidc-client-ts のサインイン用メソッドで引数を指定するだけです。

await auth.signinRedirect({ extraQueryParams: {"lang": "ja"} });

Amazon Cognito のマネージドログイン画面が日本語化できるようになっていた

2024 年 11 月、Amazon Cognito の大規模なアップデートが発表されました。内容は料金プランの変更が大きなところですが、マネージドログイン画面のリニューアル等の機能向上も含まれています。リニューアル後のマネージドログイン画面はカスタマイズ性とユーザビリティが大きく向上しており、かつて採用を躊躇した方も再検討する価値がありそうな仕上がりです。

私も「かつて採用を躊躇した」うちの一人なのですが、その理由は文言が日本語化されていないことでした。システムの利用者層にも寄りますが、英語が表示されているだけで怪しく感じてしまう日本語話者は少なくないものです。しかし、新たなマネージドログイン画面では AWS Management Console で利用可能な全言語に対するローカライゼーションが提供されるようになりました。やったね！

ローカライゼーション設定は AWS Management Console 上で設定できない

しかし、マネージドログイン画面の設定を探してもローカライゼーションに関する項目は見つけられません。ドキュメントに記載があるように、クエリパラメータを介して設定する仕組みになっているからです：

https://<カスタムドメイン>/oauth2/authorize?lang=ja&response_type=code&client_id=<アプリケーションクライアントID>&redirect_uri=<リダイレクト先>

一度設定すると Cookie に保存されますが、少なくとも初回サインイン時のリクエストにはクエリパラメータを付けてあげる必要がありますね。

react-oidc-context でも日本語化したい

Quick Setup ガイド内のサンプルコードで案内されている react-oidc-context でも日本語化したいところですが、いかにもな下記の箇所では設定できません：

index.js

const cognitoAuthConfig = {
  authority: "your authority",
  client_id: "your client_id",
  redirect_uri: "http://localhost:3000",
  response_type: "code",
  scope: "email openid phone",
};

その代わり、サインイン用メソッドの引数として extraQueryParams を渡すことで、任意のクエリパラメータを付加できるようになっています²：

OidcClientSettings.ts

/**
 * An object containing additional query string parameters to be including in the authorization request.
 * E.g, when using Azure AD to obtain an access token an additional resource parameter is required. extraQueryParams: `{resource:"some_identifier"}`
*/
extraQueryParams?: Record<string, string | number | boolean>;

というわけで、下記の箇所を変更してあげることで、クイックにセットアップしたログイン画面をクイックに日本語化できました。よいマネージドログインライフを。

App.js

- <button onClick={() => auth.signinRedirect()}>Sign in</button>
+ <button onClick={() => auth.signinRedirect({extraQueryParams:{'lang':'ja'}})}>Sign in</button>

参考リンク

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up