Trim inputs before submit

Is this related to a new or existing framework?

React Native

Is this related to a new or existing API?

Authentication

Is this related to another service?

No response

Describe the feature you’d like to request

As Cognito does not accept whitespace in the username, the library should trim the username input before submitting to avoid one of the most common validation error: Value at 'username' failed to satisfy constraint: Member must satisfy regular expression pattern: [\p{L}\p{M}\p{S}\p{N}\p{P}]+

We have noticed that quite a few of our users experience this especially when copy-pasting their usernames from various places. Trimming the inputs before submitting would prevent errors occurring if the username field contains leading or trailing whitespace.

The same functionality has already been implemented in the @aws-amplify/ui-components package (#8468 aws-amplify/amplify-js#7408 aws-amplify/amplify-js#6737). I believe that the same approach would be great to have in the React Native package as well.

Describe the solution you’d like

The solution could be the same as in the @aws-amplify/ui-components package (PRs: aws-amplify/amplify-js#8468 aws-amplify/amplify-js#7408).

We would trim the username inputs in the following components:

• ConfirmSignUp.tsx
• ForgotPassword.tsx
• SignIn.tsx

We would not trim the username in the SignUp component, as

customers would be expecting their exact input to be used for sign up (https://github.com/aws-amplify/amplify-js/pull/7408#issuecomment-755788464)

Describe alternatives you’ve considered

Alternative approach could be to trim the inputs already in the getUsernameFromInput method of AuthPiece.tsx (https://github.com/aws-amplify/amplify-js/blob/main/packages/aws-amplify-react-native/src/Auth/AuthPiece.tsx#L70). This would be more DRY, but could it introduce some problems with the SignUp component or break the flow somehow?

Additional context

No response

Is this something that you’d be interested in working on?

• 👋 I may be able to implement this feature request
• ⚠️ This feature might incur a breaking change

I’d be happy to make a pull request after there is some consensus which approach would be best 😃

[sammartinez]

@sammartinez I can make a PR, no problem 😃

Do you have any ideas for the implementation? Should we implement the trimming logic in the AuthPiece or in the individual components?

I look to place this within the individual components themselves. Thanks!

[rennehir]

@sammartinez I can make a PR, no problem 😃

Do you have any ideas fornthe implementation? Should we implement the trimming logic in the AuthPiece or in the individual components?