Adding Authentication with AWS Cognito

Introduction to AWS Cognito

One advantage of AWS Cloud, like other cloud services, is that we’re in charge of the billing. It’s important to understand the pricing of each AWS product we want to use since the products we use determine our bill. As such, we should be diligent about managing our AWS account to ensure that our bill remains within budget. Most AWS products have free monthly tiers, which means we can enjoy low billing each month.

The Cognito, Your User Pool feature has a free tier of 50,000 MAUs for users who sign in directly to Cognito User Pools and 50 MAUs for users federated through SAML 2.0-based identity providers. 50,001-100,000 (after the 50,000 free tier) $0.0055

By the time you exhaust 100,000 users in your application, you’ve built a successful application, and bills will be easy to settle.

Getting started

Once you run the command below, you will be prompted to select the configuration you want in your application. Only select manual if you know what you are doing. Otherwise, select the default configuration.

After clicking the “Run” button, we will follow these steps to reach the desired output:

Step 1: Select the AWS access keys

Once the terminal is loaded, the below option will appear. Select AWS access keys:

Select the authentication method you want to use:
  AWS profile
❯ AWS access keys 

Step 2: Enter credentials

Enter your accessKeyId and secretAccessKey:

Select the authentication method you want to use: AWS access keys
accessKeyId:  ********************
secretAccessKey:  ****************************************

Step 3: Select region

Enter your selected region:

region:  
  us-east-1 
  us-east-2 
  us-west-1 
  us-west-2 
  eu-north-1 
❯ eu-west-1 
  eu-west-2 
(Move up and down to reveal more choices)

Step 4: Select editor

Select Visual Studio Code as a default editor:

Choose your default editor: (Use arrow keys)
❯ Visual Studio Code 
  Android Studio 
  Xcode (macOS only) 
  Atom Editor 
  Sublime Text 
  IntelliJ IDEA 
  Vim (via Terminal, macOS only) 
(Move up and down to reveal more choices)

Step 5: Select the type of the app

Select Javascript as the type of app to be built:

Choose the type of app that you're building (Use arrow keys)
  android 
  flutter 
  ios 
❯ javascript

Step 6: Select framework

Click on vue for the Javascript framework:

What javascript framework are you using (Use arrow keys)
  angular 
  ember 
  ionic 
  react 
  react-native 
❯ vue 
  none 

Step 7: Enter the source directory path

We have set the source directory path as educative-source. You can choose any path.

Source Directory Path:  educative-source

Step 8: Enter on distribution directory path

This will assign the default value to the distribution directory path.

Distribution Directory Path: dist

Step 9: Enter the build command

Build Command:  npm run-script build

Step 10: Enter the Start command

Start Command: npm run-script serve

Step 11: Modify the backend

Press Y on the following question:

Do you plan on modifying this backend? (Y/n) Y

Step 12: Run the amplify add auth command

amplify add auth

Step 13: Select Default configuration

 Do you want to use the default authentication and security configuration? (Use arrow keys)
> Default configuration
  Default configuration with Social Provider (Federation)
  Manual configuration

Step 14: Log in to the application

Next, we will select how we want our users to log in to the application. In this case, we will choose “Email.” You can choose whichever preference you want.

 How do you want users to be able to sign in?
  Username
> Email
  Phone Number

We will not configure any advance settings and leave everything to the default settings.

Step 15: Advance settings

Select the No, I am done. option:

 Do you want to configure advanced settings? (Use arrow keys)
> No, I am done.
  Yes, I want to make some additional changes.

Step 16: Create AWS Cognito

Run the following command to complete this step and create AWS Cognito in your AWS account.

amplify push

Once the deployment is complete and you see the following, you can log in to your AWS account to check if your AWS Cognito has deployed. Please ensure that you are in the correct region as configured in your environment.

root@educative:/educative-course/amplify-module# amplify push
✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev
    
┌──────────┬─────────────────┬───────────┬───────────────────┐
│ Category │ Resource name   │ Operation │ Provider plugin   │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Auth     │ saifxyzb5618b98 │ Create    │ awscloudformation │
└──────────┴─────────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? (Y/n) y