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.

Hey Victoria, Thanks a ton for the article. I followed it to the 'T' and it almost got me there. I had to do minor tweaks to get this to work for the latest version aws amplify.

I am listing the tweaks I had to do to get this working in my case. Hopefully, it helps someone who is looking for leads like me:

1) I had to wrap Amplify inside {} to get it to work. Else I got an import error on app startup

import { Amplify } from 'aws-amplify';

2) I had to import the css explicitly since it is no longer part of the amplify dist I suppose:

import '@aws-amplify/ui-react/styles.css';

3) AmplifySignOut is no longer supported. I had to use Authenticator and wrap the code within { signOut, user }. For example:

return (
    <Authenticator>
      {({ signOut, user }) => (
        <div className="App">
          <Alert variant="success">
            <Alert.Heading>Hey, {user.username}</Alert.Heading>
            <p>
              Thanks for using abcdef &#10084;
            </p>
            <hr />
            <p className="mb-0">
              Would you like to sign out from this device?
            </p>
          </Alert>
          <button className="btn btn-info mr-2" onClick={signOut}>Sign out</button>
        </div>
      )}
    </Authenticator>
  );

Other than these, the tutorial worked like a charm. Keep rocking :)

Thanks for sharing ❤️

You mentioned a verification code. Has configuring this part of the process gotten any simpler? So you can use verification link for example. I really like this font

Fantastic - I just learned about this system in a talk at the Women Who Code conference; can't wait to use your guide to build it myself!

Thanks for sharing Victoria Lo.

How did you find AWS Amplify? I keep saying I'll give it a go but I keep putting it off.

Great article by the way! 🔥

This is super useful! I'll be using it, thank you!!

Great Article Victoria, thanks for sharing :-)

Always amazing! Thanks for the super great content! Will be useful a lot!