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

#React

#AWS Amplify

shiraishi

2022.06.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

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

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

実装コード

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

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

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

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