Create a React app by using AWS Amplify and add authentication with Amazon Cognito
Created by Rishi Singla (AWS)
Summary
This pattern demonstrates how to use AWS Amplify to create a React-based app and how to add authentication to the frontend by using Amazon Cognito. AWS Amplify consists of a set of tools (open source framework, visual development environment, console) and services (web app and static website hosting) to accelerate the development of mobile and web apps on AWS.
Prerequisites and limitations
Prerequisites
Product versions
Node.js version 10.x or later (to verify your version, run
node -v
in a terminal window)npm version 6.x or later (to verify your version, run
npm -v
in a terminal window)
Architecture
Target technology stack
AWS Amplify
Amazon Cognito
Tools
Amplify Libraries
(open source client libraries) Amplify Studio
(visual interface)
Epics
Task | Description | Skills required |
---|---|---|
Install the Amplify CLI. | The Amplify CLI is a unified toolchain for creating AWS Cloud services for your React app. To install the Amplify CLI, run:
npm will notify you if a new major version is available. If so, use the following command to upgrade your version of npm:
where 9.8.0 refers to the version you want to install. | App developer |
Task | Description | Skills required |
---|---|---|
Create a React app. | To create a new React app, use the command:
where When the app has been created successfully, you will see the message:
A directory with various subfolders will be created for the React app. | App developer |
Launch the app on your local machine. | Go to the directory
This launches the React app on your local machine. | App developer |
Task | Description | Skills required |
---|---|---|
Configure Amplify to connect to your AWS account. | Configure Amplify by running the command:
The Amplify CLI asks you to follow these steps to set up access to your AWS account:
WarningThis scenario requires IAM users with programmatic access and long-term credentials, which present a security risk. To help mitigate this risk, we recommend that you provide these users with only the permissions they require to perform the task and that you remove these users when they are no longer needed. Access keys can be updated if necessary. For more information, see Updating access keys in the IAM User Guide. These steps appear in the terminal as follows.
For more information about these steps, see the documentation | General AWS, App developer |
Task | Description | Skills required |
---|---|---|
Initialize Amplify. |
| App developer, General AWS |
Task | Description | Skills required |
---|---|---|
Adding authentication. | You can use the Amplify provides a backend authentication service with Amazon Cognito, frontend libraries, and a drop-in Authenticator UI component. Features include user sign-up, user sign-in, multi-factor authentication, user sign-out, and passwordless sign-in. You can also authenticate users by integrating with federated identity providers such as Amazon, Google, and Facebook. The Amplify authentication category integrates seamlessly with other Amplify categories such as API, analytics, and storage, so you can define authorization rules for authenticated and unauthenticated users.
| App developer, General AWS |
Task | Description | Skills required |
---|---|---|
Change the App.js file. | In the
| App developer |
Import React packages. | The
| App developer |
Task | Description | Skills required |
---|---|---|
Launch the app. | Launch the React app on your local machine:
| App developer, General AWS |
Check authentication. | Check whether the app prompts for authentication parameters. (In our example, we’ve configured email as the sign-in method.) The frontend UI should prompt you for sign-in credentials and provide an option to create an account. You can also configure the Amplify build process to add the backend as part of a continuous deployment workflow. However, this pattern doesn’t cover that option. | App developer, General AWS |
Related resources
Getting started
(npm documentation) Create a standalone AWS account (AWS Account Management documentation)