Popular posts

Hey there,

So I was trying to improvise on this amplify authentication by adding a custom attribute to the sign up screen. After fiddling around for a couple of weeks and skimming tons of articles on the internet, I found a way to do this.

1) After executing

amplify add auth

we need to execute the following command:

amplify override auth

This will create a new file called override.ts in the amplify folder. You then paste the following snippet within the enclosing function in this file:

    const myCustomAttribute = {
        attributeDataType: 'String',
        developerOnlyAttribute: false,
        mutable: true,
        name: '<name of your attribute for eg registration_code>',
        required: false,
      }
      resources.userPool.schema = [
        ...(resources.userPool.schema as any[]), // Carry over existing attributes (example: email)
        myCustomAttribute,
      ]

2) Execute

amplify push

3) Once push is done, you should be able to see your new attribute under "custom attributes" in the AWS cognito pool.

4) In your react code, you modify the withAuthenticator section like below:

export default withAuthenticator(PatientList, {
  formFields: formFields,
  signUpAttributes:['email', 'custom:<your attribute same as in override.ts>'],
  components: {
    SignIn: {
      Header: Header,
    }
  }
});

where formFields should look like:

const formFields = {
  signUp: {
    username: {
      order: 1,
    },
    password: {
      order: 2,
    },
    confirm_password: {
      order: 3,
    },
    email: {
      order: 4,
    },
    'custom:<your attribute name as in override.ts>': {
      order: 5,
      label: "<custom_label_name>"
    },
  },
};

Hope this helps someone.