Flutter: Custom Phone Number Form Field accepts empty value still after setting required argument as true

[kavienanj]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

Flutter

Which UI component?

Authenticator

How is your app built?

Flutter

What browsers are you seeing the problem on?

iOS (Flutter), Android (Flutter)

Which region are you seeing the problem in?

No response

Please describe your bug.

When adding the phone number field to a form (eg: SignUpForm) with the required argument set as true, the validator function still treats the field as optional. Which allows the form to be submitted with an empty phone number. The field hint seems to work perfectly. So I assume the required argument is not being passed into the validatePhoneNumber(bool isOptional, ... ) function properly. This assumption is because when I copied the default validatePhoneNumber from the library, and set isOptional argument as `true'. Then I passed this rewritten validator function to the form field, it worked.

What's the expected behaviour?

When adding the phone number field to a form (eg: SignUpForm) with the required argument set as true, if a user trys to submit the form leaving the phone number field empty, the validator should return the 'Phone Number field must not be blank' error text and stop the user from submitting.

Help us reproduce the bug!

In main.dart file

class MyApp extends StatelessWidget {
....
    return Authenticator(
      dialCodeOptions: const DialCodeOptions(defaultDialCode: DialCode.im),
      signUpForm: SignUpForm.custom(
        fields: [
          SignUpFormField.username(),
          SignUpFormField.phoneNumber(required: true),
          SignUpFormField.password(),
          SignUpFormField.passwordConfirmation(),
        ],
      ),
      child: MaterialApp.router( ... )
}

the AWSAmplifyService.configure() runs the necessary Amplify/Cognito configurations. AppRouterConfig.router is GoRouter Configurations.
Run the Flutter app and Try submitting the SignUpForm. It Should submit with empty phone number.
Now I copied the validatePhoneNumber function and rewrote it as follows,

FormFieldValidator<String> validatePhoneNumber(BuildContext context, { required bool isOptional }) {
  const inputResolver = InputResolver();
  final phoneNumberRegex = RegExp(r'^\+\d+$');
  return (String? phoneNumber) {
    if (phoneNumber == null || phoneNumber.isEmpty) {
      if (isOptional) {
        return null;
      }
      return inputResolver.resolve(
        context,
        InputResolverKey.phoneNumberEmpty,
      );
    }
    phoneNumber = phoneNumber.trim();
    if (!phoneNumberRegex.hasMatch(phoneNumber)) {
      return inputResolver.resolve(context, InputResolverKey.phoneNumberFormat);
    }
    return null;
  };
}

And pass the new rewritten validator as an argument for SignUpFormField.phoneNumber

...
SignUpFormField.phoneNumber(
  required: true,
  validator: validatePhoneNumber(
    context,
    isOptional: false,
  ),
),
...

Now Try submitting the SignUpForm. It should show an error when user trys to submit with empty phone number.

Code Snippet

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await AWSAmplifyService.configure();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Authenticator(
      dialCodeOptions: const DialCodeOptions(defaultDialCode: DialCode.im),
      signUpForm: SignUpForm.custom(
        fields: [
          SignUpFormField.username(),
          SignUpFormField.phoneNumber(required: true),
          SignUpFormField.password(),
          SignUpFormField.passwordConfirmation(),
        ],
      ),
      child: MaterialApp.router(
        title: 'MyApp',
        themeMode: ThemeMode.light,
        theme: AppThemeData.light,
        builder: Authenticator.builder(),
        routerConfig: AppRouterConfig.router,
      ),
    );
  }
}

Console log output

No response

Additional information and screenshots

[Jordan-Nelson]

@kavienanj - Thanks for opening this and providing these details. We will attempt to reproduce this.

[Jordan-Nelson]

I was able to reproduce this. I will mark this as a bug and we will look into a fix.

[Jordan-Nelson]

A fix for this was just merged. A new version should be released with this fix in the next week or two. I will let you know when that happens.

[kavienanj]

Cool, I saw the merged PR. I have a doubt. Lets say a user selects +94 from the country code, and still inputs the country code again in the input field. How does the validation performs after this version? will it be the same or different?

[Jordan-Nelson]

@kavienanj - I think you are correct. This would result in a change in behavior as the number would still be considered valid. I will revert the fix and we will look into an alternative solution for this.

[kavienanj]

Please, can anyone make an update on the progress of this fix?

[Jordan-Nelson]

Hi @kavienanj - Apologies for the delay. This is in our backlog our issues to resolve. I do not have an estimate for when it will be addressed.

[Jordan-Nelson]

This is still in our backlog of issues to address. I wanted to callout one possible workaround for anyone facing this issue. It should be possible to create a custom form field for phone number. I recognize that this is not ideal, but wanted to note it for anyone that is blocked by this.

We will post here when we have updates on a fix.

[kavienanj]

Where can we find the specific guide on how to create custom form fields?

[Jordan-Nelson]

There are two options:

1. Use SignupFormField.custom(): This will allow you to create a new form field for any user attribute. Typically this would be used for custom user attributes but I believe you could use this for a phone number input as well. One note about this is that it creates a standard single value form field. The country code and phone number will have to be input as one value. See the docs: https://ui.docs.amplify.aws/flutter/connected-components/authenticator/customization#sign-up-fields
2. Build a custom sign up form: You can build a custom form for any step in the authenticator. We export the prebuilt form field widgets so you can use some of the widgets we provide along side your own widgets. This will give you more flexibility in the implementation but will be a bit more work. See the docs here: https://ui.docs.amplify.aws/flutter/connected-components/authenticator/customization#full-ui-customization