🐥

【Amazon Cognito】 マネージドログインの日本語化(react-oidc-contextと使わない場合)

に公開

はじめに

マネージドログインの日本語化についてはALBと連携して日本語化している記事が多いのですが、ALBを使用せず日本語化する方法を紹介します。
Reactを使用することを前提としています。

react-oidc-contextを使用する場合

import { AuthProvider } from 'react-oidc-context';

const cognitoAuthConfig = {
  authority: "~",
  client_id: "~",
  redirect_uri: "~",
  response_type: "~",
  scope: "~",
  extraQueryParams: {
    ui_locales: "ja" // 日本語を設定
  }
};


const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <AuthProvider {...cognitoAuthConfig}>
      <App />
    </AuthProvider>
  </React.StrictMode>
);

使用しない場合

 const signinRedirect = () => {
    const loginUrl = `${cognitoDomain}/oauth2/authorize?` +
      `response_type=code&` +
      `client_id=${clientId}&` +
      `redirect_uri=${encodeURIComponent(redirectUri)}&` +
      `scope=email+openid+phone&` +
      `lang=ja`; // 日本語を設定
  };

Discussion