How can I change an Amplify SignUp Attribute component?

Question

I created a user pool with Amplify/Cognito and am stuck on formatting required attributes for a user on signup. I followed the docs showing appending a signup field after the form fields as I want to add 'gender' as a field, but is not supported at default.

I was able to get an additional component working, but on submission the radio field doesn't correlate to the 'gender' field with Cognito.

Following Amplify walkthrough, displays but can't structure with order...

Amplify.configure(awsExports);

function App() {
  return (
      <Authenticator formFields={formFields} signUpAttributes={['birthdate', 'name', 'gender']}
        components={{
          SignUp: {
          FormFields() {
            const { validationErrors } = useAuthenticator(); 
            
            return (
              <>
                <Authenticator.SignUp.FormFields />

                <RadioGroupField legend="Gender" name="Gender" defaultValue="male">
                  <Radio value="male">Male</Radio>
                  <Radio value="female">Female</Radio>
                  <Radio value="na">Prefer not to say</Radio>
                </RadioGroupField>
              </>  
            );
          }
        }
      }}
      >
        ...
      </Authenticator>
    </Provider>
  )
}

Creating form fields on top of the walk through creates a separate 'gender' field as an empty text box.

const formFields = {
    name: {
      order: 1
    },
    birthdate: {
      order: 2
    },
    gender: {
      label: 'Gender',
      key: 'gender',
      isRequired: true,
      order: 3
    },
    signUp: {
    email: {
      order: 4
    },
    password: {
      order: 5
    },
    confirm_password: {
      order: 6
    }
  }
}

I'm almost certain it's due to not associating the form field with the new component, and duplicates in the browser. I'm lacking on the execution of this assumption, however...

Answer 1

I ended up writing my own sign up function using the "aws-amplify/auth" package. I couldn't find any customizable solution with the Authenticator component, so it seems using signUp and confirmSignUp is way easier when using additional user-attributes.

async function handleSubmit(e: any) {
    e.preventDefault()
    const form = e.currentTarget
    
    await signUp({
        username: form.elements.email.value,
        password: form.elements.password.value,
        options: {
            userAttributes: {
                email: form.elements.email.value,
                name: form.elements.fullName.value,
                birthdate: form.elements.birthdate.value,
                gender: form.elements.gender.value,
            }
        }
    })
}