Amplify Ui Libraryを使用してCognito認証画面を実践的な画面にする方法

こんにちは、アプリケーションサービス部ディベロップメントサービス1課の外崎です。

今回は、AmplifyUILibraryを用いたAmazon Cognito認証画面を実践的にカスタマイズする方法について紹介します。

↓入門編はこちら

blog.serverworks.co.jp

componentsプロパティの導入
ステップ毎のカスタマイズ
- 初回ログイン時にテキストを表示する方法
スタイリングの変更
- CSSを適用する方法
- ThemeProviderオブジェクトを使用する方法
認証チェック
- useAuthenticator関数を使用する方法
まとめ

componentsプロパティの導入

AmplifyUILibraryのAuthenticatorコンポーネントをよりカスタマイズするために、componentsプロパティを使用します。このプロパティを使用すると、認証画面のヘッダーやフッター、サインイン、サインアップ、パスワードリセットなどの各ステップのUIを独自のデザインに置き換えることができます。具体的には、カスタムロゴの追加、特定のテキストやリンクの挿入、スタイルの変更が可能です。

基本的な設定方法

基本的な使い方は以下のようにcomponentsプロパティにオブジェクトを渡します。

const customComponents = {
    // こちらに設定を追加
}

~省略~

<Authenticator components={customComponents}></Authenticator>

以下のように、header、footerを追加することができます。更に、サインインなどのステップ毎にカスタムすることも可能です。

const customComponents = {
  Header() {

  },
  Footer() {
  },
  SignIn: {
    Header() {

    },
    Footer() {

    },
},
~省略~
}

stomComponentsオブジェクトにHeaderプロパティを追加し、Viewコンポーネントを返す関数を定義します。Viewコンポーネントは、AmplifyUILibraryのコンポーネントの一つで、他のコンポーネントをラップするために使用されます（詳細はViewを参照してください。）。padding、backgroundColor、textAlignなどのプロパティを指定することでスタイリングを行うことができます。

ImageコンポーネントをViewコンポーネント内に追加することで、ロゴを表示することができます。Imageコンポーネントは、画像を表示するためのコンポーネントです（詳細はImageを参照してください。）。

import {
  Authenticator,
  View,
  useTheme,
  Image,
  Text,
} from "@aws-amplify/ui-react";

~省略~

const customComponents = {
  Header() {
    const { tokens } = useTheme();
    return (
      <View
        textAlign="center"
        padding={tokens.space.large}
        backgroundColor={tokens.colors.white}
      >
        <Image
          alt="Amplify logo"
          src="https://docs.amplify.aws/assets/logo-dark.svg"
        />
      </View>
    );
  },

~省略~
}

今回はWeb上に存在するAmplifyのロゴを表示していますが、ディレクトリ内の静的ファイルを表示することも可能です。

import customImage from "../assets/custom-image.png";

<Image alt="custom logo" src={customImage} />

Footerプロパティを追加し、同様にViewコンポーネントを返す関数を定義します。TextコンポーネントをViewコンポーネント内に追加することで、フッターにテキストを表示することができます。Textコンポーネントは、テキストを表示するためのコンポーネントです（詳細はTextを参照してください。）。

const customComponents = {
    Footer() {
    const { tokens } = useTheme();
    return (
        <View
        textAlign="center"
        padding={tokens.space.large}
        backgroundColor={tokens.colors.white}
        >
        <Text color={tokens.colors.neutral[80]}>
            &copy; サーバーワークスエンジニアブログ
        </Text>
        </View>
    );
    },
}

実装内容

ステップ毎のカスタマイズ

初回ログイン時にテキストを表示する方法

初回ログイン時にテキストを表示するには、ForceNewPasswordプロパティをカスタマイズします。Headerプロパティを追加し、Viewコンポーネントを返す関数を定義します。TextコンポーネントをViewコンポーネント内に追加することで、テキストを表示することができます。

const customComponents = {
  ForceNewPassword: {
    Header() {
      return (
        <View>
          <Text>初回ログインの為パスワードを変更してください。</Text>
        </View>
      )
    },
  },
}

スタイリングの変更

スタイルを変更する方法は、従来のCSSを適用する方法と、ThemeProviderオブジェクトを使用する方法の2つがあります。

CSSを適用する方法

属性セレクターやクラスセレクターを使用して、以下のようにスタイルを変更することができます。

参考：CSSスタイル

参考：追加のCSSスタイル

/* src/pages/Login.css */
[data-amplify-authenticator] {
    --amplify-components-authenticator-router-box-shadow: 0 0 16px var(--amplify-colors-overlay-10);
    --amplify-components-authenticator-router-border-width: 0;
}

.amplify-button--primary {
    background: linear-gradient(
      to right,
      var(--amplify-colors-green-80),
      var(--amplify-colors-orange-40)
    );
  }

各種プロパティとデフォルト値は、こちらを参照してください。色とサイズの表記方法は、こちら：色、こちら：サイズを参照してください。

ThemeProviderオブジェクトを使用する方法

以下のコード例では、AWS Amplify UIライブラリのThemeProviderオブジェクトを使用して、アプリケーションのテーマをカスタマイズしています。useThemeフックを使って現在のテーマトークンを取得し、それを基にcustomTheme関数でカスタムテーマを作成します。このカスタムテーマは、ThemeProviderを使ってAuthenticatorコンポーネントに適用されます。

import {
  Authenticator,
  View,
  useTheme,
  Image,
  Text,
  ThemeProvider,
} from "@aws-amplify/ui-react";

~省略~

function customTheme(tokens: ReturnType<typeof useTheme>["tokens"]) {
  return {
    name: "Custom Theme",
    tokens: {
      components: {
        authenticator: {
          router: {
            borderWidth: "0",
          },
        },
        button: {
          primary: {
            backgroundColor: tokens.colors.neutral["100"],
          },
          link: {
            color: tokens.colors.neutral["60"],
          },
        },
      },
    },
  };
}

function Login() {
  const { tokens } = useTheme();
  const theme = customTheme(tokens);
  return (
    <ThemeProvider theme={theme}>
      <Authenticator>
        ~省略~
      </Authenticator>
    </ThemeProvider>
  );
}

上記のカスタムテーマでは、borderを0に設定することで、デフォルトの枠線を削除しています。また、ボタンの背景色を変更しています。

認証チェック

useAuthenticator関数を使用する方法

認証されているかどうかを確認する簡単なフックがuseAuthenticatorです。

まず、useAuthenticatorフックを使用するために、<Authenticator.Provider>コンポーネントをラップする必要があります。

参考

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

function App() {
  return (
    <Authenticator.Provider>
      <App />
    </Authenticator.Provider>
  )
}

次に、useAuthenticatorフックを使用して、認証ステータスを取得します。

import {
  Authenticator,
  View,
  useTheme,
  Image,
  Text,
  ThemeProvider,
  useAuthenticator,
} from "@aws-amplify/ui-react";

function Login() {
  const { tokens } = useTheme();
  const theme = customTheme(tokens);
  const { authStatus, user, signOut } = useAuthenticator((context) => [
    context.authStatus,
    context.user,
  ]);
  return (
    <ThemeProvider theme={theme}>
      <Authenticator
        loginMechanisms={["username", "email"]}
        hideSignUp
        variation="modal"
        components={customComponents}
      >
        <>
          {authStatus !== "authenticated" ? (
            <Authenticator />
          ) : (
            <>
              <h2>Welcome, {user.username}!</h2>
              <button onClick={signOut}>Sign out</button>
            </>
          )}
        </>
      </Authenticator>
    </ThemeProvider>
  );
}

まとめ

今回は、AmplifyUILibraryを用いたAmazon Cognito認証画面を実践的にカスタマイズする方法について紹介しました。componentsプロパティを使用することで、認証画面のヘッダーやフッター、各ステップのUIを独自のデザインに置き換えることができます。また、スタイリングの変更方法や認証チェックの方法についても紹介しました。ぜひ活用してみてください。

日本語化はこちら

blog.serverworks.co.jp