AWS Cognito User Management Tutorial

1 wO DFS2QONivG8GHnlRRCA

In this blog, I will walk you through What AWS Cognito Service is and how we can use AWS Cognito user management to manage users. We will even build a sample angular Application and try to authenticate using AWS Cognito.

What is AWS Cognito?

AWS Cognito is an AWS Directory service provided by amazon for easy and faster web and mobile application development. This Service helps you to manage authentication, authorization and user management function so that you can focus on your application management rather than managing user and authentication so Cognito service offers sign in, sign up using your own user pool and provide easy integration with a social media identity provider like Google, Facebook, Amazon Apple. You can even integrate with your organization identity provider using SAML 2.0.

Why Should we use Cognito?

Cognito Offers SignIn and SignUp to your application as a platform service so that you can focus more on building your application features rather than spending time on extending up your infrastructure and developing user management functions.

So Cognito Provide three S3 Benefits. Here S3 means Simple, Secure and Scalable. It Provides a low-cost directory service so you have to pay only for what you are going to use. It follows Pay As You Go Model. There is no upfront cost. Amazon Cognito works even with external identity providers that support SAML or OpenID Connect. It Provides a vast social media platform that you can integrate with your application.

You can also easily integrate with other AWS resources and it even provides encryption and multi-factor authentication support.

AWS Cognito User Management Using Angular

STEP 1: Create a sample authentication project(Sign in, Sign Up) in Angular. Below is the UI Which I Have Created.

AWS Cognito User Management

STEP 2: Install AWS Amplify(AWS Amplify is a utility provided by Amazon to interact with backend Services. So It’s a CLI application that can be used to configure your mobile application or web application. It works as a bridge to configure and provision backend resources for you as well as it provides a utility method through which javascript, Android Application or IOS Application can talk to AWS Services.)

sudo npm install -g @aws-amplify/cli 

STEP 3: Initialize AWS Amplify Service. Specify Region,username,accessKeyId,secretAccessKey.

amplify init
AWS Cognito User Management

STEP 4: After AWS Amplify Service get Initialized, we need to add an authentication module that allows AWS Amplify to configure the user pool or anything related to the Cognito service.

amplify add auth

For keeping simple I have mostly selected default value. The values you select while setup auth can’t be modified on AWS Console so make sure you select the appropriate values. Only a few can be configured from the AWS console. If you misconfigured something then you need to delete the user pool and then you have to create again. The changes you made are local and still not present on the user pool.

AWS Cognito User Management

STEP 5: Since all information is stored locally so we need to Push the above information to the backend service. The accessKeyId and secretKey which we added before is used to push this into backend service.

amplify push
AWS Cognito User Management
AWS Cognito User Management

You can see in User Pool that “himayurfrontendb055e95a_userpool_b05” is created.

You have an option to create from the console by clicking on Create a User Pool and specify the same details that you specified in Amplify CLI. If you don’t want to configure using access Key ID and access secret key then you can simply create a user pool from the AWS Cognito console.

STEP 6: In app.modulte.ts Insert below code. You will find userPoolId in General Setting and you will find userPoolWebClientId in App Client

import Amplify,{Auth} from 'aws-amplify';

Amplify.configure({
  Auth: {
    mandatorySignIn: true,
    region: 'us-east-2',
    userPoolId: 'YOUR_USER_POOL_ID',
    userPoolWebClientId: 'YOUR_WEB_CLIENT_ID',
    authenticationFlowType: 'USER_PASSWORD_AUTH'
  }
})

STEP 7: In polyfill.ts add the below line to make it compatible with the latest angular version

(window as any).global=window;

STEP 8: In Login Component Validate authentication using the below function.

import {Auth } from 'aws-amplify';

async loginViaCognito() {
    try {
      var user = await Auth.signIn(this.email.toString(), this.password.toString());
      var token = user.signInUserSession;
      if (token != null) {
        this.router.navigate(['home']);
        alert("LoggedIn successfully");
      }
    }
    catch (e) {
      alert("Authentication Failed");
    }
  }

STEP 9: In Signup, Component Add User using the below function

import {Auth } from 'aws-amplify';

signupViaCoginto() {
    try {
      let user = Auth.signUp({
        username: this.fullName.value,
        password: this.password.value,
        attributes: {
          email: this.email.value
        }
      })
      this.router.navigate(['/login'])
      alert("Signup Completed");
    }
    catch(e){
      alert("Something Went Wrong!");
    }
  }

When you try to signup then you will Register successfully and in the user pool, you will be able to see the user details.

Screenshot 2021 08 29 at 8.22.03 PM

I have pushed code on the master branch Github repo. For code please download from the below Link.

https://gitlab.com/durgeshkashyap63/cognitoproject/-/tree/master

Screenshot 2021 08 29 at 8.40.19 PM
AWS Cognito User Management

Hope you like our AWS Cognito User Management Blog. If you face any issues please let us know in the comment section.

For such a blog, please subscribe to our blog.

Happy Coding!

Read More: Deploys a code to Production | Frontend | Backend, Digital Ocean VS AWS | Pricing

Be the first to comment on "AWS Cognito User Management Tutorial"

Leave a comment

Your email address will not be published.


*