AWS Cognito Amplify Authentication and Angular UI Components

Question

Hello I am trying to use the use the built-in Angular components for authentication. I have created the Cognito and the API with Amplify. The Cognito user pool cannot be changed. Here is a screenshot where you can see the setup as well:

I have initialize the component like this:

  <ion-content padding>  
      <amplify-authenticator [signUpConfig]="signUpConfig" framework="ionic"></amplify-authenticator>
  </ion-content>

My class contains this for the signUpConfig:

  constructor(
    public events: Events,
    public amplifyService: AmplifyService,
    public router: Router
  ) {
    this.authState = { signedIn: false };
    this.signUpConfig = {
      header: "SignUp",
      defaultCountryCode: '30',
      hideAllDefaults: true,
      signUpFields: [
        {
          label: 'Mobile-Username',
          key: 'username',
          required: true,
          displayOrder: 1,
          type: 'string'
        },
        {
          label: 'Mobile',
          key: 'phone_number',
          required: true,
          displayOrder: 2,
          type: 'string'
        },
        {
          label: 'Password',
          key: 'password',
          required: true,
          displayOrder: 3,
          type: 'password'
        },
        {
          label: 'Email',
          key: 'email',
          required: true,
          displayOrder: 4,
          type: 'email'
        },
        {
          label: 'Name',
          key: 'name',
          required: true,
          displayOrder: 5,
          type: 'string'
        },
        {
          label: 'Surname',
          key: 'family_name',
          required: true,
          displayOrder: 6,
          type: 'string'
        },
        {
          label: 'Address',
          key: 'address',
          required: true,
          displayOrder: 7
        },
        {
          label: 'Gender',
          key: 'gender',
          required: true,
          displayOrder: 8
        }
      ]

    };
  }

Unfortunately I have to include the

        {
          label: 'Mobile-Username',
          key: 'username',
          required: true,
          displayOrder: 1,
          type: 'string'
        },

in order to populate the username with the mobile number basically since the Cognito UserPool is waiting for a username and a mobile number although it is clear from the settings that I need only mobile as my username.

If I leave the first entry from my signUpFields then I always receive an error from the server that the username cannot be empty.

What am I supposed to do especially now that I cannot do any changes on my user pool. I believe this is due to the fact that I used the Amplify CLI to setup it.

Kokuou Kokuou · Accepted Answer · 2019-04-07T15:35:17

Have your tried passing username in the attributes parameters? Or try preferred_username instead of username in the attributes parameter.

Auth.signUp({
    username,
    password,
    attributes: {
      'username': username // HERE or try 'preferred_username': username
    },
    validationData: []  //optional
    }).then().catch()

Based on the documentation

If the username string is in valid phone number format, the user pool automatically populates the phone_number attribute of the user with the username value. You might not need to add the code above.

Link: https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-attributes.html#user-pool-settings-aliases

AWS Cognito Amplify Authentication and Angular UI Components

1 Answers