あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、取り上げたりしています。

React+AmplifyのCognitoサインアップで電話番号を無効にする方法

React + Amplify + Cognito のサインアップ画面では、デフォルトで電話番号が必須項目になってしまいます。

f:id:fnyablog:20190719173844p:plain:w480

Congnito のユーザープールでは、必須項目になっていないのにもかかわらず。

f:id:fnyablog:20190719173928p:plain:w480

ですが、この電話番号を無効にする方法があります。

その方法は簡単で、withAuthenticatorの第2引数に電話番号を無効にする設定を入れるだけです。

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

2019/10/27追記

今は以下のように書かないと動作しないようです。

export const signUpConfig: any = {
  hideAllDefaults: true,
  signUpFields: [
    {
      label: 'Username',
      key: 'username',
      required: true,
      type: 'string',
      displayOrder: 1,
    },
    {
      label: 'Email',
      key: 'email',
      required: true,
      type: 'string',
      displayOrder: 2,
    },
    {
      label: 'Password',
      key: 'password',
      required: true,
      type: 'password',
      displayOrder: 3,
    },
  ]
};

export default withAuthenticator(App, false, [], null, null, signUpConfig);

この状態でサインアップ画面を表示すると、以下のように電話番号の項目がなくなり、登録も問題なくできるようになりました。

f:id:fnyablog:20190719174149p:plain:w480

下記サイトを参考にさせていただきました。

github.com