ChinguTalkBot v0.1.0: Setting up AWS Cognito with CDK for User Authentication

Introduction

ChinguTalkBot is an AI communication assistant designed to enhance online interactions. This project integrates cutting-edge technologies and frameworks to create a seamless experience for users. It serves as a potent tool for businesses, communities, and individuals to engage effectively in real-time communication.

Technical Overview

ChinguTalkBot leverages React, AWS Amplify, and AWS Cognito to establish a secure and scalable platform. The project encapsulates functionalities such as user authentication, real-time messaging, and intuitive user interfaces.

Key Features:

1. User Authentication: Utilizes AWS Cognito for secure user sign-up, sign-in, and management.
2. Real-Time Communication: Employs AWS Amplify and GraphQL subscriptions for instant message exchange.
3. Responsive Design: Ensures a consistent and engaging user experience across various devices and screen sizes.

Development and Deployment

The development of ChinguTalkBot followed a modular and incremental approach, facilitating the integration of additional features and services. The deployment utilizes the AWS Cloud Development Kit (CDK), streamlining the process of launching the application on AWS infrastructure.

Environment Setup

To create CDK, use the following code:

mkdir cdk
cd cdk
npm install -g aws-cdk
cdk init app --language typescript

Create constructs directory

The directory is structured to maintain modular constructs, making the infrastructure code more manageable and scalable. I created constructs directory in the lib folder and added auth.ts file.

Key Componenets:

• UserPool: Defines the user pool with specific password policies and sign-in options, facilitating self-signup and ensuring security standards.
• UserPoolClient: Creates a client application within the user pool to manage user interactions and session handling.

Outputs:

• UserPoolId: The identifier for the created user pool.
• UserPoolClientId: The identifier for the user pool client application.

import { CfnOutput, Duration } from "aws-cdk-lib";
import { UserPool, UserPoolClient } from "aws-cdk-lib/aws-cognito";
import { Construct } from "constructs";

// Define interface for any additional properties needed.
export interface AuthProps {}

// Define the Auth class that extends the CDK Construct class.
export class Auth extends Construct {
// Declare read-only properties for later access to the user pool and client.
readonly userPool: UserPool;
readonly client: UserPoolClient;

// Constructor for the Auth construct.
constructor(scope: Construct, id: string, props?: AuthProps) {
// Call the super class constructor.
super(scope, id);

// Create a new Cognito user pool with specified password policies and sign-in options.
const userPool = new UserPool(this, "UserPool", {
    passwordPolicy: {
        requireUppercase: true,
        requireSymbols: true,
        requireDigits: true,
        minLength: 8,
    },
    selfSignUpEnabled: true,
    signInAliases: {
        username: false,
        email: true,
    },
});

// Create a user pool client for the above user pool with specific token validity and authentication flow settings.
const client = userPool.addClient(`Client`, {
    idTokenValidity: Duration.days(1),
    authFlows: {
        userPassword: true,
        userSrp: true,
    },
});

// Assign the user pool and client to the class properties for external access.
this.client = client;
this.userPool = userPool;

// Create CloudFormation outputs for the user pool and client IDs for easy access after deployment.
new CfnOutput(this, "UserPoolId", { value: userPool.userPoolId });
new CfnOutput(this, "UserPoolClientId", { value: client.userPoolClientId });
}
}

Integration into CDK Stack

The Auth construct is integrated into the main CDK stack, ChinguTalkStack, to provision the necessary AWS Cognito resources:

const auth = new Auth(this, "Auth");

CDK Deployment

After defining our infrastructure as code using AWS CDK, we proceed with deploying our resources to the cloud. This process is handled by the cdk deploy command. Here’s how we executed the deployment for our project:

1. Navigate to your project’s root directory in the terminal.
2. Run the cdk deploy command. bashCopy code cdk deploy

In the next post, I’ll outline the steps taken to set up the frontend for our ChinguTalkBot project. This phase is crucial for integrating our backend services and providing a user-friendly interface.

Frontend Deployment

You can locally modify and launch the frontend using AWS resources (API Gateway, Cognito, etc.) that have been deployed with cdk deploy.

1. Refer to Deploy using CDK for deploying on the AWS environment.
2. Copy the frontend/.env.template and save it as frontend/.env.local.
3. Fill in the contents of .env.local based on the output results of cdk deploy (such as BedrockChatStack.AuthUserPoolClientIdXXXXX)
4. Execute the following command:

cd frontend && npm ci && npm run dev