DEV Community: Chinedu Orie

Automate Application Deployment to AWS Elastic Beanstalk with Terraform and CodePipeline

Chinedu Orie — Wed, 16 Oct 2024 14:26:50 +0000

I frequently deploy Node.js applications to AWS Elastic Beanstalk (EB). This process usually involves configuring the EB's load balancer, listeners, and security groups and setting up a CodePipeline for continuous deployment of updates.

Handling the processes above manually is tedious and prone to errors that can keep you debugging for days. Another challenging task is tearing down the resources and cleaning up all related artefacts.

After days of trial and error and research, I've developed a Terraform code to handle the provisioning and de-provisioning with just two commands: terraform apply and terraform destroy.

Enough of theories; let's get to work!

Warning: The provided infrastructure configuration is intended for development purposes only. It may not meet the security standards required for production environments. Please implement additional security measures before deploying in production.

Prerequisites

AWS account credentials
Terraform CLI
Node.js Application on GitHub repository
Route 53 Hosted Zone for the domain name
Certificate for the domain name in AWS Certificate Manager
Ensure that you have buildspec.yml file in the root of the repository

AWS CodeBuild uses the buildspec.yml file to define the build process for your application. It specifies the commands and settings that CodeBuild uses to build and package your application.

Once the prerequisites above have been met, follow the steps below. Alternatively, you can clone the repository.

Step 1: Create a directory for the terraform codes

mkdir tf && cd tf

Step 2: Initialize Terraform

terraform init

Step 3: Create a terraform workspace

terraform workspace new dev # Replace dev with the name of your workspace

Step 4: Create `variables.tf` file and paste the code below.

# variables.tf

variable "solution_stack_name" {
  type = string
  description = "The solution stack name to use for the Elastic Beanstalk environment e.g. 64bit Amazon Linux 2023 v6.0.3 running Node.js 18"
}
variable "tier" {
  type = string
  description = "The tier to use for the Elastic Beanstalk environment e.g. WebServer"
}


variable "instance_type" {
  default =  "t2.micro"
  description = "The instance type to use for the Elastic Beanstalk environment e.g. t2.micro"
}

variable "minsize" {
  default = 1
  description = "The minimum number of instances to use for the Elastic Beanstalk environment e.g. 1"
}

variable "maxsize" {
  default = 2
  description = "The maximum number of instances to use for the Elastic Beanstalk environment e.g. 2"
}

variable "certificate_arn" {
  type = string
  description = "The ARN of the certificate to use for the ELB e.g. arn:aws:acm:region:account-id:certificate/certificate-id"
}

variable "elb_policy_name" {
  default = "ELBSecurityPolicy-2016-08"
  description = "The name of the ELB policy to use e.g. ELBSecurityPolicy-2016-08"

}

variable "hosted_zone" {
  type = string
  description = "The hosted zone for the project e.g. example.com"
}

variable "project_name" {
  type = string
  description = "The name of the project e.g. project-name"
}

variable "elastic_beanstalk_env" {
  type = map(string)
  description = "The environment variables for the Elastic Beanstalk environment e.g. { \"key\" = \"value\" }"
}

variable "codebuild_env" {
  type = map(string)
  description = "The environment variables to use for the build e.g. { \"key\" = \"value\" }"
}

variable "build_image" {
  type = string
  default = "aws/codebuild/standard:7.0"
}

variable "repository_id" {
  type = string
  description = "The ID of the repository to use for the build e.g nedssoft/repository-name. nedssoft is the Github user name"
}

variable "branch_name" {
  type = string
  description = "The branch name to use for the build e.g. main"
}

variable "repository_url" {
  type = string
  description = "The URL of the repository to use for the build e.g. https://github.com/nedssoft/repository-name.git"
}

The variables.tf file defines and exposes variables for use by other files.

Step 5: Create `terraform.tfvars` file and paste the code below.

# terraform.tfvars
project_name = "project-name"
hosted_zone = "example.com"
instance_type       = "t2.medium"
minsize             = 1
maxsize             = 4
tier = "WebServer"
solution_stack_name= "64bit Amazon Linux 2023 v6.0.3 running Node.js 18"
certificate_arn = "arn:aws:acm:region:account-id:certificate/certificate-id"

elastic_beanstalk_env = {
  "KEY" = "VALUE"
}

codebuild_env = {
  "KEY" = "VALUE"
}

repository_id = "nedssoft/repository-name"
branch_name = "branch-name"
repository_url = "https://github.com/nedssoft/repository-name.git"

The terraform.tfvars is where you set the values for variables declared in variables.tf.

Step 6: Create `main.tf` file and paste the code below.

# main.tf

terraform {

# uncomment this if you want to use a backend
# backend "s3" {
#     bucket = "project-name-terraform-state-bucket"
#     key    = "terraform.tfstate"
#     region = "eu-west-2"
#     dynamodb_table =  "project-name-terraform-state-lock"
#     encrypt = true
#   }

  required_providers {
    aws = {
      source  = "hashicorp/aws"
      version = "~> 3.0"
    }
  }
}

provider "aws" {
  region = "eu-west-2" # change this to your region

  # use this if you want to use a profile
  # profile = "profile-name"

  # use this if you are not using a profile
  access_key = "AWS_ACCESS_KEY"
  secret_key = "AWS_SECRET_KEY"
}

data "aws_caller_identity" "current" {}
data "aws_region" "current" {}

locals {
  env = terraform.workspace
  base_name = format("%s-%s",var.project_name, terraform.workspace)
  account_id = data.aws_caller_identity.current.account_id
  region = data.aws_region.current.name
}

In the provider directive, set the access_key and secret_key or use AWS credentials profile name as explained in the comments in main.tf.

Step 7: Create `vpc.tf` and paste the code below:


# vpc.tf

 data "aws_vpc" "default_vpc" {
  default = true
}

data "aws_subnet_ids" "default_subnet" {
  vpc_id = data.aws_vpc.default_vpc.id
}

We are simply reading information from the default VPC; you can replace it if you use a custom VPC.

Step 8: Elastic Beanstalk - Create `eb.tf` and paste the code below:


# eb.tf

# Create elastic beanstalk application

resource "aws_elastic_beanstalk_application" "elasticapp" {
  name = "${local.base_name}-app"
}

resource "aws_security_group" "instances" {
  name = "${local.base_name}-sg"
}

resource "aws_security_group_rule" "allow_http_inbound" {
  type              = "ingress"
  security_group_id = aws_security_group.instances.id

  from_port   = 80
  to_port     = 80
  protocol    = "tcp"
  source_security_group_id = aws_security_group.alb.id
}
resource "aws_security_group_rule" "allow_https_inbound" {
  type              = "ingress"
  security_group_id = aws_security_group.instances.id
  from_port   = 443
  to_port     = 443
  protocol    = "tcp"
  cidr_blocks = ["0.0.0.0/0"]
}


resource "aws_security_group" "alb" {
  name = "${local.base_name}-alb-sg"
}

resource "aws_security_group_rule" "allow_alb_http_inbound" {
  type              = "ingress"
  security_group_id = aws_security_group.alb.id

  from_port   = 80
  to_port     = 80
  protocol    = "tcp"
  cidr_blocks = ["0.0.0.0/0"]

}
resource "aws_security_group_rule" "allow_alb_https_inbound" {
  type              = "ingress"
  security_group_id = aws_security_group.alb.id

  from_port   = 443
  to_port     = 443
  protocol    = "tcp"
  cidr_blocks = ["0.0.0.0/0"]

}

resource "aws_security_group_rule" "allow_alb_all_outbound" {
  type              = "egress"
  security_group_id = aws_security_group.alb.id

  from_port   = 0
  to_port     = 0
  protocol    = "-1"
  cidr_blocks = ["0.0.0.0/0"]

}

# Create elastic beanstalk Environment

resource "aws_elastic_beanstalk_environment" "beanstalkappenv" {
  name                = "${local.base_name}-env"
  application         = aws_elastic_beanstalk_application.elasticapp.name
  solution_stack_name = var.solution_stack_name
  tier                = var.tier

  setting {
    namespace = "aws:ec2:vpc"
    name      = "VPCId"
    value     = data.aws_vpc.default_vpc.id
  }

  setting {
    namespace = "aws:autoscaling:launchconfiguration"
    name      = "IamInstanceProfile"
    value     =  "aws-elasticbeanstalk-ec2-role"
  }
  setting {
    namespace = "aws:autoscaling:launchconfiguration"
    name      = "SecurityGroups"
    value     = aws_security_group.instances.id
  }
  setting {
    namespace = "aws:ec2:vpc"
    name      = "AssociatePublicIpAddress"
    value     =  "True"
  }

  setting {
    namespace = "aws:ec2:vpc"
    name      = "Subnets"
    value     = join(",", data.aws_subnet_ids.default_subnet.ids)
  }
  setting {
    namespace = "aws:elasticbeanstalk:environment:process:default"
    name      = "MatcherHTTPCode"
    value     = "200"
  }
  setting {
    namespace = "aws:elasticbeanstalk:environment"
    name      = "LoadBalancerType"
    value     = "application"
  }
  setting {
    namespace = "aws:autoscaling:launchconfiguration"
    name      = "InstanceType"
    value     = var.instance_type
  }
  setting {
    namespace = "aws:ec2:vpc"
    name      = "ELBScheme"
    value     = "internet facing"
  }
  setting {
    namespace = "aws:autoscaling:asg"
    name      = "MinSize"
    value     = var.minsize
  }
  setting {
    namespace = "aws:autoscaling:asg"
    name      = "MaxSize"
    value     = var.maxsize
  }
  setting {
    namespace = "aws:elasticbeanstalk:healthreporting:system"
    name      = "SystemType"
    value     = "enhanced"
  }

  setting {
    namespace = "aws:elbv2:loadbalancer"
    name      = "SecurityGroups"
    value     = aws_security_group.alb.id
  }

  setting {
    namespace = "aws:elbv2:listener:443"
    name      = "Protocol"
    value     = "HTTPS"
  }
    setting {
    namespace = "aws:elbv2:listener:443"
    name      = "SSLCertificateArns"
    value     = var.certificate_arn
  }

   setting {
    namespace = "aws:elbv2:listener:443"
    name      = "SSLPolicy"
    value     = var.elb_policy_name
  }

  dynamic "setting" {
    for_each = var.elastic_beanstalk_env
    content {
      namespace = "aws:elasticbeanstalk:application:environment"
      name      = setting.key
      value     = setting.value
    }
  }

  setting {
    namespace = "aws:elasticbeanstalk:application:environment"
    name      = "API_ENV"
    value     = local.env == "prod" ? "production": "staging"
  }

}

data "aws_route53_zone" "selected" {
  name = var.hosted_zone
}

data "aws_elastic_beanstalk_hosted_zone" "this" {}


resource "aws_route53_record" "beanstalkappenv" {
  zone_id = data.aws_route53_zone.selected.zone_id
  name    =  local.env != "prod" ? "${local.base_name}.${var.hosted_zone}" : "${var.project_name}.${var.hosted_zone}"
  type    = "A"

  alias {
   name    = aws_elastic_beanstalk_environment.beanstalkappenv.cname
   zone_id = "${data.aws_elastic_beanstalk_hosted_zone.this.id}"
    evaluate_target_health = true
  }
}

Step 9: Codebuild - Create `codebuild.tf` file and paste the code:


# codebuild.tf

resource "aws_s3_bucket" "build_artifacts" {
  bucket = "${local.base_name}-build-artifacts"
}

# Uncomment to enable cloudwatch logging
# resource "aws_cloudwatch_log_group" "codebuild_log_group" {
#   name = "${local.base_name}-codebuild-log-group"
# }

# Uncomment to enable cloudwatch logging
# resource "aws_cloudwatch_log_stream" "codebuild_log_stream" {
#   name           = "${local.base_name}-codebuild-log-stream"
#   log_group_name = aws_cloudwatch_log_group.codebuild_log_group.name
# }

data "aws_iam_policy_document" "assume_role" {
  statement {
    effect = "Allow"

    principals {
      type        = "Service"
      identifiers = ["codebuild.amazonaws.com"]
    }

    actions = ["sts:AssumeRole"]
  }
}
resource "aws_iam_role" "build_role" {
  name               = "${local.base_name}-build-role"
  assume_role_policy = data.aws_iam_policy_document.assume_role.json
}

data "aws_iam_policy_document" "coldbuild_policy" {

  statement {
    effect  = "Allow"
    actions = ["s3:*"]
    resources = [
      aws_s3_bucket.build_artifacts.arn,
      "${aws_s3_bucket.build_artifacts.arn}/*",
      aws_s3_bucket.pipeline_artifacts.arn,
      "${aws_s3_bucket.pipeline_artifacts.arn}/*",
    ]
  }

  statement {
    effect = "Allow"

    actions = [
      "logs:CreateLogGroup",
      "logs:CreateLogStream",
      "logs:PutLogEvents",
    ]

    resources = ["*"]
  }
}

resource "aws_iam_role_policy" "coldbuild_policy" {
  role   = aws_iam_role.build_role.name
  policy = data.aws_iam_policy_document.coldbuild_policy.json
}

resource "aws_codebuild_project" "build_project" {
  name          = "${local.base_name}-build-project"
  description   = "${local.base_name} build project"
  build_timeout = 5
  service_role  = aws_iam_role.build_role.arn

  artifacts {
    type = "NO_ARTIFACTS"
  }

  cache {
    type     = "S3"
    location = aws_s3_bucket.build_artifacts.bucket
  }

  environment {
    compute_type                = "BUILD_GENERAL1_MEDIUM"
    image                       = var.build_image
    type                        = "LINUX_CONTAINER"
    image_pull_credentials_type = "CODEBUILD"

    dynamic "environment_variable" {
      for_each = var.codebuild_env
      content {
        name  = environment_variable.key
        value = environment_variable.value
      }
    }

  }

  logs_config {
    cloudwatch_logs {
      status   = "DISABLED"
      # Uncomment if cloudwatch logging is enabled
      # group_name  = aws_cloudwatch_log_group.codebuild_log_group.name
      # stream_name = aws_cloudwatch_log_stream.codebuild_log_stream.name
    }

    s3_logs {
      status   = "DISABLED"
      # Uncomment if s3 logging is enabled
      # location = "${aws_s3_bucket.build_artifacts.bucket}/build-logs"
    }
  }

  source {
    type            = "GITHUB"
    location        = var.repository_url
    git_clone_depth = 1

    git_submodules_config {
      fetch_submodules = true
    }
  }

  source_version = var.branch_name

  tags = {
    # change this to your tags
    Environment = "Test"
  }
}

Step 10: CodePipeline - Create `codepipeline.tf` file and paste

the code below:


# codepipeline.tf

resource "aws_codestarconnections_connection" "github_connection" {
  name     = "${local.base_name}-github-connection"

  # You will need to verify the connection in the AWS CodeStar Connections console.
  provider_type = "GitHub"
}

resource "aws_s3_bucket" "pipeline_artifacts" {
  bucket = "${local.base_name}-pipeline-artifacts"

  tags = {
    Name        = "${local.base_name}-pipeline-artifacts"
  }
}

data "aws_iam_policy_document" "codepipeline_assume_role" {
  statement {
    effect = "Allow"

    principals {
      type        = "Service"
      identifiers = ["codepipeline.amazonaws.com"]
    }

    actions = ["sts:AssumeRole"]
  }
}

resource "aws_iam_role" "codepipeline_role" {
  name = "${local.base_name}-codepipeline-role"

  assume_role_policy = data.aws_iam_policy_document.codepipeline_assume_role.json
}

data "aws_iam_policy_document" "codepipeline_policy" {
  statement {
    effect = "Allow"
    actions = [
      "codebuild:BatchGetBuilds",
      "codebuild:StartBuild",
      "elasticbeanstalk:*",
      "ec2:*",
      "elasticloadbalancing:*",
      "autoscaling:*",
      "cloudwatch:*",
      "s3:*",
      "cloudformation:*",
      "codestar-connections:UseConnection",
      "codestar-connections:GetConnection",
      "codestar-connections:ListConnections",
      "codestar-connections:GetIndividualAccountSetting",
      "codestar-connections:GetHostAccountSetting",
      "codestar-connections:ListHosts",
      "codestar-connections:ListInstallationTargets"
    ]
    resources = ["*"]
  }
}

resource "aws_iam_role_policy" "codepipeline_policy" {
  name = "${local.base_name}-codepipeline-policy"
  role = aws_iam_role.codepipeline_role.id

  policy = data.aws_iam_policy_document.codepipeline_policy.json
}

resource "aws_codepipeline" "deploy_pipeline" {
  name     = "${local.base_name}-deploy-pipeline"
  role_arn = aws_iam_role.codepipeline_role.arn

  artifact_store {
    location = aws_s3_bucket.pipeline_artifacts.bucket
    type     = "S3"
  }

  stage {
    name = "Source"
    action {
      name            = "Source"
      category        = "Source"
      owner           = "AWS"
      provider        = "CodeStarSourceConnection"
      version         = "1"
      output_artifacts = ["source_output"]
      configuration = {
        ConnectionArn = aws_codestarconnections_connection.github_connection.arn
        FullRepositoryId = var.repository_id
        BranchName = var.branch_name
      }
    }
  }

  stage {
    name = "Build"
    action {
      name            = "Build"
      category        = "Build"
      owner           = "AWS"
      provider        = "CodeBuild"
      version         = "1"
      input_artifacts = ["source_output"]
      output_artifacts = ["build_output"]
      configuration = {
        ProjectName = aws_codebuild_project.build_project.name
      }
    }
  }

  stage {
    name = "Deploy"
    action {
      name            = "Deploy"
      category        = "Deploy"
      owner           = "AWS"
      provider        = "ElasticBeanstalk"
      version         = "1"
      input_artifacts = ["build_output"]
      configuration = {
        ApplicationName = aws_elastic_beanstalk_application.elasticapp.name

        EnvironmentName = aws_elastic_beanstalk_environment.beanstalkappenv.name
      }
    }
  }
}

Step 11: Create `outputs.tf` file and paste the code below:


# outputs.tf

output "domain_name" {
  value = "https://${aws_route53_record.beanstalkappenv.name}/api"

}

You can add as many values you want to see in the outputs.tf, after provisioning the resources, terraform will retrieve the values and output it on the terminal.

Final Step

Run the following commands to provision the resources:

terraform plan

This will preview the changes that will be made afte the resources are provisioned

terraform apply

This will provision the resources, and you are done.

To de-provision the resources, run

terraform destroy

Note: you must empty the S3 buckets used by Codebuild and CodePipeline before de-provisioning the buckets.

Bonus - Terraform code for deploying frontend to AWS S3, Cloudfront with Codepipeline

https://github.com/nedssoft/s3-codepipeline-terrafrom

Secure Coding - Prevention Over Correction.

Chinedu Orie — Tue, 03 Sep 2024 10:44:20 +0000

Secure Coding is the art of writing codes with a security-first mindset.

SecDevOps is such a buzzword these days that I am sure you have encountered it a couple of times. While this article is not about SecDevOps, a three-way handshake between security, development, and operations, it narrows down to how to put on your security helmet while writing codes: secure coding.

As cyber threats and attacks continue to increase, it is extremely important to prioritize security when building applications. Secure coding helps prevent potential attacks and vulnerabilities.

This article comprises of two parts:

Common Software Vulnerabilities and mitigations
Secure Coding Best Practices

If you are familiar with software vulnerabilities, skip to the Secure Coding Best Practices part.

Common Software Vulnerabilities

Vulnerabilities are loopholes in software programs. The goal of a threat actor is to find and exploit these vulnerabilities, thereby launching successful attacks on software applications. Understanding these vulnerabilities is the first step to secure coding.

1. SQL Injection

Structured Query Language (SQL) is a standard programming language used to manage and manipulate data stored in relational databases. SQL queries can perform basic create, read, update, and delete (CRUD) functions. SQL Injection occurs when an attacker injects a malicious SQL query into an application through input data.

The developer has created an input field to receive data that is run backend to either carry out a post to or pull from the database. Instead of performing the intended operation, the input data adds, modifies, reads, or deletes data from the database or, worse still, shuts down the database itself.

Example of a vulnerable SQL code:

SELECT * FROM users WHERE email = 'input_value';

Below is an SQL Injection to exploit the above vulnerability

' OR '1'='1

With the above as an input, the query becomes

SELECT * FROM users WHERE email = '' OR '1'='1';

Now, because '1'='1' will always be true, the attacker can read all the data in the users table. This can result in data exfiltration.

SQL Injection Mitigations

Proper input validations: This ensures the input conforms to the required format.
Escaping special characters: The special characters useful in SQL Injections include but are not limited to, ', ", --, =, ;, \0, #, |. Escaping these characters will make user inputs less harmful.
Using prepared statements and parameterized queries: This separates input data from code

2. NoSQL Injection (Non-relational Databases)

One would think that SQL injections are the battle only for those who use SQL databases, but they are not. NoSQL databases like MongoDB have their share of Injection vulnerabilities.

Example of a vulnerable NoSQL code:

db.users.find({ "email": input_data });

Example of an injection input data:

input_data = { "$ne": null }

Resulting Query:

db.users.find({ "email": { "$ne": null } }

Result:

The query above will return all users where the email is not null.

NoSQL Injection Mitigations

Input validations and sanitizations
Use of secure Object-Document Mappers which offer built-in protections against injections

3. Object-Relational Mapper (ORM) Injection

This injection relies on vulnerabilities in the ORM's generated codes. The ORM acts as a wrapper, exposing functions that make it easier to interact with the DB.

For example, in 2019, it was found that the popular Javascript ORM Sequelize was vulnerable to SQL injection attacks.

ORM Injection Mitigations

Use updated versions
Use ORMs with reputable security implementations

4. Null Byte Injection (`%00`):

The value %00 is called a Null Byte, meaning its presence is negligible. In this type of Injection, the attacker manipulates the data to bypass weak or improper validation/filtering mechanisms.

Example:

Suppose an attacker wants to upload a malicious script onto a victim’s server, knowing that the server only validates file extensions and allows .jpeg, .jpg, .png, etc. In that case, that attacker can bypass the extension validation using a Null Byte by naming the file thus:

malicious-script.php%00.png

The file above will be successfully uploaded to the server, and the server will ignore the %00.png and execute the malicious script.

Null Byte Injection Mitigations

Strict file type validation: Check the MIME (Multipurpose Internet Mail Extension) type of the file instead of relying on the extension.
Proper input validation: Sanitize filenames and reject null bytes in filenames.

5. Information Leakage:

This type of vulnerability occurs when an application inadvertently reveals sensitive information that can aid attackers in understanding its underlying technology and devising means of exploiting it.

Example:
Suppose an application returns X-Powered-By: Express or X-Powered-By: PHP/7.0.3 in its response header. This information will help an attacker understand that the underlying technology is Express.js or that the application is running PHP version 7.0.3. Armed with this information, the attacker can tailor its exploits accordingly.

Mitigations

Avoid verbose response headers.
Implement security headers such as Content-Security-Policy, Strict-Transport-Security, and Referrer-Policy to enhance the application's security.

6. Missing Security Headers or Security Misconfiguration:

When security headers like Content-Security-Policy (CSP), Strict-Transport-Security (HSTS), and X-Content-Type-Options are missing or not correctly configured, it leaves the application vulnerable to potential attacks such as man-in-the-middle attacks, cross-site scripting (XSS), MIME-type sniffing, etc.

Examples of Security Headers

6.1. Content-Security-Policy (CSP): This header whitelists the sources from which content can be loaded. By doing so, it prevents XSS attacks.

Example:

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; img-src 'self' data:;upgrade-insecure-requests

default-src 'self': By default, only resources from the exact origin of the page (i.e., the same domain) are allowed.
script-src 'self' https://trusted-cdn.com: JavaScript can only be loaded from the exact origin or https://trusted-cdn.com.
img-src 'self' data:: Images can be loaded from the exact origin or as inline base64-encoded data.
upgrade-insecure-requests: Automatically upgrades insecure requests (HTTP) to HTTPS.

6.2. Strict Transport Security (HSTS): This header ensures that the browser only communicates with the application over HTTPS, preventing man-in-the-middle and protocol downgrade attacks.

Example:

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

max-age=31536000: Instructs the browser to remember to use HTTPS for this site for the next 31,536,000 seconds (1 year).
includeSubDomains: This rule also applies to all site subdomains.
preload: Requests that the domain be included in the HSTS preload list, which means that browsers will enforce HSTS even on the first visit.

6.3. X-Content-Type-Options: This header restricts the browser's interpretation of the content type to the value set in the Content-Type header. Otherwise, the browser will try to guess and interpret the content type—a process called MIME-Type Sniffing.

Example:

Content-Type: text/plain
X-Content-Type-Options: nosniff

Let's assume an attacker uploads a malicious executable script but specifies the Content-Type as text/plain; if the browser were to sniff the content, it would interpret the content as an executable file that it is and, hence, execute it. But with the header above, it will rely on the Content-Type: text/plain header, which will not execute the harmful file.

7. Cross-Site Scripting (XSS):

Let's imagine a website is a street shop. XSS is like a sneaky dude who slips a note into the shop's display shelf. The note lures other customers to send their personal information to the sly dude.

In the context of an application, the note above is malicious Javascript that redirects users' sensitive information, such as Cookies, to the attacker.

The application is mainly vulnerable to XSS if it processes the user's input data without proper validation and sanitization, and it can allow scripts from untrusted sources to be executed on the browser.

There are two main types of XSS:

Reflected XSS: The malicious script is reflected off the web server and executed in the user's browser. An attacker can craft a URL containing a malicious payload and execute it when a victim clicks it.

Let's assume a website has a search feature that immediately renders that result in the user's browser; an attacker can craft a search URL as below:

http://example.com/search?q=<script>alert('XSS')</script>

When the link is clicked, the browser renders it as shown below:

<html>
<body>
    <h1>Search Results for: <script>alert('XSS')</script></h1>
</body>
</html>

The script then gets executed in the user's browser and viola! A successful XSS attack happens. In reality, the simple script above can be a more dangerous script that could steal a user's sensitive information and send it to the attacker.

Stored XSS: The script persists in the server and is executed each time the browser renders the content from the server.

Let's say a website has a forum where users can post comments; an attacker can inject a malicious script into the comment input field, which is sent to the server and stored. Anyone who visits the website and interacts with the malicious comment gets hooked.

XSS Mitigations

Ensure that any user input, reflected or stored, is adequately sanitized and HTML-encoded to prevent script execution
Validate users' input to conform to the required data format.
Use security headers like Content-Security-Policy to restrict sources from where scripts are loaded.
For more details, read OWASP XSS Prevention Cheat Sheet

8. Directory Traversal

This vulnerability exists when web servers allow operators that can be used to navigate through the directories and filesystem of the application and access unintended files. Consider a web server with the directory structure shown below:

The directory structure above indicates that the web pages live in the /var/www/html directory. Assuming the website were www.example.com, the URL www.example.com/profile.php would point to /var/www/html/profile.php on the server.

An attack can use the knowledge of Linux system directory navigation to try to access known files such as the /etc/shadow which stores the encrypted password information of system user accounts by accessing the URL:

www.example.com/../../../etc/shadow

If successful, the attacker will feast on the system user account credentials.

Directory Traversal Mitigations

Sanitize and normalize user-supplies input especially when it relates to file paths, ensure operators such as .., /, etc are not allowed in the inputs
Whitelist all known good inputs that relates to file access
Use secure file access APIs that has built-in protection against directory traversal
Apply appropriate access control measures to sensitive files

9. Session Hijacking

Session hijacking occurs when an attacker gains unauthorized access to an authenticated user's session.

Imagine registering at a conference, you receive a badge signifying that you are a verified attendee. If someone unregistered steals your badge, they can pose as a verified attendee.

In a technical scenario, consider an application that issues a cookie after successful authentication, the cookie is to be used in subsequent authenticated communication with the server. The server does not care about how the cookie was generated as long as it's valid. If an attacker lays hold of this cookie, they can impersonate owner.

Session Hijacking Techniques

Cross-Site Scripting (XSS): If an application is vulnerable to XSS, an attacker can inject malicious scripts that can execute on the user's browser and send the user's session ID to the attacker.
Network Eavesdropping: If session IDs are transmitted over unsecured connections (HTTP), an attacker can intercept the session IDs using network traffic analyzers such as Wireshark
Brute Force: If the session ID is predictable, an attacker can guess the session ID by trying different values until they find a valid session ID. An example of a predictable session ID would be generating cookie tokens by encoding numerically incremented user IDs in a JWT.

Session Hijacking Mitigations

Use Secure Connections (HTTPS): Secured connections over HTTPS ensures that data is encrypted in-transit between the client and the server.
Use Secure Session Management: Ensure that cookies that store session IDs are marked with Secure and HttpOnly flags. Keep the session expiry limit low to reduce the hijacking window (a combination of access token cookie with short TTL and a refresh token with a longer TTL would be a good approach).
Use Session Timeouts: Log out users automatically after a period of inactivity
Use Unpredictable Session IDs: Ensure that session IDs are randomly generated, unique and unpredictable to minimize brute-force probability.

10. Cross-site Request Forgery (CSRF)

As the name implies, a request is forged on behalf of a user. The attacker exploits the user's existing authenticated session to trick the application into performing actions on their behalf without their knowledge.

There are 2 key factors that makes an application vulnerable to CSRF:

The request parameters are predictable
The application relies only on the session cookies to identify the requester, and the SameSite attribute of the cookie is misconfigured. The value of SameSite that provides the best protection against CSRF is Strict, followed by Lax. See

Example:

Consider a hypothetical banking application vulnerable to CSRF attack. To transfer fund from account A to account B, the user needs to make the request below:

POST /transfer-funds HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 48
Cookie: session=WaT9lKmXYH8wJq4U7xP3rFv2BnNvG6eX

accountA=1234567890&accountB=0987654321&amount=100

An attacker can craft a webpage as shown below:

<html lang="en">
<body>
    <form id="csrfForm" action="https://example.com/transfer-funds" method="POST">
        <input type="hidden" name="accountA" value="1234567890">
        <input type="hidden" name="accountB" value="0987654321">
        <input type="hidden" name="amount" value="100">
    </form>

    <script>
        // Automatically submit the form when the page loads
        document.getElementById('csrfForm').submit();
    </script>
</body>
</html>

Notice that the inputs are hidden and the form submits automatically on page load.

The attacker can use similar methods as Reflected XSS to deliver the attack to the victim by crafting a link which when the victim clicks it executes the attack. If the victim is authenticated in the banking app on the same browser at the time of clicking the link, the session cookie is sent alongside the form data, and the attacker succeeds transferring fund from the victim's account to their designated account.

CSRF Mitigations

Use CSRF Tokens: CSRF tokens are unique secrets that the server issues the client which the client must include with sensitive requests to the server. Instead of relying only on the session cookie, the CSRF tokens offers another layer of protection against CSRF attacks.
Set SameSite Cookie Attribute: SameSite attribute defines the sites the browser can include a given cookie when requests are sent to them. While Strict offers the best protection against CSRF, Lax permits cross-site for less sensitive GET requests.

Secure Coding Best Practices

From the foregoing, it is apparent that a majority of the software vulnerabilities and the associated threats can be prevented at the point of writing the code. For each of the vulnerabilities considered, there were a few suggested mitigation strategies, and by applying those strategies, you are practising Secure Coding.

Below are the summarized OWASP Secure Coding best practices:

Input Validation: Validate all user inputs, including HTTP headers and database queries, to prevent SQL injection and XSS attacks. Implement input validation centrally and sanitize potentially harmful characters.
Authentication Security: Centralize authentication, enforce HTTPS, use security-verified libraries, and validate authentication data securely. Avoid revealing specific authentication errors and enforce multi-factor authentication for sensitive accounts.
Server Authentication: Ensure SSL/TLS usage with proper validation, avoid weak client authentication, and ensure secure handling of authentication credentials, including storing them in a secure location like Secrets Manager.
Password Management: Enforce password complexity and length, hash and salt stored passwords, limit password reset attempts, and prevent password re-use. Disable remember me functionality for password fields.
Authorization Controls: Implement rule-based access control, enforce least privilege, re-authenticate users for critical operations, and prevent unauthorized access to sensitive URLs. Avoid including authorization information in query strings.
Session Management: Use secure session management controls, ensure session identifiers are not exposed, and enforce session timeouts. Implement per-session strong tokens to prevent CSRF attacks and ensure secure logout procedures.
JWT Security: Use secure algorithms and key lengths, validate JWT tokens and fields, ensure secure communication via HTTPS, and frequently rotate keys. Avoid using the "none" algorithm and ensure the integrity of JWTs.
Output Encoding: Encode all user-supplied data before outputting it to prevent XSS attacks. Use server-side encoding and sanitize all data, especially in unsafe contexts like JavaScript functions or URL handling.
Canonicalization: Convert input data to a standard format, such as UTF-8, to prevent spoofing attacks. Ensure proper validation of URLs and parameters to avoid insecure direct object references.
JSON Security: Use application/json Content-Type, avoid eval() for parsing JSON, and ensure proper error handling for duplicate keys and numbers. Sanitize all data before serializing it to JSON to prevent JSON injection attacks.
Data Protection: Encrypt data both in transit and at rest.
Handle all Errors and Exceptions: Ensure that the application handles all error gracefully and that errors do not reveal too much information.
Implement Security Logging and Monitoring: This ensures that problems are identified early enough, and also helps in troubleshooting the problems.

More Resources

https://portswigger.net/web-security/nosql-injection
https://owasp.org/www-community/attacks/xss/
OWASP XSS Prevention Cheat Sheet
Cross-site request forgery (CSRF)

OWASP Secure Coding

Build API with GraphQL, Node.js, and Sequelize

Chinedu Orie — Thu, 01 Oct 2020 07:46:41 +0000

What is GraphQL?

Unlike the traditional RESTFUL architecture where an endpoint returns a set of data designated by the API whether you want it or not, GraphQL allows you to cherry-pick the exact data you want from what the API provides.

Let's assume you want to access some items in a warehouse, there are two ways to achieve it: METHOD A and METHOD B. For each of the methods, you need the correct Access key to access the items in the warehouse. With METHOD A, you'll get a copy of the entire items in the warehouse and you would need to select what you actually need out of what you already received. With METHOD B, you have the privilege to specify the exact items you need and will only be sent those items, you don't need the entire copy of the warehouse. METHOD A is RESTFUL architecture while METHOD B is graphQL.

Read more about GraphQL on the graphQL website.

In this article, we'll focus on how to build an API using graphQL, Node.js, Sequelize, and PostgreSQL. We will build a simple blog API that has Users, Posts and Comments. A user should be able to authenticate (register, login and create a post, view posts, create comments and view comments.

Explanation of terms
- Schemas and Types
- Resolver
- Query and Mutation
- Context
Setup project and Install Dependencies
Create Database Migrations and Models using Sequelize
Create GraphQL Schema for User, Post, and Comment
- User Schema
- Post Schema
- Comment Schema
Create Resolvers
- User Resolver
  - Request Authentication
- Post Resolver
- Comment Resolver
Conclusion
More Resources
What next?

Explanation of terms

Schemas and Types: Schema defines the structure of the data that can be queried while Type defines the format of the data like the data type we already know. Read more about Schemas and Types here
Resolver: A function on a GraphQL server that's responsible for fetching the data for a single field or the entire schema.
Query and Mutation: These are special GraphQL Types. Query represents the GET request in REST API while Mutation represents POST, PUT, DELETE requests in REST API. Ream more
Context: Context is a global object in GraphQL. Data available in context is shared among all resolvers.

Keep those explanations in mind as we get ready to start coding things out.

There are a number of libraries that implement GraphQL, in this article, I'll be using the Apollo GraphQL.

To follow along, clone the repository used in this article here

Setup project and Install Dependencies

Open your terminal and create a folder for the project.



$ mkdir graphql-node-sequelize && cd graphql-node-sequelize

$ npm init -y

Install dependencies



$ npm install express graphql apollo-server-express bcryptjs core jsonwebtoken pg pg-hstore sequelize dotenv

$ npm install -D nodemon

Setup Server



$ mkdir api graphql 

$ cd graphql && mkdir resolvers schemas context

We create a folder for the server called api and another one called graphql for housing resolvers, schemas and context.

Note this structuring is completely my opinion and does not in any way mean a standard, feel free to structure your project the way you like.

Create root schema In the schemas folder, create an index.js file and copy the code below into it:



// graphql/schemas/index.js

const { gql } = require('apollo-server-express');

const rootType = gql`
 type Query {
     root: String
 }
 type Mutation {
     root: String
 }

`;

module.exports = [rootType];

Create root resolver In the resolvers folder, create an index.js file and copy the code below into it:



// graphql/resolvers/index.js

module.exports = [];

Create the context In the context folder, create an index.js file and copy the code below into it:



// graphql/context/index.js

module.exports = ({ req }) => {
  return {};
};

Create server In the api folder, create a server.js file and copy the code below into it:



// api/server.js

const express = require('express');
const { createServer } = require('http');
const { ApolloServer } = require('apollo-server-express');
const cors = require('cors');
const typeDefs = require('../graphql/schemas');
const resolvers = require('../graphql/resolvers');
const context = require('../graphql/context');
const app = express();

app.use(cors());

const apolloServer = new ApolloServer({
  typeDefs,
  resolvers,
  context,
  introspection: true,
  playground: {
    settings: {
      'schema.polling.enable': false,
    },
  },
});

apolloServer.applyMiddleware({ app, path: '/api' });

const server = createServer(app);

module.exports = server;

Next up, create an index.js file at the root of the project folder and add the code below into it:



// ./index.js

require('dotenv').config();

const server = require('./api/server');

const port = process.env.PORT || 3301;

process.on('uncaughtException', (err) => {
  console.error(`${(new Date()).toUTCString()} uncaughtException:`, err);
  process.exit(0);
});

process.on('unhandledRejection', (err) => {
  console.error(`${(new Date()).toUTCString()} unhandledRejection:`, err);
});


server.listen({ port }, () => console.log(
  `🚀 Server ready at http://localhost:${port}/api`,
));

Let's add start scripts to the package.json



...
"scripts": {
    "dev": "nodemon index.js",
    "start": "node index.js"
  },
...

Now, we are set to start the server



$ nm run dev

🚀 Server ready at http://localhost:3301/api

When you visit http://localhost:3301/api you'd see the playground as shown by the screenshot below:

The playground is a GUI for testing the GraphQL API. It also contains the documentation and the schema for the API.

Create Database Migrations and Models using Sequelize

The database schema diagram is shown below:

If you are new to Sequelize, you could checkout this article on getting started with Sequelize

Create .sequelizerc file ```

$ touch .sequelizerc

- Copy the code below into the `.sequelizerc` file

// ./sequelizerc

const path = require('path');

module.exports = {
"config": path.resolve('./database/config', 'config.js'),
"models-path": path.resolve('./database/models'),
"seeders-path": path.resolve('./database/seeders'),
"migrations-path": path.resolve('./database/migrations')
};

Next up, run the command below:

$ npx sequelize-cli init

The command above will create a `database` folder containing the migrations, models, seeds, and config folders.

We need to make a few changes to the `config/config.js` and `models/index.js` files as follows.

```js


// database/config/config.js

require('dotenv').config();

module.exports = {
  development: {
    username: 'root',
    password: null,
    database: 'database_development',
    host: '127.0.0.1',
    dialect: 'postgres',
    use_env_variable: 'DEV_DATABASE_URL',
  },
  test: {
    username: 'root',
    password: null,
    database: 'database_test',
    host: '127.0.0.1',
    dialect: 'postgres',
    host: '127.0.0.1',
    dialect: 'postgres',
    use_env_variable: 'TEST_DATABASE_URL',
  },
  production: {
    username: 'root',
    password: null,
    database: 'database_production',
    host: '127.0.0.1',
    dialect: 'postgres',
    host: '127.0.0.1',
    dialect: 'postgres',
    use_env_variable: 'DATABASE_URL',
  },
};



// database/models/index.js

require('dotenv').config();

const fs = require('fs');
const path = require('path');
const Sequelize = require('sequelize');

const basename = path.basename(__filename);
const env = process.env.NODE_ENV || 'development';

const config = require('../config/config')[env];

const db = {};

let sequelize;
if (config.use_env_variable) {
  sequelize = new Sequelize(process.env[config.use_env_variable], config);
} else {
  sequelize = new Sequelize(
    config.database,
    config.username,
    config.password,
    config,
  );
}

fs.readdirSync(__dirname)
  .filter((file) => (
    file.indexOf('.') !== 0 && file !== basename && file.slice(-3) === '.js'
  ))
  .forEach((file) => {
    const model = sequelize.import(path.join(__dirname, file));
    db[model.name] = model;
  });

Object.keys(db).forEach((modelName) => {
  if (db[modelName].associate) {
    db[modelName].associate(db);
  }
});

db.sequelize = sequelize;
db.Sequelize = Sequelize;

module.exports = db;

Remember to replace the database name with your database name. If you are using postgres connection string, you could pass the env name of the connection string to use_env_variable.

Next run the command below to generate the migrations for the database schema:



$ npx sequelize-cli model:generate --name User --attributes name:string,email:string,password:string

$ npx sequelize-cli model:generate --name Post --attributes title:string,content:text,userId:integer

$ npx sequelize-cli model:generate --name Comment --attributes content:text,userId:integer,postId:integer

Let's add the foreign key constraints to the userId and postId in Posts and Comments migrations:



...
userId: {
        type: Sequelize.INTEGER,
        references: {
          model: {
            tableName: 'Users',
          },
          key: 'id',
        },
      },
...



...
postId: {
        type: Sequelize.INTEGER,
        references: {
          model: {
            tableName: 'Posts',
          },
          key: 'id',
        },
      },

...

Next up, let's define the relationships between the models, edit the models as shown below:



// database/models/user.js


const bcrypt = require('bcryptjs');

module.exports = (sequelize, DataTypes) => {
  const User = sequelize.define(
    'User',
    {
      name: DataTypes.STRING,
      email: DataTypes.STRING,
      password: DataTypes.STRING,
    },
    {
      defaultScope: {
        rawAttributes: { exclude: ['password'] },
      },
    },
  );

  User.beforeCreate(async (user) => {
    user.password = await user.generatePasswordHash();
  });
  User.prototype.generatePasswordHash = function () {
    if (this.password) {
      return bcrypt.hash(this.password, 10);
    }
  };
  User.associate = function (models) {
    // associations can be defined here
    User.hasMany(models.Post, { foreignKey: 'userId', as: 'posts' });
  };
  return User;
};

Do you understand what's going on in the code snippet above?

Defined the many-to-many relationship between User and Post. A user has many posts.
Added the defaultScope options to ensure that the password is not returned as part of the JSON result when the User model is queried.
Added beforeCreate hook which automatically hashes the password using bcrypt.js under the hood



// database/models/post.js

module.exports = (sequelize, DataTypes) => {
  const Post = sequelize.define(
    'Post',
    {
      title: DataTypes.STRING,
      content: DataTypes.TEXT,
      userId: DataTypes.INTEGER,
    },
    {},
  );
  Post.associate = function (models) {
    // associations can be defined here
    Post.belongsTo(models.User, { foreignKey: 'userId', as: 'author' });
    Post.hasMany(models.Comment, { foreignKey: 'postId', as: 'comments' });
  };
  return Post;
};



// database/models/comment.js

module.exports = (sequelize, DataTypes) => {
  const Comment = sequelize.define(
    'Comment',
    {
      content: DataTypes.TEXT,
      userId: DataTypes.INTEGER,
      postId: DataTypes.INTEGER,
    },
    {},
  );
  Comment.associate = function (models) {
    Comment.belongsTo(models.User, { foreignKey: 'userId', as: 'author' });
    Comment.belongsTo(models.Post, { foreignKey: 'postId', as: 'post' });
  };
  return Comment;
};

Now that we have defined the models relationships, we'll be able to use Sequelize mixins for example, post.getAuthor(), user.getPosts() etc.

If you've created the database and provided the config credentials, it's time to run migration:



$ npx sequelize-cli db:migrate

Create GraphQL Schema for User, Post, and Comment

User Schema

Create a file named user.js in the schemas folder and copy the code below into it:



// graphql/schema/user.js

const { gql } = require('apollo-server-express');

module.exports = gql`

 type User {
     id: Int!
     name: String!
     email: String!
     password: String!
     posts: [Post!]
 }

 extend type Mutation {
     register(input: RegisterInput!): RegisterResponse
     login(input: LoginInput!): LoginResponse
 }

 type RegisterResponse {
    id: Int!
    name: String!
    email: String!
 }

 input RegisterInput {
     name: String!
     email: String!
     password: String!
 }

input LoginInput {
     email: String!
     password: String!
 }

  type LoginResponse {
    id: Int!
    name: String!
    email: String!
    token: String!
 }
`;

What's going on in the snippet above?

We created a type User, and made all the fields required using the bang !
In the User type, we added a field posts which returns type Post, this makes it possible for us to query the posts created by a user
[Post!] means that it's okay for a user not to have a post, but if she/he does have, it must be of type Post
We defined two mutations, register, and login, these serve as the register and login endpoints respectively

Post Schema

Create post.js file in schemas and copy the code below into it:



// graphql/schemas/post.js

const { gql } = require('apollo-server-express');

module.exports = gql`

 type Post {
     id: Int!
     title: String!
     content: String!
     author: User!
     comments: [Comment!]
     createdAt: String

 }

extend type Query {
    getAllPosts: [Post!]
    getSinglePost(postId: Int!): Post
}

 extend type Mutation {
     createPost(title: String!, content: String!): CreatePostResponse
 }

 type CreatePostResponse {
    id: Int!
    title: String!
    content: String!
    createdAt: String!
 }

`;

Again, we created type Post. This time we added two queries for fetching all posts and a single post and another mutation for creating a new post.

Comment Schema

Create comment.js file in schemas and copy the code below into it:



// graphql/schemas/comment.js

const { gql } = require('apollo-server-express');

module.exports = gql`

 type Comment {
     id: Int!
     content: String!
     author: User!
     post: Post!
     createdAt: String

 }

 extend type Mutation {
     createComment(content: String!, postId: Int!): CreateCommentResponse
 }

 type CreateCommentResponse {
    id: Int!
    content: String!
    createdAt: String!
 }

`;

Notice that the Comment type has post and author which return type Post and User respectively.

Lastly, let's update the root schema, update the schemas/index.js as shown below:



// graphql/schemas/index.js

const { gql } = require('apollo-server-express');
const userType = require('./user')
const postType = require('./post')
const commentType = require('./comment')

const rootType = gql`
 type Query {
     root: String
 }
 type Mutation {
     root: String
 }

`;

module.exports = [rootType, userType, postType, commentType];

Next up, we will create the resolvers for the schemas.

Create Resolvers

First off, let's look at the structure of a resolver function.



 register(root, args, context, info) {

}

The above snippet defines a resolver named register. A resolver function takes four arguments:

root: This is the result of the parent resolver. We'll see the application later.
args: The arguments or data provided by the graphQL query. This can be seen as the request payload in REST API.
context: An object available to all resolvers. Any data that should be globally accessible to all resolvers are placed in the context. For example, we can pass the Sequelize models to the context.
info: An object which contains specific information to the correct query. This is only useful is advanced cases.

Now that we have understood what a resolver is, let us create the resolvers for User schema.

User Resolver
Let us create resolvers for register and login mutations in the User schema. Create a new file user.js in the resolvers folder and copy the following code into it:



// graphql/resolvers/user.js

const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const { AuthenticationError } = require('apollo-server-express');

const { User } = require('../../database/models');

module.exports = {
  Mutation: {
    async register(root, args, context) {
      const { name, email, password } = args.input;
      return User.create({ name, email, password });
    },

    async login(root, { input }, context) {
      const { email, password } = input;
      const user = await User.findOne({ where: { email } });
      if (user && bcrypt.compareSync(password, user.password)) {
        const token = jwt.sign({ id: user.id }, 'mySecret');
        return { ...user.toJSON(), token };
      }
      throw new AuthenticationError('Invalid credentials');
    },
  },
};

In the register resolver, we extracted the payload from the args object and created the new user using the User model. In the login, we authenticate the user and return the user alongside a JSON web token if the correct credentials are provided else an Authentication error is thrown.

Note: The snippet above is for demo purposes and not advisable to be used in production. In a real application, you'd want to validate the inputs, store the JWT secret in the .env, and observe other security best practices.

Now, when you test the mutations (endpoints) on the playground, you'll get similar results as shown in the screenshots below:

The graphQL query for the screenshots above can be found in query.graphql included in the article repository.

Request Authentication

Before we create the Post resolvers, we need to device a means of authenticating the requests. We want to add a function that checks if the request headers contain an authorization token.

Edit the graphql/context/index.js as follows:



// graphql/context/index.js

const { User } = require('../../database/models');
const jwt = require('jsonwebtoken');
const { AuthenticationError } = require('apollo-server-express')

const verifyToken = async (token) => {
  try {
    if (!token) return null;
    const { id } = await jwt.verify(token, 'mySecret');
    const user = await User.findByPk(id);
    return user;
  } catch (error) {
    throw new AuthenticationError(error.message);
  }
};

module.exports = async ({ req }) => {
  const token = (req.headers && req.headers.authorization) || '';
   const user = await verifyToken(token)
  return { user };
};

Looking at the snippet above, we created a helper function verifyToken which verifies the token and returns the user whose id is encoded in the token. In the context function, we checked for the authorization in the request headers, if there's a token, we decode it, and pass the user object to the context. Now, we can check for the user object in the context to determine if the request is authenticated.

Post Resolver
First, let's create the createPost resolver. Create a new file post.js in graphql/resolvers and copy the code below into it:



// graphql/resolvers/post.js

const { Post } = require('../../database/models');

const { AuthenticationError } = require('apollo-server-express');

module.exports = {
  Mutation: {
    async createPost(_, { content, title }, { user = null }) {
      if (!user) {
        throw new AuthenticationError('You must login to create a post');
      }
      return Post.create({
        userId: user.id,
        content,
        title,
      });
    },
  },
};

We destructured the args object to get the content and title from the request. Likewise, we destructured the context to get the request user, if user is null it means the request is not authenticated. The screenshot below shows the result when tested on the playground.

Looking closely at the screenshot above, you'll see how the authorization was added. To add authorization header in the graphQL playground, go to the bottom of the playground, click the HTTP HEADERS and add the authorizations as shown below:



{
  "Authorization": "your-json-web-token"
}

You can get the token via the login mutation we created earlier.

Next up, let's create resolvers for getAllPosts and getSinglePost. Edit the post.js as follows:



// graphql/resolvers/post.js

const { Post } = require('../../database/models');

const { AuthenticationError } = require('apollo-server-express');

module.exports = {
  Mutation: {
    async createPost(_, { content, title }, { user = null }) {
      if (!user) {
        throw new AuthenticationError('You must login to create a post');
      }
      return Post.create({
        userId: user.id,
        content,
        title,
      });
    },
  },

  Query: {
    async getAllPosts(root, args, context) {
      return Post.findAll();
    },
    async getSinglePost(_, { postId }, context) {
      return Post.findByPk(postId);
    },
  },

  Post: {
    author(post) {
      return post.getAuthor();
    },

    comments(post) {
      return post.getComments();
    },
  },
};

Notice that we added a resolver for Post itself, in the Post schema we have author and comments. Here we made use of the root object which is post in this case. GraphQL implicitly resolves the Post to the result of the Post query passing the post object as the root object. We then made use of Sequelize mixin to return the related author and comments for the Post.

Let's test the getAllPosts query. You can add the sample query below on the playground.



query allPosts {
  getAllPosts {
    id
    title
    content
    author {
      id
      name
    }
    comments {
      id
      content
    }
  }
}

The response of the query above is shown below:



{
  "data": {
    "getAllPosts": [
      {
        "id": 1,
        "title": "New post",
        "content": "New post content",
        "author": {
          "id": 1,
          "name": "test"
        },
        "comments": []
      }
    ]
  }
}

Looking at the response, the query returned the single post in the database alongside the author of the post, and an empty array for comments since the post has no comments yet.

In the same manner, the query below shows how we can query for a single post.



query singlePost {
  getSinglePost(postId: 1) {
    id
    title
    content
    author {
      name
    }
  }
}

It's up to you to define your query according to your need.

Comment Resolver
In the Comment schema, we have a createComment mutation, let's create a resolver for it.
Copy the snippet below into graphql/resolvers/comment.js:



// graphql/resolvers/comment.js

const { Post } = require('../../database/models');

const { AuthenticationError, ApolloError } = require('apollo-server-express');

module.exports = {
  Mutation: {
    async createComment(_, { content, postId }, { user = null }) {
      if (!user) {
        throw new AuthenticationError('You must login to create a comment');
      }

      const post = await Post.findByPk(postId);

      if (post) {
        return post.createComment({ content, userId: user.id });
      }
      throw new ApolloError('Unable to create a comment');
    },
  },

  Comment: {
    author(comment) {
      return comment.getAuthor();
    },
    post(comment) {
      return comment.getPost();
    },
  },
};

Similar to the post resolver, we ensured that only authenticated users can create a comment, and also we ensured that the post exists by first retrieving the post and then using the relationship method provided by Sequelize to create a comment for the given post.

A sample query to create a comment is shown below, copy and paste it on the playground to test the mutation. Remember to add the auth token in the authorization header.



mutation createComment {
   createComment(content: "New post comment", postId: 1) {
    id
    content
    createdAt
  }
}

And the response is as shown below:



{
  "data": {
    "createComment": {
      "id": 5,
      "content": "New post comment",
      "createdAt": "1593345238316"
    }
  }
}

Now, when you query Post, you'll be able to get results for the post's comments.

Remember to import the resolvers to the root resolver graphql/resolvers/index.js. It should now look like shown below:



// graphql/resolvers/index.js

const userResolvers = require('./user');
const postResolvers = require('./post');
const commentResolvers = require('./comment');

module.exports = [userResolvers, postResolvers, commentResolvers];

That is it. The complete code can be found here

Conclusion

If you followed up to this point, you'd have successfully developed an API using graphQL. It's worthy to note that this article uses a minimalistic approach focusing on the most important things rather than best practices. We used PostgreSQL and Sequelize ORM as the data source, it could be anything that suits your application.

What next?

In the next articles, I will be writing on how to improve your application using middleware, how to implement integration testing on your graphQL API, etc. Stay tuned!

More Resources

Install Postgres on Mac/Linux

Chinedu Orie — Sat, 13 Jun 2020 18:42:45 +0000

Linux

Step 1: Installation

$ sudo apt update
$ sudo apt install postgresql postgresql-contrib

Step 2: Test the installation

sudo -u posgtres psql

You should see:
psotgres=#

Type \q to quit

Step 3: Create postgres user:

$ sudo -u postgres createuser --interactive

You should see prompts as shown below:

Enter name of role to add: test
Shall the new role be a superuser? (y/n) y

Step 4: Create database

$ sudo -u postgres createdb test

Now, we need to create the same Linux user as the postgres user for authentication to succeed

$ sudo adduser test

now you can log in to your postgres database

$ sudo -u test psql

Step 5: Assign password to the postgres user

$ sudo -u postgres psql

postgres=# ALTER USER test with PASSWORD 'your-new-password';

Note: test is the name of your postgres user. If you want to connect to the postgres database programmatically you must create a password following step 5.

The connection string for the above database will be postgres://test:your-new-password@localhost:5432/test

Mac

For Mac, what would change is the method of installing postgres

If you already have Homebrew installed, you can install postgress with the command below, if you don't have Homebrew installed click here to install it.

$ brew update
$ brew install postgresql

Step 1: Create postgres user:

$ sudo -u postgres createuser --interactive

You should see prompts as shown below:

Enter name of role to add: test
Shall the new role be a superuser? (y/n) y

Step 2: Create database

$ sudo -u postgres createdb test

$ sudo -u test psql

Step 5: Assign password to the postgres user

$ sudo -u postgres psql

postgres=# ALTER USER test with PASSWORD 'your-new-password';

Note: Creating a new postgres user is optional, you can make do with the default postgres user if you are want.

If you want to use the default posgtres user, all you need to do after installing postgres is:

$ sudo -u postgres createdb test // or  $ createdb test

$ sudo -u postgres psql

postgres=# ALTER USER postgres with PASSWORD 'your-new-password';

Then, your connection string would be postgres://postgres:your-new-password@localhost:5432/test

Thanks for reading!

Deploy Node.js API on AWS Elastic BeanStalk Using CLI

Chinedu Orie — Tue, 02 Jun 2020 23:15:36 +0000

Elastic Beanstalk is the AWS platform-as-a-service that helps you deploy your code with ease. As a platform-as-a-service, it means that you do not have to worry about server setups and resource provisioning required to run your code. Elastic Beanstalk says, "Hey give me your code and I will let the world see the magic you've made in a couple of minutes".

It sounds pretty easy right? Yeah, it does. But sometimes it is not as straight-forward as it sounds to get your app to return the green status. In this article, I'll be showing you how to deploy your Node.js API using the Elastic Beanstalk CLI and the tips to troubleshooting it if the status returns degraded after deployment.

PS: You can also deploy on Elastic Beanstalk using the AWS console interface, we are only focusing on achieving the same using the CLI

Requirements

Create an AWS account
Install EB CLI
The application to deploy

Next up, you need to create an access key for the AWS IAM user you want to authenticate with. If you already have an access key, you can skip this steps.
To generate an access key, follow the steps below:

On your AWS console, click on the Services and select IAM.
Click on Users, if you already have a user, then click on the user you want to use and click Create access key.

Now, you are ready to deploy your app on Elastic Beanstalk.

Step 1 - Initialize Elastic Beanstalk

Open your project in a terminal and cd to the root directory.
Verify that EB CLI has installed by running the command:



$ eb --version
 // EB CLI 3.18.1 (Python 3.8.2)

To initialize EB, run:



$ eb init

Things to note when responding to the prompts of eb init

For Select a default region, make sure you select the same region where the access key is generated You'll be prompted to authenticate your account, use the access key you created earlier.
For the prompt Do you wish to continue with CodeCommit?, choose N, except you want to use CodeCommit, choosing N will force it to use the GIT repository
Do you want to set up SSH for your instances? (Y/n), choose Y if you want to be able to ssh into the Elastic Beanstalk's EC2 instance Select a keypair.You'll have the option to select an existing keypair or create a new one.

Now, you should have a .elasticbeanstalk folder created which will contain the deployment configurations for your application.

Step 2 - Advanced environment customization with configuration files (.ebextensions)

Here you'll specify the environmental variables that your application needs to run. You can also specify commands that should run immediately the application starts, for example run migrations, etc. Check the docs for more details of the different types of commands you can specify using .ebextensions

In the project I used in this article, I want to set some environment variables such as NODE_ENV, DATABASE_URL, JWT_SECRET. I also want to run migrations for the database. To achieve that, I followed the steps below:

Create .ebextensions folder at the root of the project
Create a file named options.config inside the .ebextensions folder The options.config looks like shown below: ```yaml

option_settings:
aws:elasticbeanstalk:application:environment:
NODE_ENV: production
DATABASE_URL: postgres://my-database-url
JWT_SECRET: my-secret
container_commands:
01_migrations:
env:
NODE_ENV: production
command: "npm run migrate"

Notice that I am using a postgres database in this example, in your own case it can be anything according to your use case.
The `.ebextensions` files must have the extension `.config` for it to work

Note: If you are using GIT as the source control, you must push the `.ebextensions` to GIT for EB CLI to recognize it. But what if the `.ebextensions` contain sensitive data?

To solve this problem, you'll need to override GIT so that EB uploads the files directly from your local machine instead of GIT repository.

Follow the steps below:

Create a `.ebignore` file
Copy the content of `.gitignore` into `.ebignore`

That is it, when EB CLI detects the presence of `.ebignore`, it'll not use GIT as source control, rather it will deploy directly from your local machine by bundling everything that is not in the `.ebignore`. That way you can keep `.ebextensions` in the `.gitignore` to avoid exposing sensitive data.

## **Step 3 - Create the application environment (Deployment)**

To create the Elastic beanstalk environment for the application and deploy it, run

$ eb create

The `<environment-name>` is the name of your application, in this example I used `demo` hence the command is `eb create demo`.
Once the environment creating starts, visit your AWS console and navigate to Elastic Beanstalk, you'd notice that the resources needed to deploy your application is being provisioned. You'll also notice that the environment variables that were specified in the `.ebextensions/options.config` have been added to the Sotware configuration as can be seen in the screenshot below:

![Elastic Beanstalk environment configuration](https://dev-to-uploads.s3.amazonaws.com/i/aj0l2faadjncgq6ejz5p.png)


The screenshot below shows a successful deployment of the application:

![EB console showing a successfully deployed application](https://dev-to-uploads.s3.amazonaws.com/i/xae10g7g9go6nqci36qt.png)

Now that the application has successfully deployed, let's look at some operations that you may likely need to perform on your EB EC2 isntance.

## **ssh into the EC2 instance**

To ssh into the EB EC2 instance, run

$ eb ssh

To navigate to the location of the application files, run

$ cd /var/app/current

You can also run any commands such as migrations, etc as you need inside the application as usual.

## **Debugging**
Sometimes, the application status will transition to degraded or severe, whatever it is, provided it's not green, it means there might be some problems that you need to fix. You can view the logs by running:

$ eb logs

Deploying an update
If you need to deploy an update to the application, run

$ eb deploy

Setting environment variables
If you want to set an environment variable using the CLI, run

$ eb setenv [VAR_NAME=VALUE]

For more commands, run

$ eb --help

## **Conclusion**

We've walked through how to deploy Node.js API on Elastic Beanstalk using the CLI. Though everything done in this article can be achieved from the console dashboard. The only exception is running commands inside the application which can be achieved via ssh.

If you have got any questions don't hesitate to reach out. You feedback and contributions are greatly appreciated.

_This article was original published on my [blog](https://www.oriechinedu.com/posts/deploy-node-js-api-to-aws-elastic-beanstalk-using-cli)_

How to Add New Fields to Existing Sequelize Migration

Chinedu Orie — Fri, 28 Feb 2020 20:13:58 +0000

Sometimes you realize that you need to add some new fields to an existing sequelize migrations. This is especially important for production apps where refreshing the migration is not an option. Below is a quick guide on how to implement it.

Let's assume you want to add some new fields to Users table; below are the steps.

Step 1 - Create a new migration

npx sequelize-cli migration:create --name modify_users_add_new_fields

Step 2 - Edit the migrations to suit the need

module.exports = {
  up(queryInterface, Sequelize) {
    return Promise.all([
      queryInterface.addColumn(
        'Users', // table name
        'twitter', // new field name
        {
          type: Sequelize.STRING,
          allowNull: true,
        },
      ),
      queryInterface.addColumn(
        'Users',
        'linkedin',
        {
          type: Sequelize.STRING,
          allowNull: true,
        },
      ),
      queryInterface.addColumn(
        'Users',
        'bio',
        {
          type: Sequelize.TEXT,
          allowNull: true,
        },
      ),
    ]);
  },

  down(queryInterface, Sequelize) {
    // logic for reverting the changes
    return Promise.all([
      queryInterface.removeColumn('Users', 'linkedin'),
      queryInterface.removeColumn('Users', 'twitter'),
      queryInterface.removeColumn('Users', 'bio'),
    ]);
  },
};

Step 3 - Update the model with the new fields

Step 4 - Run migration

npx sequelize-cli db:migrate

That is it, you have successfully added new fields to an existing migration.

Integrate Slack to your Nodejs app in Ten Minutes

Chinedu Orie — Wed, 05 Feb 2020 23:53:52 +0000

Slack is a virtual office. Businesses, teams, and companies rely on it for communications and for managing daily activities. Activities such as placing orders for lunch, or contacting the front desk team or placing any form of request on the company's website can be carried out via the Slack workspace using Slack integrations via the Slack API.

In this article, I will be showing how you can build an integration for sending requests from the Slack workspace to a given website. We will build a simple Nodejs server to test the integration.

Requirements

Knowledge of Node.js/Express
Slack workspace: If you don't have a Slack workspace, you can create one for test purposes.
Ngrok: Since we will be working with a local development server, we will need ngrok to provision a public URL from the API in order to be able to communicate with Slack. Visit the link to install it or you can install it globally via npm here

With those requirements above met, we can proceed to get the stuff done following the steps below:

Create Slack App

In order to interact with the Slack API, you need a Slack app. To create a Slack app, you need a Slack account (a workspace). Click here to create a Slack app.

Next up is to generate an access token for authorizing requests between the website and the Slack workspace. You will get the token by clicking OAuth & Permissions

Next up, we need to create a slash command (/frontdesk). The slash command would pop up a modal when a user invokes it anywhere on the Slack workspace. But before creating the slash command, let's spin up an Express server. If you already have a server running you can skip to Creating Slash Command. The reason for having a running server at this point is that the slash command requires the endpoint for sending payloads to the website when invoked.

Clone the project used in this article here to follow along

In server/index.js, I set up a simple Express server as shown in the snippet below:



const express = require('express');
const bodyParser = require('body-parser');
const routes = require('../routes/');

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/', (req, res) => {
    res.json({ message: 'The app is running...'})
})

app.use('/api', routes);

module.exports = app;

Note: You must use the bodyParser.urlencoded() middle. This is needed to parse the url-encoded payload from Slack.

Slash command

Slash command is a means to trigger an action from the Slack workspace. In our case, we want a user to be able to contact the front desk by invoking the /frontdesk command on Slack. When a user types the command /frontdesk and hits enter; an action is triggered and Slack will notify your website through an endpoint you provided while creating the slash command. In our case, the endpoint simply returns a modal with a form for the user to submit his/her request.

Creating the slash command endpoint

The code for the slash command endpoint is as shown below:



router.post('/slack/frontdesk', (req, res) => {
  const { trigger_id: triggerId } = req.body;

  res.status(200).send('');
  (async () => {
    // Open a modal.
    await web.views.open({
      trigger_id: triggerId,
      view: {
        type: 'modal',
        title: {
          type: 'plain_text',
          text: 'Contact Front Desk',
        },
        submit: {
          type: 'plain_text',
          text: 'Submit',
        },
        callback_id: 'frontdesk',
        blocks: [
          {
            type: 'section',
            text: {
              type: 'plain_text',
              text: ':wave: We will get back to you as soon as possible',
              emoji: true,
            },
          },
          {
            type: 'divider',
          },

          {
            type: 'input',
            block_id: 'title',
            label: {
              type: 'plain_text',
              text: 'Title',
              emoji: true,
            },
            element: {
              type: 'plain_text_input',
              multiline: false,
              action_id: 'title',
            },
          },
          {
            type: 'input',
            block_id: 'description',
            label: {
              type: 'plain_text',
              text: 'Description',
              emoji: true,
            },
            element: {
              type: 'plain_text_input',
              multiline: true,
              action_id: 'description',
            },
            optional: true,
          },
        ],
      },
    });
  })();
});

Things to note from the slash command endpoint

The req.body contains among other payloads the trigger_id, the trigger_id is an identifier for the source of the command. In order to send the modal form to the user that invoked the command, we need the trigger_id so that the modal pops up at the exact channel.
I used the @slack/web-api which makes sending HTTP request to the Slack API seamless.
I used the Slack modal, read more about it.
I used the Block Kit to generate the modal form, read more about it.
Note that each block has block_id and action_id, you'll find the reason shortly.
The line res.status(200).send(''); is a way to tell slack that the trigger was received successfully. Failure to return a response of 200 would cause Slack trigger an error.

Handling Interactions

When the user submits the form, Slack sends the payload to an endpoint that you specified for it. This means that we need another endpoint for this purpose. The code for the interactions endpoint is as shown below:



router.post('/slack/interactions', (req, res) => {
  res.status(200).send('');

  const payload = JSON.parse(req.body.payload);

  // view the payload on console
  console.log(payload);

  if (
    payload.type === 'view_submission' &&
    payload.view.callback_id === 'frontdesk'
  ) {
    const { values } = payload.view.state;
    const title = values.title.title.value;
    const description = values.description.description.value;

    console.log(`title ----->${title}`, `description---->${description}`);

  // Save the title and description to the database or handle it as you may deem fit.
  }
});

The form payload is located at the payload object of the req.body. The form values are located in the payload.view.state object.
Notice the long chain in order to extract the form input value, that is due to the block_id and action_id used in building the form, without it, the form values would not be deterministic as the block_id and action_id would be random values.

Lastly, we need to create the actual slash command on the slack app we created earlier and also specify the interactions endpoint. To do so, we need to start the server and provision a public URL using ngrok.



npm start

Next up, navigate to the folder where the ngrok was unzipped and run the command below:



./ngrok http 3000

If you installed ngrok globally, you can run the command below anywhere on the terminal



ngrok http 3000

Note that 3000 is the port the server is listening, you can change it to the port yours is running.
The screenshot below shows the commands above in action:

Now that we have provisioned a public URL from the local server, the slash command and the interactions endpoints would be https://38a73f75.ngrok.io/api/slack/frontdesk and https://38a73f75.ngrok.io/api/slack/interactions respectively. Let's proceed to create the slash command.

Head to the Slack app you created earlier as shown below:

Fill the form as shown below:

Next up, click the Interactive Components to add the interactions endpoint as shown below:

It is time to test it! Head over to the Slack workspace and invoke the /frontdesk command, you'll see a modal as shown below:

The result of submitting the form is shown below as logged on the console:

Conclusion

I tried to make this article as simple as possible, hence, the snippets may not have followed best practices, feel free to refactor it to suit your needs.

If you have some suggestions that would further make the article easier to the readers, you are welcome to do so. Gracias!

Originally published in my blog

2019 in Review: A year of a positive turning point

Chinedu Orie — Wed, 08 Jan 2020 18:36:15 +0000

2019 was unequivocally a good year. I contemplated whether I've got something worth writing about but one silent voice scolded me hardly for attempting to be ungrateful. Yes, I have a couple of things to be grateful for in retrospect.

Work

I walked into 2019 as a software engineer at Hotels.ng. Working at Hotels was an awesome experience, I worked with really smart folks and had the opportunity to work under a mentor that I hold in high esteem, Mark Essien.

In April, the quest for another dimension of growth drove me to join Andela. At Andela, I was engaged in immersive training, I was glad that the reason for joining them came to pass. I was enrolled in Lambda school, something I consider a rare privilege, thanks to Andela.

My training at Lambda school not only availed me the opportunity to build a formidable foundation as a software engineer but also gave me the opportunity to expand my network across the globe. I've worked with folks of various timezones and diverse backgrounds. This has helped me build strong confidence in diversity and remote work culture.

In September, there was a change in Andela's business policy that culminated in a lay-off. I got a mail which in summary made it known to me that my position in Andela had been made redundant, this didn't come as a surprise because having been in Andela for only about 6 months, I knew I was one of the targets of the lay-off.

Immediately I got the mail, I told myself that the Andela chapter was done and that I needed to move.
I quickly jumped on my laptop and submitted an application for the position of Team Lead at Lambda school. I was invited to interview the following day and got an acceptance mail the second day to resume the next week Monday.

My experience as a Team Lead at Lambda school has been both challenging and exciting. I have learned a skill that I need so much in my career as a software engineer, leadership.

Technical

2019 was fraught with lots of learning. At the start of the year, I could only boast of PHP/Laravel and was strictly a backend engineer. Now, Javascript has become one of my major stacks, both for frontend development and backend development. I can now assume the role of a frontend engineer if the need arises without feeling handicapped. I also learned a lot of technologies that I may not mention here.

Writing

I love to share new stuff I learn via writing. This year my writing skill improved. I also started writing on Dev.to thanks to Gift for her advice. I also built my own blog

My Dev.to Dashboard view

Leadership

My role at Lambda is a leadership role. I learned what it takes to lead a team in practice. I learned that I needed something more than technical skills to lead a successful team. There were occasions I took decisions or acted in a manner that wasn't the best but I learned from the mistakes.

Finance

I was intentional about saving, I didn't save enough to buy Benz but I saved something at the least. There was an improvement in digits and currency. I got myself a workspace and a couple of other things that make work and life easier.

My 2019 CowrywiseRoundup

Social

I made a lot of good friends. Folks that are going to be one of the major stakeholders in the coming decade. I attended 2 off-site parties and a couple of hangouts with friends.

Health

I am most grateful to God for the gift of good health. I was never admitted to the hospital throughout the year except for check-up visits and a few cases of Malaria at some points. Yesterday I went for the last medical check-up for the year, did all manner of tests and the doctor looked at me, gave me a handshake and said, go home for all is well with you.

Me walking into 2020

What didn't go well?

Of course, I don't mean to sing praises. There are many areas I should have done better especially in reading books. I bought 3 books this year but ended up not reading them. I started this year with relationships status returning null, now it returns undefined. My relationship with God would have been better.

What next?

I've set myself some targets and challenges for 2020. I hope to have a better by the year-end.

Method Chaining in JavaScript

Chinedu Orie — Tue, 05 Nov 2019 07:10:39 +0000

Originally published in my blog

Method chaining is a mechanism of calling a method on another method of the same object. There are different reasons for method chaining for different people. One of the major reasons for chaining methods is to ensure a cleaner and more readable code. Let's consider an example below:

var recipeObj = new Recipe();
recipeObj.addIngredient('salt');
recipeObj.addIngredient('pepper');
recipeObj.getIngredients()

With method chaining, the code snippet above can be refactored to:

var recipeObj = new Recipe();

recipeObj
.addIngredient('salt')
.addIngredient('pepper')
.getIngredients();

Looking at both snippets above, one would agree that the second is cleaner than the first.

What makes method chaining possible?

What makes the method chaining possible is the this keyword. In JavaScript, the this keyword refers to the current object in which it is called. Hence, when a method returns this, it simply returns an instance of the object in which it is returned. Since the returned value is an object instance, it is, therefore, possible for other methods of the object to be called on the returned value which is its instance.

Method Chaining Example in ES5

function Recipe() {
  this.ingredients = [];
}
 Recipe.prototype.addIngredient = function (ingredient) {
   this.ingredients.push(ingredient);
   return this; // this makes chaining possible
 }

 Recipe.prototype.getIngredients = function () {
   if (!this.ingredients.length) {
     console.log('There is no ingredient in this recipe');
   } else {
     console.log(this.ingredients.toString());
   }
 }

 var recipeObj = new Recipe();

 recipeObj
 .addIngredient('salt')
 .addIngredient('pepper')
 .addIngredient('maggi')
 .getIngredients()

//salt,pepper,maggi

Method Chaining Example in ES6

class RecipeClass {
  constructor() {
    this.ingredients = [];
  }

  addIngredient = (ingredient) => {
    this.ingredients.push(ingredient);
    return this;
  }

  getIngredients = () => {
    if (!this.ingredients.length) {
     console.log('There is no ingredient in this recipe');
   } else {
     console.log(this.ingredients.toString());
   }
  }
}

 const recipeObj2 = new RecipeClass();

 recipeObj2
 .addIngredient('garlic')
 .addIngredient('pepper')
 .addIngredient('maggi')
 .getIngredients()

//garlic,pepper,maggi

Conclusion

In this short article, I explained the concept of method chaining in Javascript and demonstrated how it can be achieved using the this keyword. You can give it a try. ✌️

CSS Media Query Pro Tips

Chinedu Orie — Wed, 23 Oct 2019 12:45:21 +0000

Media Query is very important in building web applications that can display well across devices of different screen sizes.

A media query is an HTML/CSS functionality that allows the content of a Web page to adapt to the type of media that the page is being rendered in, such as a computer screen or that of a phone or tablet. - techopedia

Responsive web design Approaches

There are two major approaches to implementing responsive web designs namely:

Desktop-first approach
Mobile-first approach

It's very important to note that each of the approaches has some rules that must be observed for it to give the expected result. Let's dive deep into each of the approaches.

Desktop-first Approach

In a desktop-first approach, we focus on building layouts that display correctly on desktops (large screens) and then scale down to smaller screen sizes (tablets, mobile phones) in descending order.

Rules for a desktop-first approach

Use (max-width) for breakpoints
The breakpoints must be consistently in descending order

Let's take an example of a desktop-first approach.

<div class="container">
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box3"></div>
   <div class="box4"></div>
</div>

.container {
    width: 100vw;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.box1, .box2, .box3, .box4 {
    border: 1px solid black;
    height: 100px;
    min-width: 200px;
    flex-basis: 20%;
}

.box1 {
    background-color: red;
}

.box2 {
    background-color: purple;
}

.box3 {
    background-color: blue;
}

.box4 {
    background-color: green;
}


@media (max-width: 768px) {
    .box1, .box2, .box3, .box4  {
        flex-basis: 48%;
    }
}

@media (max-width: 500px) {
    .box1, .box2, .box3, .box4  {
        flex-basis: 100%;
    }
}

View on codesandbox

In order to simplify the explanation, we used only three screen sizes one for desktop, tablet, and mobile phone. Notice how we observed the rules, using max-width for breakpoints and being consistently in descending order of the breakpoint.

If you mistakenly apply mobile phone breakpoint before tablet breakpoints in a desktop-first approach, what happens is that the tablet breakpoint will override the mobile phone breakpoint.

Mobile-first Approach

In a mobile-first approach, we focus on building layouts that display correctly on mobile phones (small screens) and then scale up to larger screen sizes (tablets, desktops) in ascending order.

Rules for a mobile-first approach

Use (min-width) for breakpoints
The breakpoints must be consistently in ascending order

As an example, let's refactor the styles from the desktop-first approach as follows:

.container {
    width: 100vw;
    display: flex;
    flex-direction: column;
}

.box1, .box2, .box3, .box4 {
    border: 1px solid black;
    height: 100px;
    width: 100%;
}

@media (min-width: 768px) {
    .container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .box1, .box2, .box3, .box4 {
        flex-basis: 48%;
    }
}

@media (min-width: 1024px) {
    .container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .box1, .box2, .box3, .box4 {
        flex-basis: 20%;
    }
}

View on codesandbox

Again, note that the order of the breakpoints is very important in order to arrive at the expected result.

Conclusion

In this article, I tried to point out some tips that should be observed to ensure effective media queries.

Although the examples did not cover all screen sizes, the key takeaway is that there must be consistency in the order of the breakpoints for either a desktop-first approach or a mobile-first approach.

Your opinions and contributions are welcome, toss your comments in the discussion section.

Originally published on my my blog

Useful GIT Config Tips

Chinedu Orie — Wed, 25 Sep 2019 20:47:58 +0000

As software developers, GIT is a useful tool in the course of developments. In most occasions, we do need to configure GIT in our local machines, either changing the existing configuration or setting up a new configuration. In this short article, I want to highlight some config commands that can come in handy in the two scenarios above.

Existing Configuration

If you have ever used someone else's machine or inherited one from a developer that already has a global configuration, then you would have experienced the nasty case of a strange username appearing in your commits when you push your code to the repository. It's not a funny experience right? Trust me it can be embarrassing.

To escape this ugly experience, open your terminal and follow the steps below:

git config --list

This lists the available configurations. You can also see the credentials of the existing user.

Next,

git config --global --replace-all user.name "New User Name e.g Jon Doe" \
git config --global --replace-all user.username "New username e.g jonDoe" \
git config --global --replace-all user.email "New User Email"

The commands above will replace the existing config user information with your own information.

Notice that the commands above use the --global option which sets the configuration globally on your machine, if you want to limit the configuration to a given repository, you can ignore the --global and the config will only apply to the repository where the command was invoked.

New Configuration

If your machine is new, you would want to configure GIT after installing it so that your contributions will reflect with your GIT information. The steps below are all you need to hit the ground running.

git config --global user.name "New User Name e.g Jon Doe" \
git config --global user.username "New username e.g jonDoe" \
git config --global user.email "New User Email"

Note: The commands above are using --global which sets the config globally. If you want the setting to take effect on a given repository, then, then replace the --global with --local.

credential.helper

Most times, it could be annoying when GIT requests for your authentication each time you want to push to the remote repository. One of the ways to stop that is through the credential.helper. All you need to do is to invoke the command below before pushing to the repository.

git config credential.helper store

After invoking the command above, go ahead and push. You might be required to authenticate but the subsequent pushes will not require authentication as GIT will fetch the credentials from the store.

More tips

Changing remote url
Sometimes, we want to change the remote url of a cloned repository or just any remote repository. The command below is all you need.

git remote set-url origin <new url>

To verify that the remote url is exactly the desired one, the command below solves it.

git remote -v

Conclusion

Topics about GIT are almost inexhaustible. As a result, we need to focus on the area that we need at some point in time. What I have written in this article is what I find myself surfing the internet each time I need them, hence decided to write about it so that others who find it useful may benefit from its handiness.

Feel free to add your own helpful tips in the comment section below.

Send Email with SendGrid and Mailgen in Node.js

Chinedu Orie — Wed, 11 Sep 2019 22:23:30 +0000

Often time we do have needs of sending email in our Node.js application. The first option that comes to mind is Nodemailer. Nodemailer is a good option except that sometimes it can get quite difficult getting it to work with Gmail SMTP owing to Google's security checks. This might just be my own opinion and experience.

SendGrid is another option for sending emails in Node.js. In my opinion, sending an email with SendGrid is very seamless. Though the service is not completely free, it allows for sending up to 100 emails per day for free.

Another important thing in sending email is generating the email template that complies with email template standard which ensures that it renders correctly on different email clients such as Gmail, Yahoomail, etc. Fortunately, there is an npm package called Mailgen which generates a beautiful and standard email template based off of some configurations out of the box.

Requirements

SendGrid API Key - To generate a SendGrid API key follow the steps below:
- Visit SendGrid to create an account
- Log in to the account created
- Click on the settings on the left sidebar
- Click on the create on the Create API Key button to create an API Key.
A node/Express application.

Getting Started

To follow along, clone the project used in this tutorial here.

Step 1 - Setup express project

Create a new directory called sendgrid-email.

mkdir sendgrid-email && cd sendgrid-email

Next up, open the project in your favorite text editor and install the following dependencies:

npm i express dotenv mailgen @sendgrid/mail

Next up, create a file named index.js at the root of the project and copy the following code into it:

const express = require('express')
const sendMail = require('./mail')
const app = express()

app.use(express.json())

app.get('/', (req, res) => res.send('Hello world!!!'))

app.get('/sendMail', async (req, res) => {
  try {
    const sent = await sendMail()
    if (sent) {
      res.send({ message: 'email sent successfully' })
    }
  } catch (error) {
    throw new Error(error.message)
  }
})

app.listen(3300, () => {
  console.log('server listening at http://localhost:3300')
})

NB: Our concern is to set up a simple server top demo the concept in this article and as such no attention is paid to best practices.🙂

Looking at the snippet above, we added a route /sendMail which calls a function sendMail() imported from mail.js. Let's create the content of mail.js.

Step 2 - Generate email template with Mailgen

Create a file named mail.js and copy the following code into it:

const MailGen = require('mailgen')
const sgMail = require('@sendgrid/mail')

require('dotenv').config()

const mailGenerator = new MailGen({
  theme: 'salted',
  product: {
    name: 'Awesome App',
    link: 'http://example.com',
    // logo: your app logo url
  },
})

const email = {
  body: {
    name: 'Jon Doe',
    intro: 'Welcome to email verification',
    action: {
      instructions: 'Please click the button below to verify your account',
      button: {
        color: '#33b5e5',
        text: 'Verify account',
        link: 'http://example.com/verify_account',
      },
    },
  },
}

const emailTemplate = mailGenerator.generate(email)
require('fs').writeFileSync('preview.html', emailTemplate, 'utf8')

We imported the Mailgen module and then created an instance of it called mailGenerator. The mailGenerator takes the theme, there are several themes you can choose from. The product object takes name which is the name of your application, link the application URL and also logo which takes the URL of your application logo.

Next up, we configured the email body and then generated the email template. See the Mailgen docs for more details on how to configure the email body. This line require('fs').writeFileSync('preview.html', emailTemplate, 'utf8') is optional, you add it if you want to preview the HTML file generated by Mailgen.

Step 3 - Send email using SendGrid

Copy the API Key you created earlier into .env, check .env.example for a guide.
Next up, copy the snippet below into mail.js:

const msg = {
  to: 'your-email@example.com',
  from: 'test@example.com',
  subject: 'Test verification email',
  html: emailTemplate,
}

const sendMail = async () => {
  try {
    sgMail.setApiKey(process.env.SENDGRID_API_KEY)
    return sgMail.send(msg)
  } catch (error) {
    throw new Error(error.message)
  }
}

module.exports = sendMail

Setting up SendGrid is very easy as you can see above, all you need is to pass the API Key as shown above and then construct the message and send. We passed the emailTemplate generated earlier into the SendGrid msg.

Check the @sendgrid/mail docs for more information on how to configure it.

That is it! Now start the server and head over to Postman and hit the /sendMail route.
If everything is alright, you receive an email that looks as shown below:

You can also preview the email template by opening the preview.html on the browser.

Conclusion

So far we have demonstrated how we can create beautiful email template using Mailgen and send the mail using SendGrid. In a bid to keeping it simple, we implemented everything inside the mail.js, in practice, you might want to separate it into re-usable modules. For example, you can create a function for generating the email template based on some parameters so that you can easily call it each time you want to send an email.

Let me know if you have any question or contribution. I am open for discussion. Just reach out to me anytime.

This was originally published on my blog

DEV Community: Chinedu Orie

Automate Application Deployment to AWS Elastic Beanstalk with Terraform and CodePipeline

Prerequisites

Step 1: Create a directory for the terraform codes

Step 2: Initialize Terraform

Step 3: Create a terraform workspace

Step 4: Create variables.tf file and paste the code below.

Step 5: Create terraform.tfvars file and paste the code below.

Step 6: Create main.tf file and paste the code below.

Step 7: Create vpc.tf and paste the code below:

Step 8: Elastic Beanstalk - Create eb.tf and paste the code below:

Step 9: Codebuild - Create codebuild.tf file and paste the code:

Step 10: CodePipeline - Create codepipeline.tf file and paste

Step 11: Create outputs.tf file and paste the code below:

Final Step

Bonus - Terraform code for deploying frontend to AWS S3, Cloudfront with Codepipeline

Secure Coding - Prevention Over Correction.

Common Software Vulnerabilities

1. SQL Injection

SQL Injection Mitigations

2. NoSQL Injection (Non-relational Databases)

NoSQL Injection Mitigations

3. Object-Relational Mapper (ORM) Injection

ORM Injection Mitigations

4. Null Byte Injection (%00):

Null Byte Injection Mitigations

5. Information Leakage:

Mitigations

6. Missing Security Headers or Security Misconfiguration:

Examples of Security Headers

7. Cross-Site Scripting (XSS):

XSS Mitigations

8. Directory Traversal

Directory Traversal Mitigations

9. Session Hijacking

Session Hijacking Techniques

Session Hijacking Mitigations

10. Cross-site Request Forgery (CSRF)

CSRF Mitigations

Secure Coding Best Practices

More Resources

Build API with GraphQL, Node.js, and Sequelize

What is GraphQL?

Table of contents

Explanation of terms

Setup project and Install Dependencies

Create Database Migrations and Models using Sequelize

Create GraphQL Schema for User, Post, and Comment

Create Resolvers

Conclusion

What next?

More Resources

Install Postgres on Mac/Linux

Linux

Step 1: Installation

Step 2: Test the installation

Step 3: Create postgres user:

Step 4: Create database

Step 5: Assign password to the postgres user

Mac

Step 1: Create postgres user:

Step 2: Create database

Step 5: Assign password to the postgres user

Deploy Node.js API on AWS Elastic BeanStalk Using CLI

Requirements

Step 1 - Initialize Elastic Beanstalk

Step 2 - Advanced environment customization with configuration files (.ebextensions)

How to Add New Fields to Existing Sequelize Migration

Step 1 - Create a new migration

Step 2 - Edit the migrations to suit the need

Step 3 - Update the model with the new fields

Step 4 - Run migration

Integrate Slack to your Nodejs app in Ten Minutes

Requirements

Create Slack App

Slash command

Creating the slash command endpoint

Things to note from the slash command endpoint

Handling Interactions

Conclusion

Step 4: Create `variables.tf` file and paste the code below.

Step 5: Create `terraform.tfvars` file and paste the code below.

Step 6: Create `main.tf` file and paste the code below.

Step 7: Create `vpc.tf` and paste the code below:

Step 8: Elastic Beanstalk - Create `eb.tf` and paste the code below:

Step 9: Codebuild - Create `codebuild.tf` file and paste the code:

Step 10: CodePipeline - Create `codepipeline.tf` file and paste

Step 11: Create `outputs.tf` file and paste the code below:

4. Null Byte Injection (`%00`):