Customizing Amplify UI components for ReactJS

Let's open App.tsx, add the AmplifyAuthenticator tag back, start our customization, and import the rest of the authentication components:

1. Import the AmplifySignup, AmplifySignIn, AmplifySignout, and AmplifyForgotPassword components for customization:

   import { AmplifyAuthenticator, AmplifySignUp, AmplifySignIn, AmplifySignOut, AmplifyForgotPassword } from '@aws-amplify/ui-react';

2. The next step is to add the following code blocks inside the AmplifyAuthenticator component. We change the usernameAlias attribute to either username, email, or phone_number. We will use email in our example:

   <AmplifyAuthenticator usernameAlias="email">

3. Add the AmplifySignIn code block here and change the values of the attributes, such as headerText and submitButtonText, as appropriate, as well as changing the formFields elements:

           <AmplifySignIn 
       ...