name: kb-frontend-amplify-ui description: Amplify UI Reactのナレッジ。Authenticator/日本語化/認証フロー/配色カスタマイズ等 user-invocable: true

Amplify UI React

Amplify UI React を使った認証UI・カスタマイズのパターンを記録する。

Authenticator（認証UI）

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user?.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

日本語化

// main.tsx
import { I18n } from 'aws-amplify/utils';
import { translations } from '@aws-amplify/ui-react';

I18n.putVocabularies(translations);
I18n.setLanguage('ja');

認証画面のカスタマイズ（Header/Footer）

Cognito認証画面にアプリ名やプライバシーポリシーを表示する：

const authComponents = {
  Header() {
    return (
      <div className="text-center py-4">
        <h1 className="text-2xl font-bold text-gray-800">アプリ名</h1>
        <p className="text-sm text-gray-500 mt-1">
          「Create Account」で誰でも利用できます！
        </p>
      </div>
    );
  },
  Footer() {
    return (
      <div className="text-center py-3 px-4">
        <p className="text-xs text-gray-400 leading-relaxed">
          登録されたメールアドレスは認証目的でのみ使用します。
        </p>
      </div>
    );
  },
};

<Authenticator components={authComponents}>
  {({ signOut }) => <MainApp signOut={signOut} />}
</Authenticator>

用途例:

• Header: アプリ名、利用ガイド、ロゴ
• Footer: プライバシーポリシー、免責事項、メールアドレスの利用目的

認証フローの変更（services prop）

Authenticatorのデフォルト認証フローを変更する場合、services propで handleSignIn をオーバーライドする。

import { signIn } from 'aws-amplify/auth';

<Authenticator
  components={authComponents}
  services={{
    handleSignIn: (input) => signIn({
      ...input,
      options: { authFlowType: 'USER_PASSWORD_AUTH' }
    }),
  }}
>

主なユースケース: Cognito User Migration Trigger。Migration TriggerはパスワードがLambdaに平文で渡される USER_PASSWORD_AUTH フローでのみ発火する。

認証画面の配色カスタマイズ（CSS方式）

createTheme/ThemeProviderではグラデーションが使えないため、CSSで直接スタイリングするのが確実。

/* src/index.css */

/* プライマリボタン（グラデーション対応） */
[data-amplify-authenticator] .amplify-button--primary {
  background: linear-gradient(to right, #1a3a6e, #5ba4d9);
  border: none;
}

[data-amplify-authenticator] .amplify-button--primary:hover {
  background: linear-gradient(to right, #142d54, #4a93c8);
}

/* リンク（パスワードを忘れた等） */
[data-amplify-authenticator] .amplify-button--link {
  color: #1a3a6e;
}

/* タブ */
[data-amplify-authenticator] .amplify-tabs__item--active {
  color: #1a3a6e;
  border-color: #5ba4d9;
}

/* 入力フォーカス */
[data-amplify-authenticator] input:focus {
  border-color: #5ba4d9;
  box-shadow: 0 0 0 2px rgba(91, 164, 217, 0.2);
}

ポイント:

• [data-amplify-authenticator]セレクタで認証画面のみに適用
• createThemeはグラデーション非対応 → CSS直接指定が確実
• アプリ本体と同じ配色を使用して統一感を出す