Amplify register page in withAuthenticator component doesn't accommodate all settings in add auth manual configuration

[CloudInnovator]

How did you install the Amplify CLI?

npm

If applicable, what version of Node.js are you using?

v20.8.0

Amplify CLI Version

12.10.1

What operating system are you using?

Ubuntu

Did you make any manual changes to the cloud resources managed by Amplify? Please describe the changes made.

No

Describe the bug

Amplify register page doesn't show Gender or Address label or text box after selection as requirements for registration from manual walkthorugh configuration in add auth, instead, it shows an error that attributes did not conform to the schema: address: The attribute is required upon pressing submit button. This error is catastrophic because elements required at sign up can't be changed. Removing auth itself requires removing other dependencies like Userpool,AdminQueries with with its API and function if present.

Expected behavior

Should display all labels and textboxes/inputs required for signup at registration page as intended at signup configuration including Gender and Address.

Reproduction steps

1. Add auth amplify add auth
2. Select Walkthrough all the auth configurations
3. Select User Sign-Up, Sign-In, connected with AWS IAM controls (Enables per-user Storage feat
   ures for images or other content, Analytics, and more).
4. Select email as signup method.
5. Select required signup attributes to include Given Name, Family Name, DOB, Phone, Gender and Address
6. Go to the registration page and fill information for registration.
7. Observe the error reported regarding schema conformity upon pressing submit button.

Project Identifier

0068b6c1ac78a769ef78b377c531ffb5

Log output

# Put your logs below this line
2024-02-08T11:01:05.222Z|info : amplify add auth  
2024-02-08T11:01:05.367Z|info : @aws-amplify/amplify-cli-core.banner-message/index.ts.fetch banner messages from https://aws-amplify.github.io/amplify-cli/banner-message.json({}
2024-02-08T11:01:18.259Z|info : amplify update auth  
2024-02-08T11:01:18.403Z|info : @aws-amplify/amplify-cli-core.banner-message/index.ts.fetch banner messages from https://aws-amplify.github.io/amplify-cli/banner-message.json({}
2024-02-08T11:04:30.226Z|info : amplify remove auth  
2024-02-08T11:04:30.430Z|info : @aws-amplify/amplify-cli-core.banner-message/index.ts.fetch banner messages from https://aws-amplify.github.io/amplify-cli/banner-message.json({}
2024-02-08T11:05:29.383Z|info : amplify diagnose core  {"send-report":true,"yes":false}
2024-02-08T11:05:29.521Z|info : @aws-amplify/amplify-cli-core.banner-message/index.ts.fetch banner messages from https://aws-amplify.github.io/amplify-cli/banner-message.json({}

Additional information

No response

Before submitting, please confirm:

• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• I have removed any sensitive information from my code snippets and submission.

[reesscot]

@CloudInnovator Are you using the Cognito Hosted UI to view the registration form, or are you using the Amplify Authenticator UI Component?

[cwomack]

Sending this issue to the UI repo for better assistance.

[CloudInnovator]

@reesscot I am using Authenticator UI Component.

[reesscot]

Hi @CloudInnovator,
There are a set of Cognito User Pool attributes which are not automatically rendered on the SignUp page due to the fact that we cannot assume how those fields should be validated (full list here). If you've added Gender and Address as required Cognito User Pool attributes, then you will need to customize the SignUp form to add those fields.

See "All Attributes" code example here:
https://ui.docs.amplify.aws/react/connected-components/authenticator/configuration#sign-up-attributes

Example of customizing the SignUp Fields with a checkbox:
https://ui.docs.amplify.aws/react/connected-components/authenticator/customization#sign-up-fields
This shows adding a checkbox, but you could add a TextField for Address and SelectField for Gender.

[CloudInnovator]

@reesscot Thank you very much. This should help my situation. That means I need a custom validator for validation, if I am right; however, in my thinking, validation for addresses is not very tight except for certain locales that have data for valid post codes/zip codes etc. Therefore, probably just a string is okay in the first instance or base configuration.

[reesscot]

@CloudInnovator Closing this out as it sounds like you got your question answered. Please open a new issue if you have further questions / issues!