Quick and easy approach to authenticate AWS Cognito User Pools in React

---

Introduction

In this tutorial we will be creating a React application and authenticating users from our AWS Cognito User Pools using the AWS Amplify Library.

Project Preview:

This tutorial is one of many in the series of: CREATING A SERVERLESS APPLICATION FROM START TO FINISH.

Before We Begin

The AWS Amplify framework comes with a CLI to deploy your cloud backend to AWS. We will not be using this in our project because we are using Serverless Framework for this purpose.

We will still use the AWS Amplify framework and its React components using the manual setup.

Let's get started.

Create a React Application

npx create-react-app front-end
cd front-end
npm start

Install AWS Amplify

Next, install the Amplify framework to your web application:

npm i aws-amplify aws-amplify-react

aws-amplify provides the following features / APIs:

• Authentication: APIs and building blocks for developers who want to create user authentication experiences.
• Analytics: Easily collect analytics data for your app. Analytics data includes user sessions and other custom events that you want to track in your app.
• API: Provides a simple solution when making HTTP requests. It provides an automatic, lightweight signing process which complies with AWS Signature Version 4.
• GraphQL Client: Interact with your GraphQL server or AWS AppSync API with an easy to use & configure GraphQL client.
• Storage: Provides a simple mechanism for managing user content for your app in public, protected or private storage buckets.
• Push Notifications: Allows you to integrate push notifications in your app with Amazon Pinpoint targeting and campaign management support.
• Interactions: Create conversational bots powered by deep learning technologies..
• PubSub: Provides connectivity with cloud-based message-oriented middleware.
• Internationalization: A lightweight internationalization solution.
• Cache: Provides a generic LRU cache for JavaScript developers to store data with priority and expiration settings.

aws-amplify-react provides React components that we will use in our project.

Configure AWS Amplify

Somewhere in your app, preferably at the root level, configure Amplify with your resources.

Create aws-exports.js in the /src directory:

const awsmobile = {
  Auth: {
    // Amazon Cognito Region
    region: "us-east-1",

    // Amazon Cognito User Pool ID
    userPoolId: "us-east-1_zLk9qjeFJ",

    // Amazon Cognito Web Client ID (26-char alphanumeric string)
    userPoolWebClientId: "5piehrogr2knlj1m3umlaq1b91"
  }
};

export default awsmobile;

You can retrieve your userPoolId and userPoolWebClientId that we created in the previous tutorial, Configure AWS Cognito With Serverless Framework

Import AWS Amplify

Edit App.js and add:

import Amplify from 'aws-amplify';
import awsmobile from './aws-exports';

Amplify.configure(awsmobile);

Wrap App.js using withAuthenticator

Finally, AWS Amplify comes with a Higher Order Component called withAuthenticator.

withAuthenticator automatically detects the authentication state and updates the UI. If the user is signed in, the underlying component (typically your app’s main component) is displayed otherwise signin/signup controls are displayed.

Adding it is easy. Simply wrap your App component!

import { withAuthenticator } from 'aws-amplify-react';

...

export default withAuthenticator(App, true);

Now only signed in users can access your app. If a visitor is not registered to your Cognito User Pool, the registration is handled by AWS Amplify.

The routing for login pages and giving access to your App Component will be managed automatically for you.

Advanced

You can also customize the default UI provided by the AWS Amplify framework.

This is beyond the scope of this tutorial but if you would like me to create a tutorial on this let me know in the comments below.

You can learn more about it here

Conclusion

Do you have a different approach to authenticate AWS Cognito User Pools in React? Let us know in the comments below!