【React】Amplify UI Components でログイン画面を実装する

はじめに

最近、Amplify UI Componentsでログイン画面を実装する機会がありました。
2022/6/30 現在、Amplify UI Componentsのバージョンは大幅にアップしており、@aws-amplify/ui-react package は、v3.0.3が最新となっています。その実装方法も大幅に変更され、より簡単・便利に扱えるようになっています。

• Amplify React UI (React)
• Amplify Docs (React)

前バージョンでの実装記事は、よくヒットするのですが、最新バージョンでの実装はあまり見かけないように思いましたので、ここに記載します。とはいえ、公式リファレンスの通りです。

実装コード

/src/App.tsx

function App() {
  const { route } = useAuthenticator((context) => [context.user]);

  return route === 'authenticated' ? 
    <Something></Something> // ログイン済みの場合に表示されるコンポーネント
    : <Authenticator formFields={AuthenticatorFormFields} components={AuthenticatorComponent} hideSignUp={true} />
}

/src/AuthenticatorFormFields.tsx

const AuthenticatorFormFields = {
  signIn: {
    username: {
      label: 'ユーザー名 *',
      labelHidden: false,
      placeholder: 'ユーザ名を入力',
      isRequired: true,
    },
    password: {
      label: 'パスワード *',
      labelHidden: false,
      placeholder: 'パスワードを入力',
      isRequired: true,
    },
  },
  resetPassword: {
    username: {
      label: 'ユーザー名',
      labelHidden: false,
      placeholder: 'メールアドレスを入力',
      isRequired: true,
    },
  },
  confirmResetPassword: {
    confirmation_code: {
      label: 'コード',
      labelHidden: false,
      placeholder: '確認コードを入力してください',
      isRequired: false,
    },
    password: {
      label: '新しいパスワード',
      labelHidden: false,
      placeholder: '新しいパスワードを入力してください',
      isRequired: false,
    },
    confirm_password: {
      label: 'パスワードを認証する',
      labelHidden: false,
      placeholder: '新しいパスワードをもう一度入力してください',
      isRequired: false,
    },
  },
  forceNewPassword: {
    password: {
      label: '新しいパスワード',
      labelHidden: false,
      placeholder: '新しいパスワードを入力してください',
      isRequired: false,
    },
    confirm_password: {
      label: 'パスワードを認証する',
      labelHidden: false,
      placeholder: '新しいパスワードをもう一度入力してください',
      isRequired: false,
    },
  },
}

export default AuthenticatorFormFields

/src/AuthenticatorComponent.tsx

import { useTheme, View, Text, Heading } from '@aws-amplify/ui-react'

const AuthenticatorComponent = {
  Header() {
    const { tokens } = useTheme()
    return <View padding={tokens.space.xxxl} />
  },
  Footer() {
    const { tokens } = useTheme()
    return (
      <View textAlign="center" padding={tokens.space.xxxl}>
        <Text color={`${tokens.colors.neutral['80']}`}>
          &copy; All Rights Reserved
        </Text>
      </View>
    )
  },
  SignIn: {
    Header() {
      return <Heading>ログイン</Heading>
    },
  },
  ConfirmSignIn: {
    Header() {
      return <Heading>ログイン</Heading>
    },
  },
  ResetPassword: {
    Header() {
      return <Heading>パスワード再交付</Heading>
    },
  },
  ConfirmResetPassword: {
    Header() {
      return <Heading>パスワード再交付</Heading>
    },
  },
}

export default AuthenticatorComponent

ポイント

上記のコードを、そのまま使うと、以下の画面が実装できます。

• Authenticator

そして、Authenticatorの状態を管理するためのuseAuthenticator hooks（App.tsxの２行目）が用意されていますので、こちらを利用することで表示するコンポーネントを出し分けを行うことが可能です。

Hooks自体の扱い方については、こちらのReact公式リファレンスをご参照ください。

以上、どなたかの参考になりましたら幸いです。