Build a Serverless Web Application with AWS Lambda, API Gateway,Amplify,DynamoDB and Cognito

Introduction:

Build a serverless web application to follow step-by-step instructions to create a simple serverless web application that enables users to request unicorn rides from the Wild Rydes fleet.

Prerequisites:

• AWS account
• ArcGIS Account to add mapping to your app
• Text editor (VS CODE)
• AWS Lambda
• AWS API Gateway
• AWS Amplify
• Amazon DynamoDB
• Amazon Cognito

Application Architecture Diagram:

The application architecture uses AWS Lambda, Amazon API Gateway, Amazon DynamoDB, Amazon Cognito, and AWS Amplify Console. Amplify Console provides continuous deployment and hosting of the static web resources including HTML, CSS, JavaScript, and image files which are loaded in the user's browser. JavaScript executed in the browser sends and receives data from a public backend API built using Lambda and API Gateway. Amazon Cognito provides user management and authentication functions to secure the backend API. Finally, DynamoDB provides a persistence layer where data can be stored by the API's Lambda function

AWS Amplify:

You will configure AWS Amplify to host the static resources for your web application with continuous deployment built in. The Amplify Console provides a git-based workflow for continuous deployment and hosting of full-stack web apps. In subsequent modules, you will add dynamic functionality to these pages using JavaScript to call remote RESTful APIs built with AWS Lambda and Amazon API Gateway.

Follow step by step to configure aws:

• Go to AWS Console and Choose your aws region.
• Create a Git repository using Codecommit (free Tier) or GitHub. Open the AWS CodeCommit console Note: I use AWS Codecommit and AWS cloudshell for terminal
• Select Create Repository and set the repo name to "wildrydes-site"
• Select Create

• Now that the repository is created, set up an IAM user with Git credentials in the IAM console following these instructions.

• (Recommended to use IAM user for this project)

• Back in the CodeCommit console, from the Clone URL dropdown, select Clone HTTPS

• From a terminal window run git clone and the HTTPS URL of the repository:

$ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site

Enter username and password from Git credential HTTPS connections (Link to Setup) Step 3.

Note:You appear to have cloned an empty repository.

Now we have created git repository and cloned empty repository locally. Next we push the code to wildrydes-site repo manually.

• Change directory into your repository:

$ cd wildrydes-site

• copy the static files from S3:

$ aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive

• Commit the files to your Git service

$ git add .
$ git commit -m 'first'
$ git push

We have pushed the code to AWS codecommit wildrydes-site repository successfully.

Enable web Hosting with the AWS Amplify console:

• Launch the Amplify Console console page and Click Get Started under Deploy with Amplify Console
• Go to New App on the top right and choose Host Web App
• Select CodeCommit under Get started with Amplify Hosting

• Select the Repository service provider used today and select Next

• On the Configure build settings page, leave all the defaults, Select Allow AWS Amplify to automatically deploy all files hosted in your project root directory and select Next.
• On the "Review" page select Save and deploy.
• The process takes a couple of minutes for Amplify Console to create the necessary resources and to deploy your code.

Successfully Code Deployed!

User Management (Amazon Cognito):

You will create an Amazon Cognito user pool to manage your users accounts. You'll deploy pages that enable customers to register as a new user, verify their email address, and sign into the site.

When users visit your website they will first register a new user account. For the purposes of this workshop we'll only require them to provide an email address and password to register. However, you can configure Amazon Cognito to require additional attributes in your own applications.

After users submit their registration, Amazon Cognito will send a confirmation email with a verification code to the address they provided. To confirm their account, users will return to your site and enter their email address and the verification code they received. You can also confirm user accounts using the Amazon Cognito console with a fake email addresses for testing.

After users have a confirmed account (either using the email verification process or a manual confirmation through the console), they will be able to sign in. When users sign in, they enter their username (or email) and password. A JavaScript function then communicates with Amazon Cognito, authenticates using the Secure Remote Password protocol (SRP), and receives back a set of JSON Web Tokens (JWT). The JWTs contain claims about the identity of the user and will be used in the next module to authenticate against the RESTful API you build with Amazon API Gateway.

Create An Amazon Cognito User Pool and Integrate an App to Your User Pool:

Amazon Cognito provides two different mechanisms for authenticating users.

1. Cognito User Pools to add sign-up and sign-in functionality to your application
2. Choose Create user pool. to authenticate users through social identity providers such as Facebook, Twitter, or Amazon, with SAML identity solutions, or by using your own identity system.

Note : We use Cognito User Pools for this authentication.

• Open Cognito from AWS search bar.
• Choose Create user pool.
• On the Configure sign-in experience page, in the Cognito user pool sign-in options section, select User name. Keep the defaults for the other settings, such as Provider types in the Authentication providers section. Choose Next.
• On the Configure security requirements page, keep the Password policy mode as Cognito defaults. You can choose to configure multi-factor authentication (MFA) or choose No MFA and keep other configurations as default. Choose Next.
• On the Configure sign-up experience page, keep everything as default. Choose Next.
• On the Configure message delivery page, for Email provider, confirm that Send email with Amazon SES - Recommended is selected. In the FROM email address field, select an email address that you have verified with Amazon SES, following these instructions from the Amazon SES Developer Guide.
• On the Integrate your app page, provide a name for your user pool such as WildRydes. Under Initial app client, give the app client a name such as WildRydesWebApp and keep other settings as default.
• On the Review and create page, choose Create user pool.

Note: Note the Pool ID and the App client ID on the Pool details page of your newly created user pool.

Update the Website Config:

The /js/config.js file contains settings for the user pool ID, app client ID and Region. Update this file with the settings from the user pool and app you created in the previous steps and upload the file back to your bucket

• From your local machine, open wildryde-site/js/config.js in a text editor of your choice.

• Update the cognito section with the correct values for the user pool and app you just created.

You can find the value for userPoolId on the Pool details page of the Amazon Cognito console after you select the user pool that you created.

You can find the value for userPoolClientId by selecting App clients from the left navigation bar. Use the value from the App client id field for the app you created in the previous section.

The value for region should be the AWS Region code where you created your user pool. E.g. us-east-1 for the N. Virginia Region, or us-west-2 for the Oregon Region. If you're not sure which code to use, you can look at the Pool ARN value on the Pool details page. The Region code is the part of the ARN immediately after arn:aws:cognito-idp:

The updated config.js file should look like this. Note that the actual values for your file will be different:

window._config = {
    cognito: {
        userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb
        userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
        region: 'us-west-2' // e.g. us-east-2
    },
    api: {
        invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
    }
};

• Save the modified file and push it to your Git repository to have it automatically deploy to Amplify Console.

$ git add .
$ git commit -m "new_config"
$ git push

Validate your implementation:

• Visit /register.html under your website domain, or choose the Giddy Up! button on the homepage of your site.

• Complete the registration form and choose Let's Ryde. You can use your own email or enter a fake email. Make sure to choose a password that contains at least one upper-case letter, a number, and a special character. Don't forget the password you entered for later. You should see an alert that confirms that your user has been created.

• Confirm your new user using one of the two following methods.

• If you used an email address you control, you can complete the account verification process by visiting /verify.html under your website domain and entering the verification code that is emailed to you. Please note, the verification email may end up in your spam folder. For real deployments we recommend configuring your user pool to use Amazon Simple Email Service to send emails from a domain you own.

• If you used a dummy email address, you must confirm the user manually through the Cognito console.

• From the AWS console, click Services then select Cognito under Security, Identity & Compliance.

• Choose Manage your User Pools

• Select the WildRydes user pool and click Users and groups in the left navigation bar.

• Choose Confirm user to finalize the account creation process.

• After confirming the new user using either the /verify.html page or the Cognito console, visit /signin.html and log in using the email address and password you entered during the registration step.

• If successful you should be redirected to /ride.html. You should see a notification that the API is not configured.

Serverless Service Backend:

You will use AWS Lambda and Amazon DynamoDB to build a backend process for handling requests for your web application. The browser application that you deployed in the first module allows users to request that a unicorn be sent to a location of their choice. To fulfill those requests, the JavaScript running in the browser will need to invoke a service running in the cloud.

Create an Amazon DynaMoDB Table:

Use the Amazon DynamoDB console to create a new DynamoDB table. Call your table Rides and give it a partition key called RideId with type String. The table name and partition key are case sensitive. Make sure you use the exact IDs provided. Use the defaults for all other settings.

After you've created the table, note the ARN for use in the next step.

• From the AWS Management Console, choose Services then select DynamoDB under Databases.
• Choose Create table.
• Enter Rides for the Table name. This field is case sensitive.
• Enter RideId for the Partition key and select String for the key type. This field is case sensitive.
• Check the Use default settings box and choose Create. Navigate to the Tables page in the DynamoDB console and wait for your table creation to complete. Once it is completed, select your table name.
• Scroll to the bottom of the Overview section of your new table and choose Additional info. Note the ARN. You will use this in the next section.

Create an IAM Role for your Lambda Function:

• From the AWS Management Console, click on Services and then select IAM in the Security, Identity & Compliance section.

• Select Roles in the left navigation pane and then choose Create Role.

• Underneath Trusted Entity Type, select AWS service. For Use case, select Lambda, then choose Next.

• Begin typing AWSLambdaBasicExecutionRole in the Filter text box and check the box next to that role.

• Choose Next Step.

• Enter WildRydesLambda for the Role Name. Keep other parameters as default.

• Choose Create Role.

• Type WildRydesLambda into the filter box on the Roles page and choose the role you just created.

• On the Permissions tab, on the left under Add permissions, choose Create Inline Policy

• Select Choose a service.

• Begin typing DynamoDB into the search box labeled Find a service and select DynamoDB when it appears.

• Choose Select actions.

• Begin typing PutItem into the search box labeled Filter actions and check the box next to PutItem when it appears.

• Select the Resources section.

• With the Specific option selected, choose the Add ARN link in the table section.

• Paste the ARN of the table you created in the previous section in the Specify ARN for table field, and choose Add.

• Choose Review Policy.

• Enter DynamoDBWriteAccess for the policy name and choose Create policy.

Create a Lambda Function for Handling Requests:

AWS Lambda will run your code in response to events such as an HTTP request. In this step you'll build the core function that will process API requests from the web application to dispatch a unicorn. In the next module you'll use Amazon API Gateway to create a RESTful API that will expose an HTTP endpoint that can be invoked from your users' browsers. You'll then connect the Lambda function you create in this step to that API in order to create a fully functional backend for your web application.

Make sure to configure your function to use the WildRydesLambda IAM role you created in the previous section.

• Choose Services then select Lambda in the Compute section.
• Click Create function.
• Keep the default Author from scratch card selected.
• Enter RequestUnicorn in the Name field.
• Select Node.js 16.x for the Runtime (newer versions of Node.js will not work in this tutorial)
• Ensure Use an existing role is selected from the Change default execution role dropdown.
• Select WildRydesLambda from the Existing Role dropdown.

• Click on Create function.

• Scroll down to the Code source section and replace the existing code in the index.js code editor with this code.
  

const { randomBytes } = require('crypto');
const { DynamoDBClient, PutItemCommand } = require('@aws-sdk/client-dynamodb');
const { marshall } = require('@aws-sdk/util-dynamodb');

const ddbClient = new DynamoDBClient({ region: 'us-east-1' }); // Update with your desired region

const fleet = [
  {
    Name: 'Bucephalus',
    Color: 'Golden',
    Gender: 'Male',
  },
  {
    Name: 'Shadowfax',
    Color: 'White',
    Gender: 'Male',
  },
  {
    Name: 'Rocinante',
    Color: 'Yellow',
    Gender: 'Female',
  },
];

exports.handler = async (event) => {
  if (!event.requestContext.authorizer) {
    return errorResponse('Authorization not configured', event.requestContext.requestId);
  }

  const rideId = toUrlString(randomBytes(16));
  console.log('Received event (', rideId, '): ', event);

  const username = event.requestContext.authorizer.claims['cognito:username'];

  const requestBody = JSON.parse(event.body);

  const pickupLocation = requestBody.PickupLocation;

  const unicorn = findUnicorn(pickupLocation);

  try {
    await recordRide(rideId, username, unicorn);

    return {
      statusCode: 201,
      body: JSON.stringify({
        RideId: rideId,
        Unicorn: unicorn,
        UnicornName: unicorn.Name,
        Eta: '30 seconds',
        Rider: username,
      }),
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
    };
  } catch (err) {
    console.error(err);

    return errorResponse(err.message, event.requestContext.requestId);
  }
};

function findUnicorn(pickupLocation) {
  console.log('Finding unicorn for ', pickupLocation.Latitude, ', ', pickupLocation.Longitude);
  return fleet[Math.floor(Math.random() * fleet.length)];
}

async function recordRide(rideId, username, unicorn) {
  const params = {
    TableName: 'Rides',
    Item: marshall({
      RideId: rideId,
      User: username,
      Unicorn: unicorn,
      UnicornName: unicorn.Name,
      RequestTime: new Date().toISOString(),
    }),
  };

  await ddbClient.send(new PutItemCommand(params));
}

function toUrlString(buffer) {
  return buffer
    .toString('base64')
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=/g, '');
}

function errorResponse(errorMessage, awsRequestId) {
  return {
    statusCode: 500,
    body: JSON.stringify({
      Error: errorMessage,
      Reference: awsRequestId,
    }),
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  };
}

• Choose Deploy.

Validate Your Implementation:

• From the main edit screen for your function, select Test and choose Configure test event from the dropdown.
• Keep Create new event selected.
• Enter TestRequestEvent in the Event name field
• Copy and paste the following test event into the editor:

{
    "path": "/ride",
    "httpMethod": "POST",
    "headers": {
        "Accept": "*/*",
        "Authorization": "eyJraWQiOiJLTzRVMWZs",
        "content-type": "application/json; charset=UTF-8"
    },
    "queryStringParameters": null,
    "pathParameters": null,
    "requestContext": {
        "authorizer": {
            "claims": {
                "cognito:username": "the_username"
            }
        }
    },
    "body": "{\"PickupLocation\":{\"Latitude\":47.6174755835663,\"Longitude\":-122.28837066650185}}"
}

• Choose Save.
• On the main function edit screen click Test with TestRequestEvent selected in the dropdown.
• Scroll to the top of the page and expand the Details section of the Execution result section.
• Verify that the execution succeeded and that the function result looks like the following:

{
    "statusCode": 201,
    "body": "{\"RideId\":\"SvLnijIAtg6inAFUBRT+Fg==\",\"Unicorn\":{\"Name\":\"Rocinante\",\"Color\":\"Yellow\",\"Gender\":\"Female\"},\"Eta\":\"30 seconds\"}",
    "headers": {
        "Access-Control-Allow-Origin": "*"
    }
}

## Deploy a Restful API:

you will use Amazon API Gateway to expose the Lambda function you built in the previous module as a RESTful API. This API will be accessible on the public Internet. It will be secured using the Amazon Cognito user pool you created in the previous module. Using this configuration, you will then turn your statically hosted website into a dynamic web application by adding client-side JavaScript that makes AJAX calls to the exposed APIs.

Create a New REST API:

• In the AWS Management Console, click Services then select API Gateway under Application Services

• Choose Create API. Underneath the Create new API section, make sure New API is selected.

• Select Build under REST API and enter WildRydes for the API Name.

• Choose Edge optimized in the Endpoint Type dropdown. Note: Edge optimized are best for public services being accessed from the Internet. Regional endpoints are typically used for APIs that are accessed primarily from within the same AWS Region.

• Choose Create API

Create a New resource and method:

• In the left nav, click on Resources under your WildRydes API.

• From the Actions dropdown select Create Resource.

• Enter ride as the Resource Name.

d. Ensure the Resource Path is set to ride.

e. Select Enable API Gateway CORS for the resource.

f. Click Create Resource.

g. With the newly created /ride resource selected, from the Action dropdown select Create Method.

• Select POST from the new dropdown that appears, then click the checkmark.

• Select Lambda Function for the integration type.

• Check the box for Use Lambda Proxy integration.

• Select the Region you are using for Lambda Region.

• Enter the name of the function you created in the previous module, RequestUnicorn, for Lambda Function.

• Choose Save. Please note, if you get an error that your function does not exist, check that the region you selected matches the one you used in the previous module.

• When prompted to give Amazon API Gateway permission to invoke your function, choose OK.

• Choose on the Method Request card.

• Choose the pencil icon next to Authorization.

• Select the WildRydes Cognito user pool authorizer from the drop-down list, and click the checkmark icon.

Deploy Your API:

From the Amazon API Gateway console, choose Actions, Deploy API. You'll be prompted to create a new stage. You can use prod for the stage name.

• In the Actions drop-down list select Deploy API.
• Select [New Stage] in the Deployment stage drop-down list.
• Enter prod for the Stage Name.
• Choose Deploy.
• Note the Invoke URL. You will use it in the next section.

Update the Website Config:

Update the /js/config.js file in your website deployment to include the invoke URL of the stage you just created. You should copy the invoke URL directly from the top of the stage editor page on the Amazon API Gateway console and paste it into the _config.api.invokeUrl key of your sites /js/config.js file. Make sure when you update the config file it still contains the updates you made in the previous module for your Cognito user pool.

• Open the config.js file in a text editor.
• Update the invokeUrl setting under the api key in the config.js file. Set the value to the Invoke URL for the deployment stage your created in the previous section.

window._config = {

    cognito: {

        userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb         

        userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv

        region: 'us-west-2' // e.g. us-east-2 

    }, 

    api: { 

        invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod, 

    } 

};

• Save the modified file and push it to your Git repository to have it automatically deploy to Amplify Console.

$ git add .
$ git commit -m "new_configuration"
$ git push

Validate your implementation:

Note: It is possible that you will see a delay between updating the config.js file in your S3 bucket and when the updated content is visible in your browser. You should also ensure that you clear your browser cache before executing the following steps.

• Update the ArcGIS JS version from 4.3 to 4.6 (newer versions will not work in this tutorial) in the ride.html file as:

<script src="https://js.arcgis.com/4.6/"></script>
 <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

• Save the modified file and push it to your Git repository to have it automatically deploy to Amplify Console.

• Visit /ride.html under your website domain.

• If you are redirected to the ArcGIS sign-in page.

• After the map has loaded, click anywhere on the map to set a pickup location.

• Choose Request Unicorn. You should see a notification in the right sidebar that a unicorn is on its way and then see a unicorn icon fly to your pickup local.

Terminate Resources:

• Delete your app in Amplify.
• Delete your Amazon Cognito user pool
• Delete your Serverless backend
• Delete your Rest API
• Delete your CloudWatch Log.

We have successfully Build a Serverless Web Application with AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB, and Amazon Cognito.

Thank you for reading. Follow and like this Post for more tech content.