Cognito - React

withAuthenticator

The simplest way to add authentication flows into your app is to use the withAuthenticator Higher Order Component.

import { withAuthenticator } from 'aws-amplify-react';
export default withAuthenticator(App);

The withAuthenticator HOC wraps the Authenticator component.

Advanced: the Signature is (code)

withAuthenticator(Comp, includeGreetings = false, authenticatorComponents = [], federated = null, theme = null, signUpConfig = {})

You can then wrap it up like that if you want only three fields for the Signup

withAuthenticator(<App />, {
    federated: {
       google_client_id: "yourGoogleClientID"
    },
    signUpConfig: {
      header: "Create a new account for nico",
      hideAllDefaults: true,
      signUpFields: [
        {
          label: "Username",
          key: "username",
          required: true,
          placeholder: "Username",
          displayOrder: 1
        },
        {
          label: "Password",
          key: "password",
          required: true,
          placeholder: "Password",
          type: "password",
          displayOrder: 3
        },
        {
          label: "Email",
          key: "email",
          required: true,
          placeholder: "Email",
          type: "email",
          displayOrder: 2
        }
      ]
    }
  });

Ref: Allow simple customization of sign-up and sign-in attributes in React Authenticator #2160

Using authenticator directly gives you more customization options for your UI.

Authenticator

Using Authenticator gives more customization options for the UI. See doc

Example:

import { Authenticator, Greetings } from 'aws-amplify-react';

const federated = {
    google_client_id: 'yourGoogleClientID',
    facebook_app_id: 'yourFacebookClientID',
    amazon_client_id: 'yourAmazonClientID'
};

<Authenticator hide={[Greetings]} federated={federated}>
	<Main  />
</Authenticator>

Full options:

<Authenticator 
    // Optionally hard-code an initial state
    authState="signIn"
    // Pass in an already authenticated CognitoUser or FederatedUser object
    authData={CognitoUser | 'username'} 
    // Fired when Authentication State changes
    onStateChange={(authState) => console.log(authState)} 
    // An object referencing federation and/or social providers 
    // The federation here means federation with the Cognito Identity Pool Service
    // *** Only supported on React/Web (Not React Native) ***
    // For React Native use the API Auth.federatedSignIn()
    federated={myFederatedConfig}
    // A theme object to override the UI / styling
    theme={myCustomTheme} 
    // Hide specific components within the Authenticator
    hide={ 
        [
            Greetings,
            SignIn,
            ConfirmSignIn,
            RequireNewPassword,
            SignUp,
            ConfirmSignUp,
            VerifyContact,
            ForgotPassword,
            TOTPSetup,
            Loading
        ]
    }
    // or hide all the default components
    hideDefault={true}
    // Pass in an aws-exports configuration
    amplifyConfig={myAWSExports}
    // Pass in a message map for error strings
    errorMessage={myMessageMap}
>
    // Default components can be customized/passed in as child components. 
    // Define them here if you used hideDefault={true}
    <Greetings federated={federated}/>
    <SignIn federated={myFederatedConfig}/>
    <ConfirmSignIn/>
    <RequireNewPassword/>
    <SignUp signUpConfig={signUpConfig}/>
    <ConfirmSignUp/>
    <VerifyContact/>
    <ForgotPassword/>
    <TOTPSetup/>
    <Loading/>
</Authenticator>