Getting Started with AWS
Build a Full-Stack React Application
Create a simple web application using AWS Amplify

add authentication
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
- 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 added a Sign Out button to log users out.
-
Run the app locally
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.
-
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 ? 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 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.