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

Overview

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

Implementation

  • Install the Amplify libraries

    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
  • Create the authentication service

    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.
  • Deploy the authentication service

    Now that the authentication service has been configured locally, we can deploy it by running the Amplify push command:

    amplify push --y
  • Configure the React project with Amplify resources

    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';
    Amplify.configure(config);
    
  • Add the authentication flow in App.js

    Next, open src/App.js and update with the following code:

    import logo from "./logo.svg";
    import "@aws-amplify/ui-react/styles.css";
    import {
      withAuthenticator,
      Button,
      Heading,
      Image,
      View,
      Card,
    } from "@aws-amplify/ui-react";
    
    function App({ signOut }) {
      return (
        <View className="App">
          <Card>
            <Image src={logo} className="App-logo" alt="logo" />
            <Heading level={1}>We now have Auth!</Heading>
          </Card>
          <Button onClick={signOut}>Sign Out</Button>
        </View>
      );
    }
    
    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 used the AmplifySignOut component which will render a Sign Out button.

  • Run the app locally

    Next, 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.

  • Set up CI/CD of the frontend and backend

    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

    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
    backend:
      phases:
        build:
          commands:
            - '# Execute Amplify CLI with the helper script'
            - amplifyPush --simple
    frontend:
      phases:
        preBuild:
          commands:
            - yarn install
        build:
          commands:
            - yarn run build
      artifacts:
        baseDirectory: build
        files:
          - '**/*'
      cache:
        paths:
          - 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.

  • Deploy the changes to the live environment

    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
    

Conclusion

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