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
npm install -g @aws-amplify/cli
Next, we have to initialize a new Amplify project by using the amplify init command:
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
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:
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!
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.