<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Rashi Agarwal</title>
    <description>The latest articles on Forem by Rashi Agarwal (@rashiagarwal).</description>
    <link>https://forem.com/rashiagarwal</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1038512%2Fc86ead85-8892-4244-95f8-4dccf2280fb2.jpg</url>
      <title>Forem: Rashi Agarwal</title>
      <link>https://forem.com/rashiagarwal</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/rashiagarwal"/>
    <language>en</language>
    <item>
      <title>Deep dive into AWS Serverless Architecture</title>
      <dc:creator>Rashi Agarwal</dc:creator>
      <pubDate>Tue, 31 Dec 2024 16:01:47 +0000</pubDate>
      <link>https://forem.com/aws-builders/deep-dive-into-aws-serverless-architecture-3pgn</link>
      <guid>https://forem.com/aws-builders/deep-dive-into-aws-serverless-architecture-3pgn</guid>
      <description>&lt;p&gt;Serverless architecture is more than just a buzzword, it’s a revolution in how we build and scale applications. Imagine writing code without worrying about servers, infrastructure, or scaling. Sounds dreamy, right? But serverless isn’t magic—it’s a well-structured approach with distinct layers working together seamlessly.&lt;/p&gt;

&lt;h2&gt;
  
  
  Tiers of a Serverless Architecture
&lt;/h2&gt;

&lt;p&gt;The most common serverless architecture pattern that we find almost everywhere, irrespective of whether we are using servers or going serverless. It is the &lt;strong&gt;three-tier Architecture&lt;/strong&gt;, most common form of &lt;strong&gt;multi-tier architecture&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The three-tier architecture, as the name suggests, has 3 tiers. Let’s dive into these tiers :&lt;/p&gt;

&lt;h4&gt;
  
  
  1. Database or Data Tier
&lt;/h4&gt;

&lt;p&gt;No application is complete without data. The data layer ensures your application stores, retrieves, and processes information effectively.The data tier would contain the databases and you could also use other data stores as well. The data stores fall into two categories:&lt;br&gt;
1️⃣ &lt;u&gt;IAM enabled Data stores&lt;/u&gt;: IAM enabled data stores allow you to connect to them directly using the AWS APIs.&lt;br&gt;
&lt;em&gt;Core Services:  Amazon DynamoDB, S3, and Amazon ElasticSearch.&lt;/em&gt; &lt;/p&gt;

&lt;p&gt;2️⃣ &lt;u&gt;VPC hosted Data stores&lt;/u&gt;: hese services run on hosted instances within a VPC. It allows you to connect to different databases using database credentials.&lt;br&gt;
&lt;em&gt;Core Services: Amazon RDS, Redshift, and ElastiCache.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Example =&amp;gt; You could use Amazon RDS for PostgreSQL as your relational database and connect to it through your Serverless Lambda functions. This setup is perfect for applications that require complex queries, transactional consistency, or advanced analytics, such as an inventory management system that tracks stock levels, sales, and reorders in real time.&lt;/em&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  2. Serverless Logic Tier or Application Layer
&lt;/h4&gt;

&lt;p&gt;This is where the core business logic of your serverless application would run.This layer processes user requests, runs workflows, and applies your application’s core logic.&lt;br&gt;
&lt;em&gt;Core Services:&lt;/em&gt; &lt;br&gt;
1️⃣ &lt;strong&gt;AWS Lambda:&lt;/strong&gt; Execute your code without provisioning servers.&lt;/p&gt;

&lt;p&gt;2️⃣ &lt;strong&gt;Amazon API Gateway:&lt;/strong&gt; Expose your backend logic through REST or WebSocket APIs.&lt;/p&gt;

&lt;p&gt;3️⃣ &lt;strong&gt;AWS Step Functions:&lt;/strong&gt; Orchestrate multiple workflows with visual diagrams and state machines.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Example =&amp;gt; Let’s say you’re building a real-time translation app. When a user sends text, an API Gateway triggers a Lambda function that:&lt;br&gt;
(i) Calls Amazon Translate for language conversion.&lt;br&gt;
(ii) Stores the original and translated text in Amazon DynamoDB.&lt;br&gt;
(iii) Sends a notification via Amazon SNS to the recipient.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;This entire workflow can be orchestrated using Step Functions, ensuring each step runs smoothly or retries on failure.&lt;/em&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  3. Presentation Tier or Frontend
&lt;/h4&gt;

&lt;p&gt;The presentation layer is where your users interact with your application. In serverless, this layer is often lightweight and scalable.The frontend would interact with the backend through the Logic tier.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Example =&amp;gt; Frontend applications could use API Gateway endpoints or event triggers to call Lambda functions, which in turn interact with the data stores available in the Data Tier.&lt;br&gt;
These frontend applications could be: static websites hosted in S3, Alexa, IOT devices, mobile app frontend.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Putting it Together
&lt;/h2&gt;

&lt;p&gt;Let’s combine everything into a real-world application: a serverless static website hosted on S3.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Presentation Tier:&lt;/strong&gt; The website’s HTML, CSS, and JavaScript files are hosted on &lt;em&gt;Amazon S3&lt;/em&gt; and distributed globally through &lt;em&gt;Amazon CloudFront&lt;/em&gt; for low-latency access. The frontend includes a user-friendly interface that allows visitors to submit feedback. We can include services like AWS Cognito for authentication and authorization.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Logic Tier:&lt;/strong&gt; When users submit feedback through the form, the request is sent to &lt;em&gt;Amazon API Gateway&lt;/em&gt;, which triggers an &lt;em&gt;AWS Lambda function&lt;/em&gt;. The Lambda function interacts with the data tier, processes the feedback, applies any business logic (e.g., spam filtering), and stores the data in the database.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Data Tier:&lt;/strong&gt; Feedback submissions are stored in &lt;em&gt;Amazon DynamoDB&lt;/em&gt; for fast and scalable access. For additional analytics, the data is periodically streamed to &lt;em&gt;Amazon S3&lt;/em&gt;.&lt;br&gt;
Below is the architecture diagram for the same:&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5dk0zlm4u7czj3sy1nvp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5dk0zlm4u7czj3sy1nvp.png" alt="Serverless architecture of website hosted in Amazon S3" width="800" height="308"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That's all for the blog! Hope you liked it and learned something from it😄&lt;/p&gt;

</description>
      <category>aws</category>
      <category>serverless</category>
      <category>lambda</category>
    </item>
    <item>
      <title>Running lambdas locally using Javascript/Node.js</title>
      <dc:creator>Rashi Agarwal</dc:creator>
      <pubDate>Sun, 29 Dec 2024 20:15:45 +0000</pubDate>
      <link>https://forem.com/aws-builders/running-lambdas-locally-using-javascriptnodejs-21g</link>
      <guid>https://forem.com/aws-builders/running-lambdas-locally-using-javascriptnodejs-21g</guid>
      <description>&lt;p&gt;Tired of deploying to the cloud just to test your AWS Lambda? It’s like mailing yourself a letter just to proofread it—slow, expensive, and totally unnecessary.&lt;/p&gt;

&lt;p&gt;What if you could invoke your Lambda locally—right from your JavaScript application? No cloud round-trips, no waiting, just instant feedback. With &lt;strong&gt;AWS SAM (Serverless Application Model)&lt;/strong&gt; and a sprinkle of Node.JS/JavaScript, you can test and debug your Lambdas on your machine, saving time, money🤩.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pre-Requisites:
&lt;/h2&gt;

&lt;p&gt;I am using a Windows PC and have the following things set-up before proceeding ahead: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AWS SDK
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;aws &lt;span class="nt"&gt;--version&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;SAM CLI
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;sam &lt;span class="nt"&gt;--version&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Docker
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker &lt;span class="nt"&gt;--version&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Node.js
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;node &lt;span class="nt"&gt;--version&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Let’s get started!
&lt;/h2&gt;

&lt;p&gt;We will start by creating a demo application using init command and then further proceed to invoke lambda within the application code (Nodejs).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1&amp;gt;&lt;/strong&gt; Navigate to the folder where you want to set up your project.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;sam init &lt;span class="nt"&gt;--runtime&lt;/span&gt; nodejs
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will create a basic Hello world application.It has a simple Lambda handler which it takes in the event and returns back the data received from a particular URL, along with a Hello World message.&lt;/p&gt;

&lt;p&gt;Let's take a deeper dive into what the files implement and how the code works:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;u&gt;SAM Template&lt;/u&gt; (template.js) -&amp;gt; it implements &lt;em&gt;HelloWorld Function&lt;/em&gt; where it uses the Code URI property set to Hello World SLASH. This implies that the Lambda handler code is inside the Hello World folder.

&lt;ul&gt;
&lt;li&gt;app.js -&amp;gt; This is referred in the Handler property of the SAM template, it contains exported function called Lambda Handler.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;You will notice a dependency named 'axios' in package.json, note that the module is simply used to make HTTP requests to the given URL.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2&amp;gt;&lt;/strong&gt; Install the dependency from package.json by navigating to the folder having the file, then use the command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;3&amp;gt;&lt;/strong&gt; Now, start the Lambda service locally by running the command.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;sam &lt;span class="nb"&gt;local &lt;/span&gt;start-lambda
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So, now the local Lambda service is running on port 3001.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4&amp;gt;&lt;/strong&gt; We will invoke our lambda functions from within our application code using the AWS SDK. To do that, let's create a sample node.js project. Create a new folder, navigate to the folder and enter the command.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm init
npm &lt;span class="nb"&gt;install &lt;/span&gt;aws-sdk &lt;span class="nt"&gt;--save&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;5&amp;gt;&lt;/strong&gt; Now create test.js file and reference the AWS SDK, configure the AWS region,instantiate a Lambda object.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;AWS&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;aws-sdk&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;AWS&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;update&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;region&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;us-west-2&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;lambda&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;AWS&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Lambda&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
      &lt;span class="na"&gt;endpoint&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;http://127.0.0.1:3001&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;parameters&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;FunctionName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;HelloWorldFunction&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;PayLoad&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Buffer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;{}&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nx"&gt;lambda&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;invoke&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;params&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Error: &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The parameter object here, invokes the Lambda Function, replace the function name according to the application code. The endpoint refers to the one on which your local lambda service is started.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;6&amp;gt;&lt;/strong&gt; Now run the command in a new terminal:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;node test.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;7&amp;gt;&lt;/strong&gt; &lt;em&gt;Verification and Testing:&lt;/em&gt; When you navigate back to the AWS SAM powershell, you can see it invokes Lambda handler locally, by first loading the function in a Docker container and execute it with our input event data.&lt;br&gt;
Now navigate back to the other terminal, you can see the response from the Lambda function, with status code 200 ✅, message Hello World, and the location IP address😄.&lt;/p&gt;

&lt;h2&gt;
  
  
  Wrapping Up
&lt;/h2&gt;

&lt;p&gt;And there you have it—a faster, smarter way to test your &lt;strong&gt;AWS Lambda functions&lt;/strong&gt; without ever leaving the comfort of your local setup. By invoking Lambdas locally with JavaScript and NodeJS, you’ve unlocked a whole new level of efficiency. Now you can iterate faster, debug smarter, and build cooler apps—all while keeping your cloud costs low. &lt;/p&gt;

&lt;p&gt;Happy coding, and may your Lambdas always run as smoothly locally as they will in the cloud! 🎉&lt;/p&gt;

</description>
      <category>aws</category>
      <category>javascript</category>
      <category>sam</category>
      <category>node</category>
    </item>
    <item>
      <title>Seamless User Authentication: Integration of AWS Cognito with HTML/CSS and JavaScript</title>
      <dc:creator>Rashi Agarwal</dc:creator>
      <pubDate>Sat, 23 Dec 2023 14:47:35 +0000</pubDate>
      <link>https://forem.com/aws-builders/seamless-user-authentication-integration-of-aws-cognito-with-htmlcss-and-javascript-5255</link>
      <guid>https://forem.com/aws-builders/seamless-user-authentication-integration-of-aws-cognito-with-htmlcss-and-javascript-5255</guid>
      <description>&lt;p&gt;In the domain of web development, user authentication stands as a pivotal element ensuring application security and delivering a personalized user experience. AWS Cognito, a fully managed authentication service from AWS, simplifies the management of user identities and authentication processes. This blog post delves into the seamless integration of AWS Cognito with HTML, CSS, and JavaScript, enhancing the authentication journey within web applications.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Understanding AWS Cognito&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Amazon Cognito offers a comprehensive solution for user identity management, allowing developers to handle user sign-up and sign-in, as well as manage user profiles and permissions. It supports various identity providers, including social identity providers such as Google and Facebook.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Key features of AWS Cognito include:&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;User Pools:&lt;/strong&gt; User pools enable developers to create and manage a user directory where users can sign up, sign in, and manage their profiles.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Identity Pools:&lt;/strong&gt; Identity pools (federated identities) allow users to obtain temporary AWS credentials to access AWS services.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Authentication:&lt;/strong&gt; Supports multi-factor authentication (MFA) and various identity providers, providing flexibility in authentication methods.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Customizable UI:&lt;/strong&gt; Developers can create a customized user interface for the authentication process.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Getting Started:&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;This demo will include creating a sign up/login page before accessing the website. The website is coded in HTML and javascript and we will be integrating AWS Cognito functionality in the sign up page.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;STEP 1: Creating AWS Cognito user pool&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For this follow the given steps:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Go to AWS Cognito console and choose &lt;em&gt;Create User Pool&lt;/em&gt;.&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In Provider types, choose Cognito user pool.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;For the user sign-in options choose from the given options, suitable for your website sign up page.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Configure the options as per the requirement of the sign up page you are developing.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Now for the 5th step: &lt;em&gt;Integrate your app&lt;/em&gt;: Enter the cognito pool name. Select the option &lt;em&gt;Use the Cognito Hosted UI&lt;/em&gt;. Then select Use a cognito domain and enter the domain prefix, same as that of your user pool name.&lt;br&gt;
For the initial app client, select public client and enter app client name.&lt;br&gt;
It is important to add a callback URL, it's the URL that the user will be directed to once they have signed in.&lt;br&gt;
For example: &lt;a href="http://localhost:8000/home.html" rel="noopener noreferrer"&gt;http://localhost:8000/home.html&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Now review the steps, and click create user pool.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You will get the cognito URL copy it.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;STEP 2: Integrating AWS Cognito API with HTML Login Page&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh72kplf4h4xtacb5wi63.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh72kplf4h4xtacb5wi63.png" alt="Image description" width="800" height="505"&gt;&lt;/a&gt;&lt;br&gt;
We'll look at a sample snippet of login page code wherein we'll call the AWS Cognito API.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="o"&gt;&amp;lt;!&lt;/span&gt;&lt;span class="nx"&gt;DOCTYPE&lt;/span&gt; &lt;span class="nx"&gt;html&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;html&lt;/span&gt; &lt;span class="nx"&gt;lang&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;en&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;head&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;LogiN&lt;/span&gt; &lt;span class="nx"&gt;Page&lt;/span&gt; &lt;span class="nx"&gt;Sample&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/title&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;meta&lt;/span&gt; &lt;span class="nx"&gt;charset&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;UTF-8&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;meta&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;viewport&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;width=device-width, initial-scale=1&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;    
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;link&lt;/span&gt; &lt;span class="nx"&gt;rel&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;icon&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;image/png&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;href&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;images/icons/favicon.ico&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;link&lt;/span&gt; &lt;span class="nx"&gt;rel&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;stylesheet&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text/css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;href&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fonts/font-awesome-4.7.0/css/font-awesome.min.css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;link&lt;/span&gt; &lt;span class="nx"&gt;rel&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;stylesheet&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text/css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;href&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fonts/iconic/css/material-design-iconic-font.min.css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;link&lt;/span&gt; &lt;span class="nx"&gt;rel&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;stylesheet&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text/css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;href&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;vendor/animate/animate.css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;link&lt;/span&gt; &lt;span class="nx"&gt;rel&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;stylesheet&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text/css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;href&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;css/util.css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;link&lt;/span&gt; &lt;span class="nx"&gt;rel&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;stylesheet&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text/css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;href&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;css/main.css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/head&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;

    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;limiter&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;container-login100&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;wrap-login100&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
                &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;form&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;login100-form validate-form&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
                    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;span&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;login100-form-title p-b-26&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
                        &lt;span class="nx"&gt;Welcome&lt;/span&gt; &lt;span class="nx"&gt;to&lt;/span&gt; &lt;span class="nx"&gt;YourStyle&lt;/span&gt;
                    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/span&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
                    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;container-login100-form-btn&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
                        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;wrap-login100-form-btn&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
                            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;login100-form-bgbtn&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;                            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;Insert AWS Cognito API&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
                            &lt;span class="nx"&gt;Login&lt;/span&gt;   &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;                        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;                    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
                    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text-center p-t-115&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
                        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;span&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;txt1&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
                            &lt;span class="nx"&gt;Don&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="nx"&gt;t&lt;/span&gt; &lt;span class="nx"&gt;have&lt;/span&gt; &lt;span class="nx"&gt;an&lt;/span&gt; &lt;span class="nx"&gt;account&lt;/span&gt;&lt;span class="p"&gt;?&lt;/span&gt;
                        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/span&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
                        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;txt2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;href&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;Insert AWS Cognito API&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
                            &lt;span class="nx"&gt;Sign&lt;/span&gt; &lt;span class="nx"&gt;Up&lt;/span&gt;
                        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/a&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;                    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;                &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/form&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;

    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;dropDownSelect1&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;vendor/jquery/jquery-3.2.1.min.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;vendor/animsition/js/animsition.min.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;vendor/bootstrap/js/popper.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;vendor/bootstrap/js/bootstrap.min.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;vendor/select2/select2.min.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;vendor/daterangepicker/moment.min.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;vendor/daterangepicker/daterangepicker.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;vendor/countdowntime/countdowntime.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;js/main.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/body&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/html&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now the crucial part here is how to insert the AWS Cognito API which will make the correct calls and give the required functionality. To integrate it follow the given syntax:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://&amp;lt;aws cognito url&amp;gt;/login?response_type=code&amp;amp;client_id=&amp;lt;fetch from the user pool created&amp;gt;&amp;amp;redirect_uri=&amp;lt;callback url that you entered while creating the pool&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example would be:&lt;br&gt;
&lt;em&gt;&lt;a href="https://homestyle.auth.us-east-1.amazoncognito.com/login?response_type=code&amp;amp;client_id=5icc2b3ks47a43hopdmbdoeqer&amp;amp;redirect_uri=http://localhost:8000/home.html" rel="noopener noreferrer"&gt;https://homestyle.auth.us-east-1.amazoncognito.com/login?response_type=code&amp;amp;client_id=5icc2b3ks47a43hopdmbdoeqer&amp;amp;redirect_uri=http://localhost:8000/home.html&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;STEP 3: Creating YAML file for AWS Cognito&lt;/strong&gt;&lt;br&gt;
Name the YAML file in following way: &lt;br&gt;
 &lt;em&gt;name_of_user_pool&lt;/em&gt;-cognito.yaml&lt;/p&gt;

&lt;p&gt;Follow the given template syntax:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;AWSTemplateFormatVersion&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;2010&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;09&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;09&lt;/span&gt; 

&lt;span class="nx"&gt;Resources&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
  &lt;span class="nx"&gt;UserPool&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="nx"&gt;Type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;AWS&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="nx"&gt;Cognito&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="nx"&gt;UserPool&lt;/span&gt;
    &lt;span class="nx"&gt;Properties&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="nx"&gt;AutoVerifiedAttributes&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;email&lt;/span&gt;
      &lt;span class="nx"&gt;UsernameAttributes&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;email&lt;/span&gt;
      &lt;span class="nx"&gt;UserPoolName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;Sub&lt;/span&gt; &lt;span class="nx"&gt;app_pool1&lt;/span&gt;
      &lt;span class="nx"&gt;Schema&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;AttributeDataType&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;String&lt;/span&gt;
          &lt;span class="nx"&gt;Mutable&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
          &lt;span class="nx"&gt;Name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;
          &lt;span class="nx"&gt;Required&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;

  &lt;span class="nx"&gt;UserPoolClient&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="nx"&gt;Type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;AWS&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="nx"&gt;Cognito&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="nx"&gt;UserPoolClient&lt;/span&gt;
    &lt;span class="nx"&gt;Properties&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="nx"&gt;AccessTokenValidity&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt; &lt;span class="err"&gt;#&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;minutes&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
      &lt;span class="nx"&gt;AllowedOAuthFlowsUserPoolClient&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
      &lt;span class="nx"&gt;AllowedOAuthFlows&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;code&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;implicit&lt;/span&gt;
      &lt;span class="nx"&gt;AllowedOAuthScopes&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;aws&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;cognito&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;signin&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;admin&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;email&lt;/span&gt;

      &lt;span class="nx"&gt;CallbackURLs&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;Sub&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;http://localhost:8000/home.html&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
      &lt;span class="nx"&gt;ClientName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;Sub&lt;/span&gt; &lt;span class="nx"&gt;homestyle&lt;/span&gt;
      &lt;span class="nx"&gt;EnableTokenRevocation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="err"&gt;#&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
      &lt;span class="nx"&gt;ExplicitAuthFlows&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;ALLOW_CUSTOM_AUTH&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;ALLOW_REFRESH_TOKEN_AUTH&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;ALLOW_USER_SRP_AUTH&lt;/span&gt;
      &lt;span class="nx"&gt;IdTokenValidity&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt; &lt;span class="err"&gt;#&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;minutes&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
      &lt;span class="nx"&gt;PreventUserExistenceErrors&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;ENABLED&lt;/span&gt; &lt;span class="err"&gt;#&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
      &lt;span class="nx"&gt;RefreshTokenValidity&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt; &lt;span class="err"&gt;#&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;days&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
      &lt;span class="nx"&gt;SupportedIdentityProviders&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;COGNITO&lt;/span&gt;
      &lt;span class="nx"&gt;TokenValidityUnits&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="nx"&gt;AccessToken&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;minutes&lt;/span&gt;
        &lt;span class="nx"&gt;IdToken&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;minutes&lt;/span&gt;
        &lt;span class="nx"&gt;RefreshToken&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;days&lt;/span&gt;
      &lt;span class="nx"&gt;UserPoolId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;Ref&lt;/span&gt; &lt;span class="nx"&gt;us&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;east&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="nx"&gt;_WD8wX51gU&lt;/span&gt;

  &lt;span class="nx"&gt;UserPoolDomain&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="nx"&gt;Type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;AWS&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="nx"&gt;Cognito&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="nx"&gt;UserPoolDomain&lt;/span&gt;
    &lt;span class="nx"&gt;Properties&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="nx"&gt;Domain&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;Ref&lt;/span&gt; &lt;span class="nx"&gt;https&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="c1"&gt;//homestyle.auth.us-east-1.amazoncognito.com&lt;/span&gt;
      &lt;span class="nx"&gt;UserPoolId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;Ref&lt;/span&gt; &lt;span class="nx"&gt;us&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;east&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="nx"&gt;_WD8wX51gU&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;From the above template, customize following fields:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Properties&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;UserPoolName&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;CallbackURLs&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;ClientName&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;UserPoolID&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;UserPoolDomain&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In conclusion, integrating AWS Cognito with HTML, CSS, and JavaScript empowers developers to build secure and user-friendly authentication systems. With AWS Cognito's robust features and flexibility, you can tailor the authentication process to meet the specific requirements of your web application, providing a seamless and secure experience for your users. By following the steps outlined in this blog post, you can successfully integrate AWS Cognito and elevate the authentication standards of your web applications.&lt;/p&gt;

</description>
      <category>aws</category>
      <category>html</category>
      <category>javascript</category>
      <category>cognito</category>
    </item>
    <item>
      <title>Tips to get accepted into AWS Community Builder Program</title>
      <dc:creator>Rashi Agarwal</dc:creator>
      <pubDate>Mon, 29 May 2023 19:52:32 +0000</pubDate>
      <link>https://forem.com/aws-builders/how-to-become-an-aws-community-builder-17ca</link>
      <guid>https://forem.com/aws-builders/how-to-become-an-aws-community-builder-17ca</guid>
      <description>&lt;p&gt;👉&lt;strong&gt;&lt;em&gt;What is AWS Community Builder Program?&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Since the beginning of my college life I always wanted to join some community where I could actually contribute and learn something. While joining college communities might still be helpful and fun, joining a global community is a whole new experience. The happiness of getting accepted in the community, the excitement of interacting with like-minded professionals from all across the globe and working together on projects, sharing thoughts, is unmatchable.&lt;br&gt;
I have been exploring AWS for a while now and when I got to know that I could get the opportunity of being a part of its community, I knew I couldn't let it slip away.&lt;/p&gt;

&lt;p&gt;Now you may want to know what's so different about this program that sets it apart from other communities? To answer your question, I'll start by talking about what the community builder program is centered around. Amazon Web Services (AWS) is a cloud platform featuring several services using which we can deploy our applications on cloud, utilizing additional features like Load Balancing, Auto Scaling, Security. AWS Community builder focuses on bringing together people who are AWS enthusiasts and are actively working towards learning about AWS, contributing to projects and sharing their knowledge by either speaking at events, writing blogs, etc.  &lt;/p&gt;




&lt;p&gt;👉&lt;strong&gt;&lt;em&gt;Benefits:&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;There are several benefits to joining AWS Community Builder Program. First, I'll list the well known ones:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Getting AWS Promotional Credits worth $500💸&lt;/li&gt;
&lt;li&gt;Opportunity to grow your network👥&lt;/li&gt;
&lt;li&gt;Connect with subject matter experts👩‍🏫👨‍🏫&lt;/li&gt;
&lt;li&gt;One year free subscription to Cloud Academy☁️&lt;/li&gt;
&lt;li&gt;Receiving awesome swags as a welcome kit from the AWS Community Builder Team😍💃&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fle682s88ttb163t3kgc4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fle682s88ttb163t3kgc4.png" alt="Image description" width="800" height="776"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are certainly a lot of other benefits on joining the community. It doesn't matter in which category you are selected as a community builder, you can connect with other builders and get knowledge as well as contribute to other topics of your interest too. You can get discount vouchers to attend various AWS events like &lt;em&gt;AWS re:Invent, AWS re:Inforce, AWS Summits&lt;/em&gt;. As a college student, I have been focusing on building my resume and thus also planning to give AWS Certification exams, the program also gives the opportunity to request for vouchers for the examination whenever we feel ready to take it. &lt;br&gt;
As a community builder you get to attend several virtual events conducted by professionals in the specific field, trust me this helps a lot especially when you are working on some entirely new concept and building a project. You are given a new perspective and learn how to use the specific service, in a way which even Google cannot educate you about!&lt;br&gt;
The list does not end here! You also get to participate in exclusive hackathons and competitions conducted for Community Builders, with prizes upto $9000!! Random giveaways of you participating in surveys, giving reviews on the services that you have used are also conducted. I have connected with so many great people, it is truly amazing to discuss and share your thoughts with individuals who will motivate you to grow further.&lt;/p&gt;




&lt;p&gt;👉&lt;strong&gt;&lt;em&gt;Application Process:&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;My background:&lt;/strong&gt; &lt;br&gt;
I am Cloud Computing Enthusiast, former project intern at TRAIVIS, UK. I am also AWS Cloud Practitioner certified, AWS Community Builder. My interest in research has led me to publish research papers in IEEE Conferences in Machine learning domain.&lt;/p&gt;

&lt;p&gt;The applications to this program are opened twice a year and its accepts a limited amount of people every year.&lt;br&gt;
It's important to know your interests before applying to the program as there are several categories to choose from, which the builder will be assigned once been accepted. The categories are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Serverless&lt;/li&gt;
&lt;li&gt;Storage&lt;/li&gt;
&lt;li&gt;Containers&lt;/li&gt;
&lt;li&gt;Machine Learning&lt;/li&gt;
&lt;li&gt;Networking and Content Delivery&lt;/li&gt;
&lt;li&gt;Arm Development&lt;/li&gt;
&lt;li&gt;Data (Databases, Analytics, Blockchain)&lt;/li&gt;
&lt;li&gt;Developer Tools&lt;/li&gt;
&lt;li&gt;Game Tech&lt;/li&gt;
&lt;li&gt;Mobile and Web Apps&lt;/li&gt;
&lt;li&gt;Management, Governance and Migration&lt;/li&gt;
&lt;li&gt;Security, Identity &amp;amp; Compliance&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;STEP 1.&lt;/em&gt; Apply using the link:&lt;br&gt;
⭐ &lt;a href="https://aws.amazon.com/developer/community/community-builders" rel="noopener noreferrer"&gt;https://aws.amazon.com/developer/community/community-builders&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;em&gt;STEP 2.&lt;/em&gt; Choose the category (3 based on priority) that you would like to apply from.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;STEP 3.&lt;/em&gt; You will be prompted to write about why you are interested in the program. Be honest while sharing your story, keep in mind to include any certifications if done, as it might increase your chances of getting into the program.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;STEP 4:&lt;/em&gt; Share your social media profiles.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;STEP 5:&lt;/em&gt; Share links to your projects github repositories, technical blogs, events conducted.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;STEP 6:&lt;/em&gt; Fill out the survey related to the activities that you have participated in past year.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Once you are accepted in the program, make sure to stay active by attending meetings, connecting with people, frequently checking the Slack workspace and sharing your knowledge by either writing blogs, conducting or speaking at events.&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;👉&lt;strong&gt;&lt;em&gt;Tips for your application to get accepted:&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I'll be completely honest in this section. These are some of the points that play a crucial role in your application process, in my opinion:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Having published one or preferably more than one technical write up on some platform is a necessity, if not a technical write up then maybe a video link of you speaking at some event about AWS. By technical write up I do not mean sharing your experience of how to clear a certain exam, but something that displays your knowledge of having worked on AWS services, Azure or GCP.&lt;br&gt;
This is one of the most important requirement, don't be disheartened if this is something that you have not done yet. I encourage you to actively learn more about AWS and start sharing your knowledge. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Your cloud story (STEP 3), plays an important role too as it displays your perspective of participating in this community and your achievements and knowledge which could help to build a more diverse community. Please be honest while writing this answer.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Try to add some links of your completed projects which demonstrates use of cloud platform like AWS, GCP or Azure. It increases your chances of getting into the program. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Do mention your completed certification in Cloud, it can be Azure or GCP too. This might not be sufficient but helps in building a stronger application.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I hope this blogs help you out, to get into the AWS Community Builder program. If you do not get accepted in your first attempt, don't be disheartened, but work on building a stronger application and apply again.&lt;br&gt;
For further questions or help do feel free to reach me out on:&lt;br&gt;
&lt;a href="https://www.linkedin.com/in/rashi-agarwal-93404b240/" rel="noopener noreferrer"&gt;https://www.linkedin.com/in/rashi-agarwal-93404b240/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you'd like, follow me on github too😝. Here's the link:&lt;br&gt;
&lt;a href="https://github.com/rashi2911" rel="noopener noreferrer"&gt;https://github.com/rashi2911&lt;/a&gt;&lt;/p&gt;

</description>
      <category>aws</category>
      <category>awscommunitybuilder</category>
      <category>cloud</category>
      <category>community</category>
    </item>
    <item>
      <title>DynamoDB using AWS SDK for Javascript/Node.js</title>
      <dc:creator>Rashi Agarwal</dc:creator>
      <pubDate>Tue, 07 Mar 2023 05:28:47 +0000</pubDate>
      <link>https://forem.com/aws-builders/dynamodb-using-aws-sdk-for-javascriptnodejs-43j1</link>
      <guid>https://forem.com/aws-builders/dynamodb-using-aws-sdk-for-javascriptnodejs-43j1</guid>
      <description>&lt;p&gt;&lt;strong&gt;What is DynamoDB?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Amazon DynamoDB is a fully managed NoSQL database service. It allows you to work with Big Data. It provides features like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Seamless on-demand scaling.&lt;/li&gt;
&lt;li&gt;Unlimited concurrent read/write operations.&lt;/li&gt;
&lt;li&gt;Single-digit millisecond latency.&lt;/li&gt;
&lt;li&gt;Microsecond latency with DAX ( caching service).&lt;/li&gt;
&lt;li&gt;Fault tolerant, supports cross-region replication and highly scalable.&lt;/li&gt;
&lt;li&gt;Can process largely unstructured data with high volume and frequency.&lt;/li&gt;
&lt;li&gt;Pricing based on capacity you provision for each table.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;DynamoDB must have a primary key.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Data Types in DynamoDB&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Scalar Types : &lt;em&gt;Represents exactly one value which can be string, numbers, binary, boolean or null.&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;Set Types : &lt;em&gt;Represents multiple scalar values which can se string set, number set or binary set.&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;Document Types : &lt;em&gt;It has complex structure with nested attributes which ca be map or list.&lt;/em&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Pre-Requisites for using DynamoDB with AWS SDK in Node.js/ Javascript&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Firstly make sure the aws-cli is installed in your system along with the aws environment variable and configurations set up. You can check this by simply running command: aws --version.&lt;/p&gt;

&lt;p&gt;Go to terminal and run the instructions:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;npm init&lt;/li&gt;
&lt;li&gt;npm install aws-sdk — -save&lt;/li&gt;
&lt;/ol&gt;




&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;&lt;em&gt;Basic Table operations in DynamoDB using AWS SDK&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Listing DynamoDB tables&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;//referencing sdk in js file
const AWS = require("aws-sdk");
//specifying aws region where dynamodb table will be created
AWS.config.update({ region: 'us-east-1' });
//instantiate dynamodb class
const dynamodb = new AWS.DynamoDB();
//listing tables
dynamodb.listTables({}, (err, data)=&amp;gt;{
    if(err) {
        console.log(err);
    } else {
        console.log(data);
    }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Describe Tables&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;dynamodb.describeTable({
     TableName: "demo_sdk"
 }, (err, data)=&amp;gt;{
     if(err) {
         console.log(err);
     } else {
         console.log(JSON.stringify(data, null, 2));// '2' is to beautify the output 
     }
 });
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Create Table&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Provisioned throughput here allows for predictable performance at scale. It is a major factor in pricing and is defined in read capacity units(RCUs) and write capacity units(WCUs).&lt;/p&gt;

&lt;p&gt;1 capacity unit= 1 request per second&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;dynamodb.createTable({
    TableName: "demo_sdk",
    AttributeDefinitions: [
        {
            AttributeName: "id",
            AttributeType: "S" //string
        },
        {
            AttributeName: "timestamp",
            AttributeType: "N" //number
        }
    ],
    KeySchema: [
        {
            AttributeName: "id",
            KeyType: "HASH"
        },
        {
            AttributeName: "timestamp",
            KeyType: "RANGE"
        }
    ],
    ProvisionedThroughput: {
        ReadCapacityUnits: 1,
        WriteCapacityUnits: 1
    }
}, (err, data)=&amp;gt;{
    if(err) {
        console.log(err);
    } else {
        console.log(JSON.stringify(data, null, 2));
    }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Update Table&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;//Changing read capacity units from 1 to 2 for the table
dynamodb.updateTable({
    TableName: "demo_sdk",
    ProvisionedThroughput: {
        ReadCapacityUnits: 2,
        WriteCapacityUnits: 1
    }
}, (err, data) =&amp;gt; {
    if(err) {
        console.log(err);
    } else {
        console.log(JSON.stringify(data, null, 2));
    }
});

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Delete table&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;dynamodb.deleteTable({
    TableName: "demo_sdk"
}, (err, data) =&amp;gt; {
    if(err) {
        console.log(err);
    } else {
        console.log(JSON.stringify(data, null, 2));
    }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can view the changes after each operations by using the describeTable function of dynamodb. All the changes will be reflected in the AWS Management console by writing just a few lines of code and without manually clicking and doing the tedious tasks.&lt;/p&gt;




&lt;p&gt;If you go through the syntax for the code snippets carefully it’s quite simple isn’t it? So assuming that now you have got a bit of hold of using AWS SDK for dynamodb we’ll jump to a bit more of detailed table operations.&lt;/p&gt;

&lt;p&gt;Earlier we used AWS.DynamoDB class which uses low-level programming approach. Now we’ll use another class of dynamodb which is AWS.DynamoDB.DocumentClient , provides us with high level access while working with items. We say it provides high level access because it abstracts all the unnecessary details from the user like mapping of the internal DynamoDB data types to the JavaScript data types.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;High Level Access Table Operations&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Put Item&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The instantiation of the aws sdk and the aws region will remain the same as previous codes.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const docClient = new AWS.DynamoDB.DocumentClient();
docClient.put({
    TableName: 'demo_sdk',
    Item: {
// specify attributes as key value pairs
        user_id: 'first',
  //timestamp is the primary key
        timestamp: 3,
        title: 'The Secret',
        content: 'Book'
    }
}, (err, data)=&amp;gt;{
    if(err) {
        console.log(err);
    } else {
        console.log(data);
    }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Update Items&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Want to update the item entry but don’t want to waste time searching and modifying it’s value? DynamoDB provides a solution for that too, which is the docClient.update function.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const docClient = new AWS.DynamoDB.DocumentClient();
docClient.update({
    TableName: 'demo_sdk',
    Key: {
        user_id: 'first',
        timestamp: 3
    },
    UpdateExpression: 'set #old = :new',
    ExpressionAttributeNames: {
        '#old': 'The Secret' 
    },
    ExpressionAttributeValues: {
       //Title of item is updated
        ':new': "Hall of Games"
    }
}, (err, data)=&amp;gt;{
    if(err) {
        console.log(err);
    } else {
        console.log(data);
    }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Deleting Items&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Once you start seeing the pattern in the syntax of the code it becomes fairly easy to write it on your own so try this one by yourself and then compare your code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const docClient = new AWS.DynamoDB.DocumentClient();
docClient.delete({
    TableName: 'demo_sdk',
    Key: {
        user_id: 'first',
        timestamp: 3
    }
}, (err, data)=&amp;gt;{
    if(err) {
        console.log(err);
    } else {
        console.log(data);
    }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Batch Write Items&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This function helps us put or delete multiple items at once making our job much simpler when working with large set of table entries.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const docClient = new AWS.DynamoDB.DocumentClient();
docClient.batchWrite({
    RequestItems: {
        'demo_sdk': [
            {
              // deletes item , here, only one
                DeleteRequest: {
                    Key: {
                        user_id: 'first',
                        timestamp: 3
                    }
                }
            },
            {
              // inserting two items in the table
                PutRequest: {
                    Item: {
                        user_id: 'new',
                        timestamp: 1,
                        title: 'To Kill a MockingBird',
                        content: 'Harper Lee'
                    }
                }
            },
            {
                PutRequest: {
                    Item: {
                        user_id: 'two',
                        timestamp: 2,
                        title: 'Harry Potter',
                        content: 'J.K Rowling'
                    }
                }
            }
        ]
    }
}, (err, data)=&amp;gt;{
    if(err) {
        console.log(err);
    } else {
        console.log(data);
    }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Get an item&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const docClient = new AWS.DynamoDB.DocumentClient();
// to get an item with the corresponding key parameters
docClient.get({
    TableName: 'demo_sdk',
    Key: {
        user_id: 'two',
        timestamp: 2
    }
}, (err, data)=&amp;gt;{
    if(err) {
        console.log(err);
    } else {
        console.log(data);
    }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Query an item&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const docClient = new AWS.DynamoDB.DocumentClient();
//here we specify th query condition or the where clause, for instance if we
// have multiple table entries for a user_id and want to get all those items at
//once (in this case we don't, but for the sake of learning XD)
docClient.query({
    TableName: 'demo_sdk',
// condition is: user_id must be equal to the value of expression attribute id
    KeyConditionExpression: "user_id = :id",
    ExpressionAttributeValues: {
        ":id": "new"
    }
}, (err, data)=&amp;gt;{
    if(err) {
        console.log(err);
    } else {
        console.log(data);
    }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;Summary:&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;You have familiarized yourself with a basic understanding of what AWS DynamoDB is and then further learned how to work with dynamodb using simple javascript codes with AWS SDK. Further learned about the classes of dynamodb and the low level and high level table operations like: Create Table, Delete Table, Describe Table, Put item, Get item, Delete item, Batch Write item, Query an item and update the item.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;References:&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB.html" rel="noopener noreferrer"&gt;https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB/DocumentClient.html" rel="noopener noreferrer"&gt;https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB/DocumentClient.html&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Thank you for reading!&lt;/strong&gt;&lt;br&gt;
Github Link: &lt;a href="https://github.com/rashi2911/dynamo-db-aws-sdk" rel="noopener noreferrer"&gt;https://github.com/rashi2911/dynamo-db-aws-sdk&lt;/a&gt;&lt;/p&gt;

</description>
      <category>dynamodb</category>
      <category>aws</category>
      <category>javascript</category>
      <category>node</category>
    </item>
  </channel>
</rss>
