Angular AWS Amplify authenticator extrra fields

Question

I'm trying to use the AWS Amplify with Angular for authentication with Cognito, the problem that I'm facing is, when I call the component:

<amplify-authenticator></amplify-authenticator>

It does not come with all the fields for Sign up, that I marked as required in Cognito, so it always return a error like: Missing field Name, for example

So my question is, if they don't return some of the fields that I marked as required, how can I add it, without having to change the source of the component itself.

PS: Im using the Angular, aws-amplify-angular.

Answer 1

It doesn't appear at the time of the writing of this comment that it's possible with the full release for Angular or React (only Vue), but the beta release does have some options.

You can get the beta by adding the following package:

npm install aws-amplify-angular@beta

And updating the amplify-authenticator component to look like this:

<amplify-authenticator [signUpConfig]="signUpConfig" ></amplify-authenticator>

Where signupConfig will be set in your component and will look something like this:

const signUpConfig = {
  header: 'Welcome!',
  defaultCountryCode: '46',
  hideDefaults: true,
  signUpFields: [
    {
      label: 'Username',
      key: 'username',
      required: true,
      displayOrder: 1,
      type: 'string',
    },
    {
      label: 'Password',
      key: 'password',
      required: true,
      displayOrder: 2,
      type: 'password',
    },
    {
      label: 'Email',
      key: 'email',
      required: true,
      displayOrder: 3,
      type: 'email',
    },
    {
      label: 'Name',
      key: 'name',
      required: true,
      displayOrder: 4,
      type: 'string',
    },
    {
      label: 'Family name',
      key: 'family_name',
      required: true,
      displayOrder: 5,
      type: 'string',
    },
    {
      label: 'Phone number',
      key: 'phone_number',
      required: false,
      displayOrder: 6,
      type: 'string',
    }
  ]
};

See the following two links for details:

https://github.com/aws-amplify/amplify-js/issues/1911#issuecomment-437090097 https://haverchuck.github.io/docs/js/ionic#signup-configuration