I recently came across a great library from the peeps over at AWS: Amplify. This is a great approach if you are just getting started with AWS or if you don’t want to deal with all the boilerplate code required to deploy an application in the cloud. I’m going to walk through how to get a React application up and running with user authentication (via AWS Cognito) as fast as possible.

This will include user sign up, sign in, logout, password reset, and email verification! All by writing very little code.

Prerequisites

Before we get started, make sure you have an AWS account. If not, you can quickly create one here.

Note: As long as you remove all resources afterwards, you should not incur any charges on the AWS Free Tier.

You will also need the Amplify CLI to setup your AWS resources.

$ npm install -g @aws-amplify/cli

$ amplify configure

The configure command will walk you through a series of steps to set up an IAM user with the permissions necessary set up resources on your behalf.


Now, let’s start by getting a React project up and running:

$ npx create-react-app my-app

$ cd my-app

You will only be needing a few packages to get you app up and running, so let’s go ahead and install those:

$ npm install --save aws-amplify aws-amplify-react
# or
$ yarn add aws-amplify aws-amplify-react

Now that all of your font end files are created, you will need to tell the Amplify CLI about your project:

$ amplify init

For now, we want to accept all default settings. Once the initialization is complete, we can add an authentication backend.

$ amplify add auth
# followed by
$ aplify push

You can always check the status of your created resources by runnning amplify status. Additionally, there are lots of other add-ins that come with Amplify. Running amplify add <category> is all you need to know.

Here comes the easiest part: add the following to the top of you ./src/App.js file:

import Amplify from 'aws-amplify';
import awsmobile from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react';
Amplify.configure(awsmobile);

and at the bottom, simply wrap your App component in the withAuthenticator HOC.

export default withAuthenticator(App, true);

and that’s about it! You can now start your project

$ npm start

$ yarn start

to see a fully managed authentication system, courtesy of AWS! Once you are ready to remove resources, simply run amplify auth remove and amplify push to delete your resources.

That’s all I have for now. Keep hacking!