Amplify のAuthenticationでのGenderなどのフィールドの表示方法

TL;DR

引用： https://ui.docs.amplify.aws/react/connected-components/authenticator/configuration#sign-up-attributes

The Authenticator automatically renders most Cognito User Pools attributes, with the exception of address, gender, locale, picture, updated_at, and zoneinfo. Because these are often app-specific, they can be customized via Sign Up fields.

とあるのでgenderなど追加するのには自分でフィールドをどうにかしないとならないのでどうするか？

以下のようにする

SignUp用のコンポーネントにGender用のフィールドを追加したものを用意する。

というか、ここでカスタマイズするのが色々便利そう。

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

const components = {
  SignUp: {
    FormFields() {
      return (
        <>
          <Authenticator.SignUp.FormFields />
          <SelectField
            name="gender"
            label="Gender"
            placeholder="Select your gender"
            required={false}
            key="gender"
            options={['male', 'female', 'prefer_not_to_say']}
          />
        </>
      )
    }
  }
}

<Authenticator>では以下のようにする

export function Home() {
  return (
    <Authenticator
      signUpAttributes={['birthdate', 'gender']}
      formFields={{
        signUp: {
          birthdate: { label: 'Birthdate (option)', required: false},
        }
      }}
      components={components}
    >
    {({ signOut, user }) => (
    <>
    〜〜〜中略〜〜〜
      <button onClick={signOut}>Sign out</button>
    </>
    )}
    </Authenticator>
  )
}

export default Home

requiredをfalseにすれば、この時点で入れる必要なくサインアップできる（ところまでは確認した）。そもそもサインアップ時に取得しないのではあれば、表示をしない、ということでいいのだが、オプショナルにサインアップ時に取得したい、という場合にはこうしておくのが良いかも。

withAuthenticatorで、このような形に渡すやり方については不明なのでわかる人いたら教えてくださいませ。