title: How to define the default country code in the new AWS Amplify React library on a sign up form?
body: <p>I've upgraded my web application to the new versions of <code>aws-amplify ^4.3.8</code> and <code>@aws-amplify/ui-react (^2.0.0)</code>.</p>
  <p>The previous version of the React components (AmplifyAuthenticator and AmplifySignUp) was used to allow the selection of the default country code in a telephone field in the signup form, e.g.:</p>
  <pre><code>const LoginComponent = () =&gt; {
    return (
      &lt;AmplifyAuthenticator initialAuthState=&quot;signup&quot; usernameAlias=&quot;email&quot;&gt;
        &lt;AmplifySignUp
          slot=&quot;sign-up&quot;
          usernameAlias=&quot;email&quot;
          validationErrors=&quot;signupErrors&quot;
          formFields={[
            {
              type: &quot;name&quot;,
              label: &quot;Full Name *&quot;,
              placeholder: &quot;Enter your full name&quot;,
              inputProps: { required: true, autocomplete: &quot;name&quot; },
            },
            {
              type: &quot;email&quot;,
              inputProps: { required: true, autocomplete: &quot;username&quot; },
            },
            {
              type: &quot;password&quot;,
              inputProps: { required: true, autocomplete: &quot;new-password&quot; },
            },
            {
              type: &quot;phone_number&quot;,
              dialCode: &quot;+55&quot;,
            },
          ]}
        /&gt;
        &lt;AmplifySignIn slot=&quot;sign-in&quot; usernameAlias=&quot;email&quot; /&gt;
      &lt;/AmplifyAuthenticator&gt;
    );
  };
  </code></pre>
  <p>However the new version of the <a href="https://ui.docs.amplify.aws/components/authenticator" rel="nofollow noreferrer">authenticator</a> component does not expose this property anymore without having to define a completely custom form (at least not that I could see).</p>
  <p>Has anyone found a way to define the default country code for the signup form without having to create a completely custom form? This is what I have so far:</p>
  <pre><code>const Login = () =&gt; {
    return (
      &lt;&gt;
        &lt;Authenticator
          signUpAttributes={[&quot;name&quot;, &quot;email&quot;, &quot;phone_number&quot;]}
          // Here is where I would like a &quot;dialCode&quot; attribute if possible...
          loginMechanisms={[&quot;email&quot;]}
          initialState=&quot;signUp&quot;
        &gt;
          {({ signOut, user }) =&gt; (
            &lt;main&gt;
              &lt;h1&gt;Hello {user.username}&lt;/h1&gt;
              &lt;button onClick={signOut}&gt;Sign out&lt;/button&gt;
            &lt;/main&gt;
          )}
        &lt;/Authenticator&gt;
      &lt;/&gt;
    );
  };
  </code></pre>