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.

Introduction

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 Learn

  • 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 be needing 2 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. Please 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 React from 'react';
    import logo from './logo.svg';
    import './App.css';
    import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react'
    
    function App() {
      return (
        <div className="App">
          <header>
            <img src={logo} className="App-logo" alt="logo" />
            <h1>We now have Auth!</h1>
          </header>
          <AmplifySignOut />
        </div>
      );
    }
    
    export default withAuthenticator(App);
    

    In this component 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've 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
    Front End Sign In Screen Module 3

    Here, you can try signing up which will then automatically sign you in. When signed in, you should be see a sign out button that will sign the user out and restart the authentication flow.

  • Set up CI/CD of the front end 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 inside AWS. From the navigation sidebar, 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/**/*

    Next, update your front end branch to point to the backend environment you just created. Under the branch name, choose Edit, and then point your master branch to the dev backend you just created. Choose Save.

    Front End React - New Module3 - 1
    Front End React - New Module3 - 2
  • Deploy the changes to the live environment

    Now head back to your local terminal window and deploy the changes to GitHub to kick off a new build in the Amplify console:

    git add .
    git commit -m “added auth”
    git push origin master
    

Conclusion

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

Was this module helpful?

Thank you
Please let us know what you liked.
Close
Sorry to disappoint you
Is something out-of-date, confusing or inaccurate? Please help us improve this tutorial by providing feedback.
Close