Finding credible ways to rapidly build a full-stack application that securely stores user information is important for companies that are expanding their customer base. The integration with providers such as Apple, Facebook, Google, Amazon allows for simple user authentication through their platforms.
Amplify is a service that makes it easy for front-end web and mobile developers to build full-stack applications quickly and easily on AWS. Amplify is great for user authentication as well as hosting websites. This article will touch on the deployment with Amplify, and mainly discuss authentication.
In this article we will be talking about using Amplify and Cognito for authentication and hosting with a React Application. We used a MacBook Pro for this tutorial.
In AWS Cognito there are two different options, there are user pools (which we will be using) and identity pools. User pools are used for authentication, and the Identify pools are used for authorization. Amazon Cognito provides authentication, authorization, as well as user management for both web and mobile applications. User pools are most often used when designing the sign up and sign in pages for your application, as well as being able to use a custom authentication flow. Identity pools make it easy to give your users access to AWS resources, such as S3 or DynamoDB. Identity pools also allow for generating temporary AWS credentials for unauthenticated users.
Let’s set up our Amplify command line interface! We will be referring to the command line interface as CLI for the rest of this article. To install the CLI use the command:
npm install -g @aws-amplify/cli
Now that npm has installed the amplify utility, you can run:
This will walk you through the configuration of amplify. The amplify utility does a good job of explaining the straightforward process. After running amplify configure it will prompt you to specify the AWS region you will be using, we are using us-east-1. It will then prompt you to specify the username of the IAM user, after entering the username and pressing enter you will be taken to the IAM dashboard with the username prepopulated. For the access type, we are using Programmatic access in order to use the CLI. You can now click Next: Permissions this has already been set up and you can click on Next: Review. The review page should look something like this:
You can now click on Create User, after clicking this you will see your user with an access key id and a secret access key. THESE ARE IMPORTANT. It is the only time these credentials will be displayed so make sure to download the csv, or add them to your password management service. Next copy the access key ID to your clipboard. The CLI will be prompting you to Enter the access key of the newly created user, paste the access key id we copied and hit enter. You will then be prompted for the secret access key, after copying and pasting the secret access key, hit enter. You will see “This would update/create the AWS Profile in your local machine” you will then have to enter the profile name, this can be anything, we will be using this later. The profile that was just created will be saved in your AWS profile config which is located in ~/. aws/credentials with the secret access key and the access key id.
After successful installation you can now run amplify init to create an amplify backend for your project. See Figure 2 and Figure 3 for details. You will be prompted to enter a name for the project, and the CLI will display your project information, ensure this is correct and press Y (Yes). It will then prompt you to select the authentication method you want to use, here we will select AWS Profile. You will then be asked what profile to use, here we will use the profile name that we entered previously.
Side note, in order to use a specific AWS Profile with a project or to reconnect a project with a profile you can run export AWS_PROFILE=default, where default is the profile you wish to use.
Running the command
will deploy your project to AWS Amplify, if you login to AWS and open the AWS Amplify console, you will now see this project.
Next, we can run:
amplify add auth
Here we usually go with the default settings. See Figure 4 and Figure 5 for what this path looks like.
Since we are only using a user pool and no social providers, we are selecting the default configuration. We then are selecting that users will sign in with a username, you can pick whatever you’d like here, this is just our personal preference. Figure 6 through Figure 9 show other options that you could select if you wanted to use something other than the default configuration.
Once these changes have been made, we can now run the command
And we will have set up our Cognito user pool!
There are plenty of resources, where you can find source code for login and sign-up pages, so we won’t cover that in this article. Here is the official documentation from AWS to use the sign-up and sign-in user interface (UI).
To deploy an application with AWS Amplify you first need to run the command
amplify add hosting for this example we will choose Manual deployment.
You can now run the command in order to deploy your application.
This command will both build and publish the frontend and backend of your project. When we mention backend in this context it is not the same as having a decoupled application. The Amplify backend is solely responsible for handing, in our case, authentication and hosting. In my case we have a frontend project that connects to our middleware through an API, the amplify backend is solely for authentication and hosting.
In conclusion, we have found that using Amplify and Cognito together is a very efficient way of implementing authentication into your application as well as deploying your frontend application. While this tutorial and AWS try to make this process as easy as possible, if you still need help with your application authentication, the development team at Scalesology will be happy to help! We handle authentication for both the applications we develop for clients from scratch, as well as existing code bases where we take over development or augment a client’s development team. Contact us to learn more!