To add authentication, run the following command:

amplify add auth

Command will ask you if you want to use the default authentication and security configuration, and you should answer Yes.

Once the command finish, run the amplify push command to push the changes to AWS. You can check AWS Cognito from AWS Web Console to see what the command created for you.

Next thing you need to do is to configure your React app to be aware and communicate with your Amplify project. To do so, change the src/index.js file of your react app to include the following lines:

import Amplify from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)

The ./aws-exports file is auto-generated by Amplify.

To add authentication, go to the src/App.js file and import the withAuthenticator Higher Order Component (HOC) from aws-amplify-react, by adding the following line:

import { withAuthenticator } from 'aws-amplify-react'

Next, wrap your default export (the App component) with the withAuthenticator HOC, by modifing the line to look similar to this:

export default withAuthenticator(App, { includeGreetings: true })

That's it. Run your React app to test your auth flow.

If you want to access the user data, you can do the following:

import { Auth } from 'aws-amplify'

function App() {
  const [current, setCurrent] = useState(0);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  const [username, setUsername] = useState('');

  useEffect(async () => {
    try {
      setError(null);
      setLoading(true);

      const user = await Auth.currentAuthenticatedUser({
        bypassCache: false  // Optional, By default is false. If set to true, this call will send a request to Cognito to get the latest user data
      })
      setUsername(user.username);
      console.log(`Load additional settings for user: ${user.username}`);
      // Do something else
    }
    catch (e) {
      setError(e);
    }
    finally {
      setLoading(false);
    }
  }, []);

  return ( /* Code for your component */ )
}

Don't forget to import useEffect from React on top of your file:

import React, { useState, useEffect } from 'react';