Customization for individual fields in `signUpFields` prop

[andrei-zgirvaci]

Is your feature request related to a problem? Please describe. Currently, I am using withAuthentificator component for the Sign In and Sign Up process. During Sign Up process, I want to ask the user for a custom attribute which I added to the signUpFields prop like so:

{
  label: 'Account Type (contractor | client)',
  key: 'custom:userType',
  required: true,
  displayOrder: 6,
  type: 'string',
}

As you can see, I would like to offer the user two options for this field: contractor or client. With the current implementation, the user is allowed to type anything as there is no validation that happens whatsoever.

Describe the solution you'd like A great solution to this would be the ability to turn this input into a dropdown so users can only select what is available or a less nice way of doing this would be to add a regex validation to the field. This won't be the desired solution, but at least would make the sign up process a little bit more accurate.

Describe alternatives you've considered I am also aware there is a way to customize the signup screen and to implement custom inputs as described in the documentation here. But, I think there is a better way to achieve this without going through a whole customization process.

Additional context I understand I might be a little greedy and lazy 😁 and want withAuthentificator to offer more options, but I think it's a good feature to consider or at least to start a conversation around. Thanks for all the work you guys do, really appreciate it! 😊

[ericclemmons]

I added an example that address this use-case specifically via #552 here:

https://ui.docs.amplify.aws/ui/components/authenticator?platform=react#sign-up-fields

In the example, it's using preferred_username, but you can provide custom:userType and it should automatically submit with the form.

Let me know if that works for you! 🙏

[andrei-zgirvaci]

@ericclemmons thank you so much for the example!

My bad, as I didn't specify that I am actually using the React Native library. Any ideas when it's gonna be available there also?

[ericclemmons]

That's my mistake! Re-opening & tagging as React Native.

The API for React Native should look pretty similar.

@ashika01 @calebpollman Should we keep this issue in the UI repo or migrate it to JS for the next aws-amplify-react-native release?

[wlee221]

With the new UI components supporting SignUpFields and FormFields option, we'll close this issue. Please open an issue if this doesn't work out, thanks 🙏

[andrei-zgirvaci]

@wlee221 as I understand, the new UI components are currently only available for React and not React Native, so I think this issue is still relevant, unless the new UI is also available for React Native...

[calebpollman]

@andrei-zgirvaci You are correct that the new Authenticator is only available for React and not React Native. We are currently working to bridge that gap by adding a new React Native Authenticator that will have a similar API to what we have for React, allowing for greater customization. Will reopen this ticket in the meantime

[calebpollman]

@andrei-zgirvaci The new React Native Authenticator is now in developer preview which allows for custom sign up attributes. Take a look at our docs for more info: https://ui.docs.amplify.aws/react-native/connected-components/authenticator/customization#form-field-customization