React Native版Amplify AuthenticatorのフィールドをEmail/Passwordのみにする

React Native版Amplify Authenticator コンポーネントにパラメータヘルがあって

• SignUp,SignInでコンポーネントを共有する
• UsernameをEmailのエイリアスにする
• Phone Number認証を外す

の3つの条件を揃えるための設定をソースコードを調べて特定できたので記録する。

export default withAuthenticator(App, {
  usernameAttributes: "email",
  signUpConfig: {
    hiddenDefaults: ['phone_number'],
  },
})

SignIn

SignUp

実装を見る箇所

• https://github.com/aws-amplify/amplify-js/tree/bb60060d30c7463d1893b7678ebc18e959b46990/packages/aws-amplify-react-native/src/Auth
• https://github.com/aws-amplify/amplify-js/blob/bb60060d30c7463d1893b7678ebc18e959b46990/packages/aws-amplify-react-native/src/Auth/Authenticator.tsx
• https://github.com/aws-amplify/amplify-js/blob/bb60060d30c7463d1893b7678ebc18e959b46990/packages/aws-amplify-react-native/src/Auth/SignIn.tsx
• https://github.com/aws-amplify/amplify-js/blob/bb60060d30c7463d1893b7678ebc18e959b46990/packages/aws-amplify-react-native/src/Auth/SignUp.tsx

NOTE

JavaScriptコンポーネントは Amplify UI で現在クロスフレームワーク化されており、そのうちReact NativeのAuthenticatorも新バージョンの移行が必要になるかもしれない