Amplify-js: Country dial codes is not defined when using signUpConfig and defaultCountryCode

[ricardoribas]

Describe the bug
When you add the sign up config, if you put the default dial code, the application will throw a runtime error due to the countryFields (not defined)

To Reproduce
Steps to reproduce the behavior:
1 - Pass signUpConfig to the withAuthenticator HOC;
2 - Add defaultCountryCode as a object property to the signUpConfig;

Expected behavior
Add default country code to the phone field;

Screenshots

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

[jordanranz]

Hey @ricardoribas,

This seems to be fixed in the latest unstable release of aws-amplify-react-native per this commit:
https://github.com/aws-amplify/amplify-js/pull/3593/commits/ef769386b5f834a698d051b737c5486a2389402b

Could you try installing aws-amplify-react-native@unstable and report back if that fixes your issue?

[ricardoribas]

@jordanranz it solved the problem like a charm 🎉. As i am installing an unstable dependency, it will bring any unexpected errors or it will be just fine for the moment being?

[ricardoribas]

Another thing that i have noticed in the aws-amplify-react-native module: If we want to make the sign in using the phone number the dial code will not be available on runtime as the AuthPiece.js is not taking that into account. I believe that the recover password will have the same issue.

Proposal

Would it make sense to you guys to add a property defaultDialCode to the AuthPiece.js renderUsernameField and all the authentication pieces will inherit this property. That is, signUp, signIn, recoverPassword (and so on...) will consume from this property in order to render the country code in the UI. What do you think?

[jordanranz]

@ricardoribas, good to hear the fix worked! That version should be released fairly soon so it should be ok for the time being.

At first glance I think that is a good proposal. I think we should do a deep dive to understand if we can pass the dial code around in an object with the phone number. I can mark this under our UI component milestone to evaluate this for one of the phases of our release.

[ericclemmons]

Closing as the bug has been fixed a while back.

As for the feature request, https://github.com/aws-amplify/amplify-js/discussions is the best place to have this conversation & vote with the community.