AWS Amplify Authentication with React

September 03, 2022

In this article we will take a look at the steps to configure AWS Amplify and setup User Authentication

Creating and managing users for your application can be difficult and time consuming to get right. With AWS Amplify you can get started easily. During the initial development of Goshimmy.me we started with a simple user management implementation. Over time, what we noticed was that our implementation had become complex and hard to scale. As more users signed up it was clear that our applicationn required a feature rich solution.

So earlier this year we started to research solutions to help us with user sign-up, Multi-Factor Authenticationn (MFA) and support for React. AWS Amplify was at the top of the list. Not only can we manage users but also leverage an entire set of backend capabilities like:

AWS Authentication: Leverages AWS Cognito under the hood as the main authentication provider.
AWS Amplify DataStore: An on-device storage engine that automatically synchronizes data between your mobile and web apps and your database in the AWS cloud to help you build real-time and offline apps faster.
AWS Analytics: The Analytics category enables you to collect analytics data for your App

The reason we chose AWS Amplify was to help us focus on development efforts of the core platform and not identity management capabilities.

Pre-requisite is to install AWS Amplify

My project is created with React and is hosted with AWS Amplify, so below are the steps for Javascript.

npm install -g @aws-amplify/cli

Next, we have to initialize a new Amplify project by using the amplify init command:

amplify init

If you have an existing AWS Amplify project and want to pull your Amplify project use the following command:

amplify pull --appId (your app id) --envName (env name)

Then start your project

yarn start

Add authentication

To add authentication to your app, run the following command:

amplify add auth

This will walk you through a set of questions, for example:

? Do you want to use the default authentication 
and security configuration? Default configuration
Warning: you will not be able to edit these selections. 
? How do you want users to be able to sign in? Username
? Do you want to configure advanced settings? No, I am done.

To deploy the service, run the push command:

amplify push

That’s it! In the background, AWS Amplify is configuring Cognito, user pools, etc. In addition, having UI for users that hooks into the autentication service we just created would be pretty neat. Well, no worries AWS Amplify has you covered.

Add the Login UI

The AWS Amplify UI authentication component provides a complete authentication flow for your application with the help of the configuration you specify in aws-export.js. Below is the AWS UI component that we created for goshimmy.me with a link to the AWS UI component for sign-up!

Next steps

With the login and sign-up covered we can now focus on the overall user experience, optimizing the critical flows for the site and maximizing conversions for our campaigns.