Set default country code in amplify authenticator signup component

Question

Amplify authenticator is really convenient for common authentication flow.

By default, the country code is pre-select to +1, but the apps developed for other countries may want to default to another one.

Is there a way to change the default pre-selected value.

The official document doesn't include anything about this.

score 2 · Answer 1 · answered Nov 14 '20 at 04:44

2

You can pass the dialCode in formFields.

{
  type: 'phone_number',
  dialCode: 27, // or '+27' 
  value: '5555555555',
}

answered Nov 14 '20 at 04:44

Arshad

409
4
7

const formFields: AuthFormFields = { signUp: { phone_number: { dialCode: '+91', }, }, }; accordingt to latest docs – Sasank Mukkamala Oct 24 '22 at 16:12

score 1 · Accepted Answer · answered May 09 '20 at 13:12

1

signUpConfig.defaultCountryCode to the rescure.

After reading the source code of amplify-js. Here the code is.

getDefaultDialCode() {
        return this.props.signUpConfig &&
            this.props.signUpConfig.defaultCountryCode &&
            countryDialCodes.indexOf(
                `+${this.props.signUpConfig.defaultCountryCode}`
            ) !== -1
            ? `+${this.props.signUpConfig.defaultCountryCode}`
            : '+1';
    }

So to use it. The HOC should like

export default withAuthenticator(App, {signUpConfig: {defaultCountryCode: 61}})

answered May 09 '20 at 13:12

ivenxu

639
4
16

However `signUpConfig` no longer exists when using `withAuthenticator` from the new UI package `@aws-amplify/ui-react`, which seems to be the successor of `aws-amplify-react`. The doc for `@aws-amplify/ui-react` does mention [migration](https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#migration) for `withAuthenticator`, but the doc eventually has no info on setting default phone country code... not even sure if there's an option for this in the new UI package. – Shawn Jul 10 '20 at 23:05

Set default country code in amplify authenticator signup component

2 Answers2