User Pool’s Attributes disabled with AWS Amplify Authentication module

Question

I configured Amplify Authentication module with the CLI toolchain in my angular project.

Now, I try to change my User Pool’s Attributes setting in Amazon Cognito console as mentioned in the documentation here :

Unfortunately, I see all the fields disabled in my console.

Is it disabled because I miss something in the automated setup or because it is not possible now with the CLI and I need to provide a manual setup?

Thanks for your answers,

Answer 1

Edit 2019-04-11:

It is no longer necessary to update manually the configuration file.

In the latest version of the CLI, we can now choose to sign in by Email :

---

Original answer

I found out there was an existing issue about this topic mentioning a way to adapt the User Pool’s Attributes.

Simply modify the file amplify/backend/auth/<project_name>/<project_name>-cloudformation-template.yml

Right after the lines:

Type: AWS::Cognito::UserPool
Properties:
  UserPoolName: !Ref userPoolName

Add the line:

  UsernameAttributes:
    - 'email'

And push the modifications with amplify push

Answer 2

You cannot change the attributes of a user pool after creation, no matter whether you created the user pool manually in the AWS console or with the Amplify CLI (see here).

And there seems to be no way in the CLI to configure the user pool so that "Email address or phone number" radio button gets checked rather than the "Username" one.

So, if you want to use email as "usernames" after running the Amplify CLI, you have two options:

Option 1

Leave all the user pool settings as is and call the signUp method like this:

    signup(email, password, email)

The first arg is the username, and you just use the email for it, the second arg is the password, and the third arg is the email (which might have been automatically set as "required" by the CLI, if you use email verification).

Option 2

1. Create a new user pool manually in the AWS console and set the attributes radio button to "Email address or phone number" at creation time.

   

2. In your main.ts file, overwrite the userPoolId and userPoolWebClientId configurations from aws-exports.js with the corresponding values of the new user pool:

   import Amplify from 'aws-amplify';
   import amplify from './aws-exports';
   
   Amplify.configure(amplify);
   Amplify.configure({
     Auth: {
       userPoolId: 'us-east-1_jZIcja1eI',
       userPoolWebClientId: '80e40l0hvvrct4avi3buceekf',
     }
   });
   

   You can find the values here:

   • User pool ID:

     

   • For the user pool web client ID, create a new app client and copy its ID:

     

     When you create the app client, make sure to deselect "Generate client secret", otherwise there will be a Unable to verify secret hash for client error when you call the signUp method:

     

     For the name of the app client, you can choose anything you want.

Differences

With option 1 (sign in with username), you can theoretically have multiple user accounts with different usernames but the same email address (no email uniqueness, only the usernames must be unique).

With option 2 (sign in with email address), the email address must be unique, that is, there can be no two accounts with the same email address. With this option, the username is automatically set to the auto-generated "sub" identifier.

The following errors are returned when trying to sign up a new user with a username (option 1) or email address (option 2) that already exists:

Username (option 1):

Email address (option 2):