Getting Started

Creating the project and installing dependencies

The first thing we will do is create our new project, install our dependencies, and set up the Authentication provider.

First, let’s go ahead and create our React project using Create React App, and change into the new project’s directory:

create-react-app react-auth

cd react-auth

Next, let’s install React Router and Glamor using either npm or yarn:

yarn add react-router-dom glamor

or

npm i react-router-dom glamor --save

Adding the identity provider

You can use any identity provider you would like, but we will be using Amazon Cognito along with the AWS Amplify JavaScript library and the AWS Amplify CLI to autogenerate the resources for us from the command line.

If not already installed, go ahead and install the AWS Amplify CLI:

npm i -g @aws-amplify/cli

Next configure the CLI with AWS IAM credentials:

amplify configure

Click here for a video walkthrough of how to create credentials and configure the CLI

Now, we’ll create a new project (choose the default for all options, or choose a name for your project if you would like)

amplify init # Here you can choose your text editor of choice & the default for all other options.

This creates a new Amplify project, as well as an aws-exports.js file in the src directory.

Next we’ll add authentication (Amazon Cognito) and deploy the new configuration:

amplify add auth

# choose Y when asked if we would like to use the default configuration amplify push

amplify add auth will enable Amazon Cognito in our project with default settings, including 2 factor authentication on signup with email (we will add TOTP later).

Adding and testing basic user sign up

Let’s go ahead and add basic user sign up form to our app to see if we can go ahead and sign up a user.

We will be working with the Auth class from AWS Amplify to interact with Amazon Cognito. Auth has quite a few different methods allowing everything from user sign up & sign in to changing and retrieving passwords and everything in between.

The main methods that we will be using are the following:

signUp — signs up a new user

signUp(username: string, password: string, attributes?: object)

confirmSignUp — submits 2 factor authentication for new user sign up

confirmSignUp(username: string, authenticationCode: string)

signIn — signs in an existing user

signIn(username: string, password: string)

Now, let’s wire this up!

The first thing we need to do is configure AWS Amplify at the root of our project, src/index.js :

We will begin implementing authorization by allowing users to sign up.

Let’s create a new component called SignUp.js , & place it in the src directory. Here, we will create a basic form that allows users to sign up:

Next, let’s add some state:

We’ve added the items we need to create a user and allow two factor authentication. We will need to also create inputs that will allow us to capture the user information as well as the authorization code. When the user signs up using the signUp method, they will receive an authorization code via email, and will need to input this value into the form and we will then confirm that this code is correct by calling confirmSignUp: