DEV Community: Joe Tan

AWS Cognito with React reCaptcha v2

Joe Tan — Tue, 25 Aug 2020 02:02:49 +0000

AWS Cognito

Cognito is a managed service for user management provided by AWS. Though it seems complete at first, there are a few features that are not available, e.g. captcha, password rotations, password expiry.

They do however provide Lambda triggers on some of their actions. We can extend the functionalities by writing functions that will trigger when Cognito perform such actions, like pre-authentication and post-authentication.

A common requirement when it comes to sign-up/login flows is captcha, which prevents bots from signing up or logging in.

We will be using AWS Amplify for this.

AWS Lambda

Lambda is a way to run the serverless code on AWS. No provisioning of compute instance is required to run such codes.

reCaptcha v2

Recaptcha is a captcha service by Google. You do need a Google account to get the site-key and secret-key for reCaptcha to work correctly. We will be using reCaptcha v2.

Upon signing up, take note of the site-key, which will be on the client-side, and the secret-key, which will be on the server-side.

We will be using the react-google-recaptcha for this.

Installing reCaptcha for React

Install the reCaptcha library to your project dependencies.

npm i react-google-recaptcha

Render the reCaptcha

import ReCAPTCHA from "react-google-recaptcha";

function onChange(value) {
  console.log("Captcha value: ", value);
}

<ReCAPTCHA
  sitekey="YOUR SITE KEY HERE"
  onChange={onChange}
/>

From this, we can get the reCaptcha token, now we need to send it together with the user credentials to AWS Cognito for verification.

Passing the token to AWS Cognito

import { Auth } from "aws-amplify";

Auth.signIn(username, password, {
        captcha: token,
      }).then...

Where username and password are user input credentials, the last parameter is called clientMetadata which is not stored by AWS in any way, and only used in the triggers in Lambda.

You can see that we've added the token value with the key "captcha", you will see how we use this value next.

Creating a Lambda function

const axios = require("axios");

const config = {
  recaptcha: {
    secretKey: process.env.SECRET_KEY,
  },
};

exports.handler = async(event) => {
  console.log(event);
  if (!event.request.validationData) {
    throw new Error("Missing validation data");
  }
  try {
    const payload = {
      secret: config.recaptcha.secretKey,
      response: event.request.validationData.captcha,
      remoteip: undefined,
    };
    const verifyResponse = await axios({
      method: "post",
      url: "https://www.google.com/recaptcha/api/siteverify",
      params: payload,
    });
    if (verifyResponse.data.success) {
      return event;
    }
    else {
      throw new Error("Recaptcha verification failed");
    }
  }
  catch (error) {
    console.error(error);
    throw error;
  }
};

You will also have to add your reCaptcha secret-key into the environment variables in the Lambda page.

After adding this code in Lambda, add this Lambda function to your pre-authentication trigger of your AWS Cognito User Pools.

Now that you have your triggers and functions ready, try a login flow in your application, you'll realise that you'll receive an error 400.

That's because Lambda needs the dependencies for your function, in which this case is Axios.

Upload your codes

Lambda allows you to zip up your codes with dependencies and upload them. What we'll have to do here is to copy that code above into a .js file, install Axios into node_modules, zip it up and upload.

Finally!

And you're done! You've just altered the authentication flow of AWS Cognito slightly to include a captcha with Lambda!

There are many ways to make use of the triggers to achieve your needs, explore the other triggers and customise them with Lambda!

Cheers!

A brief introduction to microservices

Joe Tan — Wed, 29 Jul 2020 11:52:47 +0000

Microservices architecture is really popular these days.
Running a collection of single-purpose programs benefits the whole application. This article gives you a brief overview of microservices architecture.

This makes the application:

Loosely coupled
Easily maintainable
Independently deployable

They usually communicate with each other with APIs through HTTP.
Think of microservices as many workers with really specific job scope that comes together to form the application.

Application

First, we'll have to write our application. There are a few frameworks that are suitable for writing microservices in many languages, so pick any you're comfortable with.

Java
- Spring Boot
- Spark
Python
- Flask
- Bottle

The common attribute in frameworks is that they are slim and lightweight.

Containers

Microservices usually runs in containers and a container orchestration platform.
One of the more popular containerisation and orchestration platforms would be Docker, and Kubernetes.

Containers are self-contained images that include all dependencies that your service needs to run. These include your OS, web server, and your code that runs on the webserver. This image is built by Docker and uploaded to an image repository of your choice.
(See Dockerhub or AWS ECR)

Having multiple services means multiple container images to run. Kubernetes makes running these images easier by automating the deployment and scaling of these containers.

Container Orchestration

By putting multiple pods together, it forms a cluster. Kubernetes runs clusters of pods. Pods consist of various containers.

Putting this in context, for example, you have an e-commerce application, designed in a microservices architecture.

Cart
Products
User
Tracking

Each of these is a container image running in the pods of a Kubernetes cluster.

The scalability of Kubernetes comes in when you specify e.g. "Cart" with very high traffic, to be able to scale to 5 more replicas. Kubernetes will measure the resource usage of "Cart", and if it hits a certain percentage, it spins up more instance of this "Cart" container in the same pod to share the load.

Conclusion

With the application running in containers, which runs in the pods of Kubernetes, we now have a collection of services that runs specific jobs that can communicate with one another within the service cluster.

There will be a guide on how to containerise your service, deploy it, and run in Kubernetes.

PHP-FPM with Apache2

Joe Tan — Wed, 29 Jul 2020 11:51:47 +0000

Processing PHP is slow and clunky on Apache Modules, therefore people move to NGINX for higher HTTP response concurrency.

Apache has something similar called mpm_events, to use this we need to disable the Apache PHP module.

Below are the steps for a complete change from Apache PHP module to PHP-FPM for processing, and optimising Apache to use mpm_events instead of mpm_prefork.

First, we need to install PHP-FPM, configure Apache to route .php processing to PHP-FPM, then optimise the number of PHP-FPM threads. After which we will change Apache from mpm_prefork to mpm_events for higher concurrency processing.

This guide assumes you are operating on Ubuntu 18.04 LTS

Installing PHP-FPM

sudo apt install python-software-properties 
sudo add-apt-repository ppa:ondrej/php
apt update
sudo apt install php7.3 php7.3-fpm php7.3-curl php7.3-mysql php7.3-xmlrpc php7.3-bcmath php7.3-mbstring php7.3-xml

Now we have to check if PHP-FPM is running as a daemon.

sudo systemctl status php7.3-fpm

You should be able to see something like this.

php7.3-fpm.service - The PHP 7.3 FastCGI Process Manager Loaded: loaded (/lib/systemd/system/php7.3-fpm.service;
enabled; vendor preset: enabled)
Active: active (running) since Tue 2019-07-23 03:28:26 UTC; 17min ago
Docs: man:php-fpm7.3(8)
Main PID: 30011 (php-fpm7.3)
Status: "Processes active: 38, idle: 3, Requests: 20367, slow:
0, Traffic: 17.2req/sec"

Tasks: 102 (limit: 4915)
CGroup: /system.slice/php7.3-fpm.service
        ├─10217 php-fpm: pool www 
        ├─10277 php-fpm: pool www 
        ├─10278 php-fpm: pool www 
        └─30011 php-fpm: master process
(/etc/php/7.3/fpm/php-fpm.conf)

Jul 23 03:28:26 systemd[1]: Starting The PHP 7.3 FastCGI Process Manager...
Jul 23 03:28:26 systemd[1]: Started The PHP 7.3 FastCGI Process Manager.

Configuring Apache2

Enable these modules so that Apache can route PHP processing to PHP-FPM.

a2enmod actions alias proxy_fcgi setenvif

Edit the Apache configuration file to route the processing. (Also edit for 000-default-ssl.conf if needed)

sudo nano /etc/apache2/sites-available/000-default.conf

Add these lines into this file

<FilesMatch \.php$> 
    SetHandler
"proxy:unix:/run/php/php7.3-fpm.sock|fcgi://localhost/" 
</FilesMatch>

Make sure your .sock is in the correct path

Restart Apache to test if your website still works.

sudo systemctl restart apache2

You may have to run these commands to enable PHP-FPM with Apache

a2enmod proxy_fcgi setenvif 
a2enconf php7.3-fpm

Changing mpm module

Now we change the mpm module from prefork to events.

a2dismod php7.3 mpm_prefork 
a2enmod mpm_event
sudo systemctl restart apache2

Check if Server MPM is changed to events

sudo apachectl -V | grep MPM

You should see

Server MPM: event

Optimising Apache2 mpm_event

cd /etc/apache2/mods-enabled/

nano mpm_event.conf

<IfModule mpm_event_module> 
    KeepAlive On
    KeepAliveTimeout 5 
    MaxKeepAliveRequests 128

    ServerLimit 10
    StartServers 4
    ThreadLimit 128 
    ThreadsPerChild 128 
    MinSpareThreads 256 
    MaxSpareThreads 512 
    MaxRequestWorkers 1280 
    MaxConnectionsPerChild 2048
</IfModule>

Optimising PHP-FPM

Now that we have increased the concurrency of Apache2, we now have to increase the number of PHP processing servers.

cd /etc/php/7.3/fpm/pool.d/ 
nano www.conf

Make sure the following is entered

pm = dynamic
pm.max_children = 100 
pm.start_servers = 20 
pm.min_spare_servers = 10 
pm.max_spare_servers = 30 
pm.process_idle_timeout = 10s;

Restart both process

sudo systemctl restart php7.3-fpm 
sudo systemctl restart apache2

And you're done! Congratulations! PHP processing is now handled by PHP-FPM!