chore(ui-react-native): Add RN Authenticator fields validations

.changeset/rotten-lies-promise.md

@@ -0,0 +1,6 @@
+---
+'@aws-amplify/ui-react-native': patch
+'@aws-amplify/ui-react-core': patch
+---
+
+chore(ui-react-native): Add Authenticator fields validations

packages/e2e/features/ui/components/authenticator/sign-up-with-email.feature

@@ -51,6 +51,13 @@ Scenario: Sign up with a new email & password
   And I click the "Create Account" button
   Then I see "Confirmation Code"
 
+@react-native
+Scenario: Sign up using invalid email
+  When I type a new "email" with value ''
+  Then I see "This field is required"
+  When I type a new "email" with value 'inv'
+  Then I see "Please enter a valid email"
+
   @angular @react @vue
   Scenario: Email field autocompletes username
 

packages/react-core/src/Authenticator/hooks/types.ts

@@ -95,18 +95,21 @@ export type ConfirmSignInBaseProps<FieldType = {}> = {
   challengeName: AuthChallengeName;
   toSignIn: UseAuthenticator['toSignIn'];
 } & CommonRouteProps &
-  ComponentSlots<FieldType>;
+  ComponentSlots<FieldType> &
+  ValidationProps;
 
 export type ConfirmSignUpBaseProps<FieldType = {}> = {
   codeDeliveryDetails: UseAuthenticator['codeDeliveryDetails'];
   resendCode: UseAuthenticator['resendCode'];
 } & CommonRouteProps &
-  ComponentSlots<FieldType>;
+  ComponentSlots<FieldType> &
+  ValidationProps;
 
 export type ConfirmVerifyUserProps<FieldType = {}> = {
   skipVerification: UseAuthenticator['skipVerification'];
 } & CommonRouteProps &
-  ComponentSlots<FieldType>;
+  ComponentSlots<FieldType> &
+  ValidationProps;
 
 export type ForceResetPasswordBaseProps<FieldType = {}> = {
   toSignIn: UseAuthenticator['toSignIn'];
@@ -117,21 +120,24 @@ export type ForceResetPasswordBaseProps<FieldType = {}> = {
 export type ResetPasswordBaseProps<FieldType = {}> = {
   toSignIn: UseAuthenticator['toSignIn'];
 } & CommonRouteProps &
-  ComponentSlots<FieldType>;
+  ComponentSlots<FieldType> &
+  ValidationProps;
 
 export type SetupTOTPBaseProps<FieldType = {}> = {
   toSignIn: UseAuthenticator['toSignIn'];
   totpSecretCode: UseAuthenticator['totpSecretCode'];
 } & CommonRouteProps &
-  ComponentSlots<FieldType>;
+  ComponentSlots<FieldType> &
+  ValidationProps;
 
 export type SignInBaseProps<FieldType = {}> = {
   hideSignUp?: boolean;
   toFederatedSignIn: UseAuthenticator['toFederatedSignIn'];
   toResetPassword: UseAuthenticator['toResetPassword'];
   toSignUp: UseAuthenticator['toSignUp'];
 } & CommonRouteProps &
-  ComponentSlots<FieldType>;
+  ComponentSlots<FieldType> &
+  ValidationProps;
 
 export type SignUpBaseProps<FieldType = {}> = {
   hideSignIn?: boolean;
@@ -144,7 +150,8 @@ export type SignUpBaseProps<FieldType = {}> = {
 export type VerifyUserProps<FieldType = {}> = {
   skipVerification: UseAuthenticator['skipVerification'];
 } & CommonRouteProps &
-  ComponentSlots<FieldType>;
+  ComponentSlots<FieldType> &
+  ValidationProps;
 
 export interface DefaultProps<FieldType = {}> {
   ConfirmSignIn: ConfirmSignInBaseProps<FieldType>;

packages/react-native/jest.config.js

@@ -1,10 +1,13 @@
 module.exports = {
   preset: 'react-native',
   modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  collectCoverage: true,
   collectCoverageFrom: [
     '<rootDir>/src/**/*.{js,jsx,ts,tsx}',
     '!<rootDir>/src/**/*{c,C}onstants.ts',
   ],
+  // ignore coverage for top level "export" and style files
+  coveragePathIgnorePatterns: ['<rootDir>/src/(index|styles).(ts|tsx)'],
   moduleNameMapper: {
     '^react$': '<rootDir>/node_modules/react',
     '^react-native$': '<rootDir>/node_modules/react-native',

packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx

@@ -28,18 +28,21 @@ const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({
   hasValidationErrors,
   isPending,
   resendCode,
+  validationErrors,
   ...rest
 }) => {
   const {
     disableFormSubmit,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const disabled = hasValidationErrors || disableFormSubmit;
@@ -72,6 +75,7 @@ const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx

@@ -28,18 +28,21 @@ const ConfirmSignIn: DefaultConfirmSignInComponent = ({
   handleSubmit,
   isPending,
   toSignIn,
+  validationErrors,
   ...rest
 }) => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getChallengeText(challengeName);
@@ -71,6 +74,7 @@ const ConfirmSignIn: DefaultConfirmSignInComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/ConfirmSignIn.spec.tsx

@@ -21,6 +21,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ConfirmSignIn.Header,
   isPending: false,
   toSignIn: jest.fn(),

packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx

@@ -29,18 +29,21 @@ const ConfirmSignUp: DefaultConfirmSignUpComponent = ({
   handleSubmit,
   isPending,
   resendCode,
+  validationErrors,
   ...rest
 }) => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getDeliveryMethodText(codeDeliveryDetails);
@@ -74,6 +77,7 @@ const ConfirmSignUp: DefaultConfirmSignUpComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/__tests__/ConfirmSignUp.spec.tsx

@@ -16,6 +16,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ConfirmSignUp.Header,
   isPending: false,
   resendCode: jest.fn(),

packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx

@@ -27,18 +27,21 @@ const ConfirmVerifyUser: DefaultConfirmVerifyUserComponent = ({
   handleSubmit,
   isPending,
   skipVerification,
+  validationErrors,
   ...rest
 }) => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getAccountRecoveryInfoText();
@@ -70,6 +73,7 @@ const ConfirmVerifyUser: DefaultConfirmVerifyUserComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/__tests__/ConfirmVerifyUser.spec.tsx

@@ -18,6 +18,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ConfirmVerifyUser.Header,
   isPending: false,
   skipVerification: jest.fn(),

packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx

@@ -24,18 +24,21 @@ const ForceNewPassword: DefaultForceNewPasswordComponent = ({
   hasValidationErrors,
   isPending,
   toSignIn,
+  validationErrors,
   ...rest
 }) => {
   const {
     disableFormSubmit,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const disabled = hasValidationErrors || disableFormSubmit;
@@ -70,6 +73,7 @@ const ForceNewPassword: DefaultForceNewPasswordComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

packages/react-native/src/Authenticator/Defaults/ResetPassword/ResetPassword.tsx

@@ -26,18 +26,21 @@ const ResetPassword: DefaultResetPasswordComponent = ({
   handleSubmit,
   isPending,
   toSignIn,
+  validationErrors,
   ...rest
 }) => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getResetYourPasswordText();
@@ -69,6 +72,7 @@ const ResetPassword: DefaultResetPasswordComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

packages/react-native/src/Authenticator/Defaults/ResetPassword/__tests__/ResetPassword.spec.tsx

@@ -21,6 +21,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ResetPassword.Header,
   isPending: false,
   toSignIn: jest.fn(),

packages/react-native/src/Authenticator/Defaults/SetupTOTP/SetupTOTP.tsx

@@ -33,18 +33,21 @@ const SetupTOTP: DefaultSetupTOTPComponent = ({
   isPending,
   toSignIn,
   totpSecretCode,
+  validationErrors,
   ...rest
 }) => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getSetupTOTPText();
@@ -88,6 +91,7 @@ const SetupTOTP: DefaultSetupTOTPComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

packages/react-native/src/Authenticator/Defaults/SetupTOTP/__tests__/SetupTOTP.spec.tsx

@@ -22,6 +22,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   isPending: false,
   toSignIn,
   totpSecretCode: "Let's keep it hush hush",

packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx

@@ -21,6 +21,7 @@ const SignIn: DefaultSignInComponent = ({
   hideSignUp,
   toResetPassword,
   toSignUp,
+  validationErrors,
   ...rest
 }) => {
   const {
@@ -33,13 +34,15 @@ const SignIn: DefaultSignInComponent = ({
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getSignInTabText();
@@ -75,6 +78,7 @@ const SignIn: DefaultSignInComponent = ({
       buttons={buttons}
       fields={fieldsWithHandlers}
       headerText={headerText}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/SignIn.spec.tsx

@@ -29,6 +29,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: SignIn.Header,
   isPending: false,
   socialProviders: undefined,