Getting Started with AWS

Build a Full-Stack React Application

Create a simple web application using AWS Amplify

Module 3: Add Authentication

In this module, you will use the Amplify CLI and libraries to configure and add authentication to your app


The next feature you will be adding is authentication. In this module, you will learn how to authenticate a user with the Amplify CLI and libraries, leveraging Amazon Cognito, a managed user identity service.

You will also learn how to use the Amplify UI component library to scaffold out an entire user authentication flow, allowing users to sign up, sign in, and reset their password with just few lines of code.

What you will accomplish

In this module, you will:
  • Install Amplify libraries
  • Create and deploy an authentication service
  • Configure your React app to include authentication

Key concepts

Amplify libraries – The Amplify libraries allow you to interact with AWS services from a web or mobile application.

Authentication – In software, authentication is the process of verifying and managing the identity of a user using an authentication service or API.

 Time to complete

10 minutes

 Services used


  • We will need two Amplify libraries for our project. The main aws-amplify library contains all of the client-side APIs for interacting with the various AWS services we will be working with and the @aws-amplify/ui-react library contains framework-specific UI components. Install these libraries in the root of the project.

    npm install aws-amplify @aws-amplify/ui-react
  • To create the authentication service, use the Amplify CLI:

    amplify add auth
    ? Do you want to use the default authentication and security configuration? Default configuration
    ? How do you want users to be able to sign in? Username
    ? Do you want to configure advanced settings? No, I am done.
  • Now that the authentication service has been configured locally, we can deploy it by running the Amplify push command:

    amplify push --y
  • The CLI has created and will continue to update a file called aws-exports.js located in the src directory of our project. We will use this file to let the React project know about the different AWS resources that are available in our Amplify project.

    To configure our app with these resources, open src/index.js and add the following code below the last import:

    import { Amplify } from 'aws-amplify';
    import config from './aws-exports';
  • Next, open src/App.js and update with the following code:

    import logo from "./logo.svg";
    import "@aws-amplify/ui-react/styles.css";
    import {
    } from "@aws-amplify/ui-react";
    function App({ signOut }) {
      return (
        <View className="App">
            <Image src={logo} className="App-logo" alt="logo" />
            <Heading level={1}>We now have Auth!</Heading>
          <Button onClick={signOut}>Sign Out</Button>
    export default withAuthenticator(App);

    In this code, we've used the withAuthenticator component. This component will scaffold out an entire user authentication flow allowing users to sign up, sign in, reset their password, and confirm sign-in for multifactor authentication (MFA). We have also added a Sign Out button to log users out.

  • Wait for the resources to finish deploying and then run the app to see the new Authentication flow protecting the app:

    npm start

    Here, you can try signing up, which will send a verification code to your email. Use the verification code to log in to the app. When signed in, you should see a Sign Out button, which signs you out and restarts the authentication flow.

  • Next, we need to configure the Amplify build process to add the backend as part of the continuous deployment workflow. From your terminal window run:

    amplify console
    ? Which site do you want to open? AWS console

    This will open the Amplify console. From the navigation pane, choose App settings > Build settings and modify it to add the backend section (lines 2-7 in the code below) to your amplify.yml. After making the edits, choose Save.

    version: 1
            - '# Execute Amplify CLI with the helper script'
            - amplifyPush --simple
            - yarn install
            - yarn run build
        baseDirectory: build
          - '**/*'
          - node_modules/**/*

    Scroll down to Build image settings and choose Edit. Select the Add package version override dropdown and select Amplify CLI. It should default to the latest version, as shown in the image.

    Next, update your frontend branch to point to the backend environment you just created. Under the branch name, choose Edit, and then point your main branch to the staging backend you just created. Choose Save.

    If you see the message Please set up a service role..., follow the instructions provided before continuing to set up and attach a service role to your app.

  • Now return to your local terminal window and deploy the changes to GitHub to begin a new build in the Amplify console:

    git add .
    git commit -m "added auth"
    git push origin main


You have now added user authentication to your app with just a few lines of code. In the next module, we will add an API to your app.

Was this page helpful?

Add API and Database