fix(authenticator): required phone number validator (#4106)

* fix(authenticator):required phone number validator

* fix: typo in validator

Author: Jordan-Nelson

packages/authenticator/amplify_authenticator/lib/src/mixins/authenticator_phone_field.dart

@@ -47,7 +47,8 @@ mixin AuthenticatorPhoneFieldMixin<FieldType extends Enum,
     return phoneNumber?.ensureStartsWith('+${state.dialCode.value}');
   }
 
-  String displayPhoneNumber(String phoneNumber) {
+  String displayPhoneNumber(String? phoneNumber) {
+    phoneNumber = phoneNumber ?? '';
     final prefix = '+${state.dialCode.value}';
     if (phoneNumber.startsWith(prefix)) {
       phoneNumber = phoneNumber.substring(prefix.length);

packages/authenticator/amplify_authenticator/lib/src/mixins/authenticator_username_field.dart

@@ -164,6 +164,15 @@ mixin AuthenticatorUsernameField<FieldType extends Enum,
     }
   }
 
+  String displayPhoneNumber(String? phoneNumber) {
+    phoneNumber = phoneNumber ?? '';
+    final prefix = '+${state.dialCode.value}';
+    if (phoneNumber.startsWith(prefix)) {
+      phoneNumber = phoneNumber.substring(prefix.length);
+    }
+    return phoneNumber;
+  }
+
   @override
   FormFieldValidator<UsernameInput> get validator {
     switch (selectedUsernameType) {
@@ -183,7 +192,7 @@ mixin AuthenticatorUsernameField<FieldType extends Enum,
               isOptional: isOptional,
               context: context,
               inputResolver: stringResolver.inputs,
-            )(input?.username);
+            )(displayPhoneNumber(input?.username));
     }
   }
 

packages/authenticator/amplify_authenticator/lib/src/utils/validators.dart

@@ -11,7 +11,13 @@ import 'package:flutter/material.dart';
 */
 final usernameRegex = RegExp(r'^\S+$');
 final emailRegex = RegExp(r'^\S+@\S+$');
-final phoneNumberRegex = RegExp(r'^\+\d+$');
+
+/// Regex for a valid phone number.
+///
+/// The "+" prefix is excluded since validation is performed against the number
+/// without the prefix. That is, if the full number is "+1-123-555-7890", the
+/// "+1" is dropped prior to validation.
+final phoneNumberRegex = RegExp(r'^\d+$');
 final _codeRegex = RegExp(r'^\d{6}$');
 final _uppercase = RegExp(r'[A-Z]');
 final _lowercase = RegExp(r'[a-z]');
@@ -156,8 +162,8 @@ FormFieldValidator<String> validatePhoneNumber({
         InputResolverKey.phoneNumberEmpty,
       );
     }
-    phoneNumber = phoneNumber.trim();
-    if (!phoneNumberRegex.hasMatch(phoneNumber)) {
+    final formattedNumber = phoneNumber.trim();
+    if (!phoneNumberRegex.hasMatch(formattedNumber)) {
       return inputResolver.resolve(context, InputResolverKey.phoneNumberFormat);
     }
     return null;

packages/authenticator/amplify_authenticator/lib/src/widgets/form_fields/confirm_sign_in_form_field.dart

@@ -559,7 +559,7 @@ class _ConfirmSignInPhoneFieldState extends _ConfirmSignInTextFieldState
   @override
   FormFieldValidator<String> get validator {
     return (phoneNumber) {
-      phoneNumber = formatPhoneNumber(phoneNumber);
+      phoneNumber = displayPhoneNumber(phoneNumber);
       return validatePhoneNumber(
         inputResolver: stringResolver.inputs,
         context: context,

packages/authenticator/amplify_authenticator/lib/src/widgets/form_fields/phone_number_field.dart

@@ -86,11 +86,12 @@ class _AuthenticatorPhoneFieldState<FieldType extends Enum>
   @override
   FormFieldValidator<String> get validator {
     return (String? phoneNumber) {
-      phoneNumber = formatPhoneNumber(phoneNumber);
       final validator = widget.validator;
       if (validator != null) {
+        phoneNumber = formatPhoneNumber(phoneNumber);
         return validator(phoneNumber);
       }
+      phoneNumber = displayPhoneNumber(phoneNumber);
       return validatePhoneNumber(
         inputResolver: stringResolver.inputs,
         context: context,

packages/authenticator/amplify_authenticator/lib/src/widgets/form_fields/sign_up_form_field.dart

@@ -738,7 +738,7 @@ class _SignUpPhoneFieldState extends _SignUpTextFieldState
   @override
   FormFieldValidator<String> get validator {
     return (phoneNumber) {
-      phoneNumber = formatPhoneNumber(phoneNumber);
+      phoneNumber = displayPhoneNumber(phoneNumber);
       return validatePhoneNumber(
         inputResolver: stringResolver.inputs,
         context: context,

packages/authenticator/amplify_authenticator/test/sign_up_form_test.dart

@@ -118,6 +118,44 @@ void main() {
         },
       );
 
+      testWidgets(
+        'displays message when submitted with empty phone number if the field is required',
+        (tester) async {
+          await tester.pumpWidget(
+            MockAuthenticatorApp(
+              initialStep: AuthenticatorStep.signUp,
+              signUpForm: SignUpForm.custom(
+                fields: [
+                  SignUpFormField.username(),
+                  SignUpFormField.phoneNumber(required: true),
+                  SignUpFormField.password(),
+                ],
+              ),
+            ),
+          );
+          await tester.pumpAndSettle();
+
+          final signUpPage = SignUpPage(tester: tester);
+
+          await signUpPage.submitSignUp();
+
+          await tester.pumpAndSettle();
+
+          Finder findPhoneFieldError() => find.descendant(
+                of: signUpPage.phoneField,
+                matching: find.text('Phone Number field must not be blank.'),
+              );
+
+          expect(findPhoneFieldError(), findsOneWidget);
+
+          await signUpPage.enterPhoneNumber('1235556789');
+
+          await signUpPage.submitSignUp();
+
+          expect(findPhoneFieldError(), findsNothing);
+        },
+      );
+
       testWidgets(
         'displays message when submitted with invalid birth date',
         (tester) async {