Adding authentication to React App using AWS Amplify and Cognito

AWS Amplify enables front-end developers to build secure, scalable full stack applications, powered by AWS while Amazon Cognito lets you add user sign-up, sign-in, and access control to your web and mobile apps quickly and easily. In this article, we will be using AWS amplify to add authentication to our React application.

Prerequisite

In order to follow along, you must have

• npm installed
• AWS Account
• AWS profile set up If you don't have any of these i suggest you to set it up since i will not be going to talk about any of those in this article.

Creating React application

Now, to get started, we first have to create a React Application. we'll use CRA to make things easier. If you've CRA installed you can simply use

create-react-app my-auth-app

If you don't have CRA installed and don't want to do so then simply use

npx create-react-app my-auth-app

Installing and initializing Amplify

Now, we need to install aws-amplify. We also be installing pre-built React UI for authentication so that we don't have to code the SignIn/SignUp UI by ourselves. Once installed, we can then initialize amplify.

cd my-auth-app
npm i aws-amplify @aws-amplify/ui-react
amplify init

So, we just navigated into our directory and hit install command for aws-amplify and ui-react. Then, we initialized Amplify. Once initialized, you'll be prompted with few questions:

1. Enter the name for the project (my-auth-app)
2. Enter name for the environment
3. Choose your default editor
4. Choose the type of app you're building
5. What javascript framework are you using
6. Source directory Path (src)
7. Distribution directory Path (build)
8. Build Command
9. Start Command
10. Do you want to use an aws-profile (Y/n)

You can just hit enter for all other questions except 2 and 10. For the environment name, you can enter either 'test' or 'dev'. i prefer 'dev'.
For question 10, once hit enter, your aws-profiles will be prompted, you have to select the profile on which you want to deploy the cognito user-pool.

Adding authentication

It's time we finally add authentication to our project. To do so, use

amplify add auth

Now, again you'll be prompted with set of questions.

1. Do you want to use the default authentication and security configuration?
2. How do you want users to be able to sign in?
3. Do you want to configure advanced settings?

Default options are good enough for our simple app, so just hit enter for all the above questions. Authentication has been. Now, to set-up cognito userpool in the cloud, we just have to push it. To do so use

amplify push

You'll be prompted with "Are You sure" question, hit enter as we DO want to deploy the userpool in the cloud. It will start the deployment process and deploy the cloudformation stack. Might take 4-5 minutes. Once done, we can set up our react application to use Cognito and add Authentication UI from react-ui package.
Now, we need to configure our react application. To do so, open the project in any code-editor. I'll be using vs-code in my case however feel free to use any text editor, whichever suits you best.
Edit Your src/index.js file to

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

import config from "./aws-exports";
import Amplify from "aws-amplify";
Amplify.configure(config);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Now, edit your src/App.js file to

import React from "react";
import { withAuthenticator, AmplifySignOut } from "@aws-amplify/ui-react";

const App = () => (
  <div>
    <AmplifySignOut />
    My App
  </div>
);

export default withAuthenticator(App);

Save the project and run te app using

npm start

If there's not any issue, You'll see the following screen

You can try out by creating a user. When creating a new user, you'll be provided with a verification code to the email you enter in order to complete the verification process. Once verified you can Sign In by providing the credentials.

Thanks for reading. You can find the complete project on GitHub