Simplify Authentication with AWS Cognito and Amplify
When building a new project, one of the first things to consider is authorization. Regardless of the project field, whether it’s ecommerce, gaming, or logistics, a reliable authentication system is crucial. While you may be lucky enough to have an existing solution to reuse, often you’ll need to choose between building your own implementation or leveraging existing solutions. In this tutorial, we’ll explore how to add authentication to your React apps using AWS Cognito user pools and the Amplify Framework.
What are AWS Cognito User Pools?
AWS Cognito user pools provide a full-featured user directory service, handling user registration, authentication, and account recovery. With a user pool, your users can sign in to your web or mobile app through Amazon Cognito, as well as through social identity providers like Facebook or Amazon, and through SAML identity providers.
The Power of the Amplify Framework
The Amplify Framework is a comprehensive library for building sophisticated, cloud-powered apps on a flexible, scalable, and reliable serverless backend on AWS. Amplify allows you to access an array of cloud services offered by AWS, making it an ideal choice for your project.
Setting Up Amplify CLI
To get started with Amplify, you’ll need an AWS account. If you don’t have one, sign up for the AWS free tier. Next, install the Amplify CLI by running a simple command. After successful installation, configure the CLI by following a series of straightforward steps, including logging in to your AWS account, choosing a username, setting up a new admin user, and generating a secret access key and access key ID.
React App Setup
To bootstrap our React app, we’ll use Create React App and TypeScript. After bootstrapping, initialize and configure the project using Amplify. This will guide you through a series of options to choose the settings that suit your project best.
Adding Authentication to Your App
Next, add the authentication resource to your app by choosing config options for your Cognito pools. Select manual configuration and choose the desired options from the menu. Deploy the new resource changes to the cloud, and then install the necessary dependencies.
A Demo of AWS Cognito and Amplify
Let’s dive into the source code for the sample app, exploring the files one by one while breaking down the logic in each.
SignUpContainer.tsx
This component contains the logic needed to sign up new users. We’ll use Ant Design for UI components and password validator to validate the user password. After successful validation, we send the payload to the Cognito API, which sends out a verification code to the user’s email and creates a new user in the UserPool.
ConfirmEmailContainer.tsx
After successful registration, a confirmation code is sent to the user’s email. To verify it, we add a basic input with a submit button. When the confirmation code is submitted, we make a call to the Cognito API to check its validity, after which we redirect to the login page on successful verification.
LoginContainer.tsx
After successfully confirming the user’s code, we redirect to the login page. We create a form with great validation offered by Ant Design. After the validation passes, we submit the username and password payload using the Auth module included in the AWS SDK, which then makes a call to the Cognito API and returns a success or error payload.
ForgotPasswordContainer.tsx
In case a user has forgotten their password, we need a way for them to recover it. We achieve this by adding logic that takes a username payload and sends out a verification code to the user’s email, which we will then use to reset their password.
PasswordResetContainer.tsx
After the verification code is sent, we redirect to the password reset component. There, the user enters the verification code and a new password, which is sent to the Cognito API. If the verification code matches, the new password is set as the current, which the user can now use to log in.
By leveraging AWS Cognito and Amplify, you can focus on implementing your business logic without worrying about authentication for your app. This powerful combo can be integrated into any architecture pattern, making life easier for developers. Try out the demo app and access the code to get started with simplifying authentication in your React apps.