DEV Community: Kumar Abhirup

Implementing Google reCAPTCHA with React and Node.js

Kumar Abhirup — Tue, 02 Jun 2020 11:00:25 +0000

In this tutorial, we will learn how to use reCAPTCHA v2 with React and Node.

Most of the tutorials online only cover the frontend part of this technology. The truth is, your captcha solution can only be useful, if it validates the input on backend.

Let's begin with how you can show the captcha checkbox on React Frontend by first setting up the Google reCAPTCHA console.

Setup Google reCAPTCHA Admin

Go to this URL to create a reCAPTCHA app.
Give the reCAPTCHA a label.
Select reCAPTCHA v2.
Add the domain name of where this captcha checkbox will be used. To test this checkbox on your development server, add localhost as your domain name.
Click Submit.

Now that you have created the app, you can get your reCAPTCHA keys.

Note that these keys are extremely important. The SITE KEY can be used in the client, but the SECRET KEY should be never used in the client. It should only be used in the backend.

Setup React Frontend

Install the react-google-recaptcha React Component. It will simplify this terrific process.



yarn add react-google-recaptcha

After you install the component, here's how you can display the reCAPTCHA checkbox on the frontend.



import ReCAPTCHA from "react-google-recaptcha"

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

export default function App() {
  return <ReCAPTCHA sitekey="YOUR_CLIENT_SITE_KEY" onChange={onChange} />
}

Make sure you replace YOUR_CLIENT_SITE_KEY with the real client site key that you got from the Google reCAPTCHA Console.

With the correct usage of the above code, you should see something like this in the browser.

Now, if you check your console, you will see the Captcha value: some_value logged on the console. That same value, will be sent to the backend to verify if the user is really not a robot.

Backend Verification

To verify the value that the backend gets, after the user checks the box, you will have to make a POST request to Google reCAPTCHA API.



POST https://www.google.com/recaptcha/api/siteverify

Here's how you do it in Node.js 👇



// Install 'es6-promise' and 'isomorphic-fetch' from NPM or Yarn.
require("es6-promise").polyfill()
require("isomorphic-fetch")

const RECAPTCHA_SERVER_KEY = process.env.RECAPTCHA_SERVER_KEY

const humanKey = "value_that_we_got_from_the_frontend"

// Validate Human
const isHuman = await fetch(`https://www.google.com/recaptcha/api/siteverify`, {
  method: "post",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/x-www-form-urlencoded; charset=utf-8"
  },
  body: `secret=${RECAPTCHA_SERVER_KEY}&response=${humanKey}`
})
  .then(res => res.json())
  .then(json => json.success)
  .catch(err => {
    throw new Error(`Error in Google Siteverify API. ${err.message}`)
  })

if (humanKey === null || !isHuman) {
  throw new Error(`YOU ARE NOT A HUMAN.`)
}

// The code below will run only after the reCAPTCHA is succesfully validated.
console.log("SUCCESS!")

Note: This article does not tell you how to communicate between frontend and backend, this article only tells you what logic to use in backend, to verify the reCAPTCHA string value you get from the frontend.

To understand the above code, we first need to understand what fetch() function results.



await fetch(`https://www.google.com/recaptcha/api/siteverify`, {
  method: "post",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/x-www-form-urlencoded; charset=utf-8"
  },
  body: `secret=${RECAPTCHA_SERVER_KEY}&response=${humanKey}`
})

The above snippet makes a POST request to the Google reCAPTCHA API route to get a response (to know if the humanKey we got from the frontend is correct or not).

We also supply RECAPTCHA_SERVER_KEY and the humanKey in the request body. Remember that the RECAPTCHA_SERVER_KEY should be kept secret. Do not push it in GitHub Open Source. Use Environment Variables.

Here's a Sample Response that the API gives us.



{
  "success": true,
  "challenge_ts": "ISODateString", // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": "string" // the hostname of the site where the reCAPTCHA was solved
}

The success: true is enough for us to understand that the user is not a robot. If success: false, then the humanKey we got was probably a wrong one or the user tried to hack in.

Aftermath

Once you get success: true, you would probably want to send your frontend a response that the reCAPTCHA was not botched and the user was not a robot.

You must be using some kind of an Express/Koa API Route, or a GraphQL backend where you can get API requests from the frontend to give it some response.

If you want to see it in practise, I have hosted my code here 🔥

I hope this tutorial gave you decent information on how you can validate your reCAPTCHA input on backend using Node.js and React.

Peace ✌️

🏆 About me

I am Kumar Abhirup, a 16-year-old JavaScript React developer from India who keeps learning a new thing every single day.

Connect with me on Twitter 🐦

Love what I write? Subscribe to Kumar&Thoughts and stay updated about the tech community, me and coding in general.

A beginner's guide for setting up autocomplete on OhMyZsh & Hyper with plugins & themes!

Kumar Abhirup — Mon, 27 Apr 2020 12:08:03 +0000

Your normal bash might have functions you normally need, but if you are a regular terminal user, zsh will be changing the way you type commands.

Features that zsh, ohmyzsh and hyper together provide will simply blow your mind.

Did you know you can control Spotify from your terminal? Yes, Hyper Plugins allow you to do that.

Setting up this stuff can be overwhelming for a beginner, so here's a very simple guide to get started! 🤩

🔥 Introduction

If you are using a regular terminal like what you see below, you are missing a lot of features that OhMyZsh provides.

Today, you'll be doing a terminal makeover to make it look like this...

Not just the looks, but OhMyZsh comes with ample of features to lighten up your programming journey.

At the end of the tutorial, this is what you would be able to do in your terminal...

NPM, Git autocomplete
Auto Suggestions while you type in the terminal
Syntax Highlighting that tells if a command is defined
Use the cursor to edit the terminal command
See git branch and git status of the current directory
Open new tabs with the same directory as the current tab
Use OhMyZsh features like navigating without using cd, usage of ll, easier tab-click based navigation, and much more!

❤️ Get Started

First, you have to install zsh. In some cases (depends on the OS you are running), it would already be installed. Therefore, check if it's installed by running zsh --version in your terminal.

The installation process for zsh is different in different Operating Systems. Checkout the Zsh Installation Guide to install zsh.

After you install Zsh, make sure you make it your default shell. Run the following in your terminal to do so.



$ sudo chsh -s $(which zsh)

Log out and Log in back to your default shell. Run echo $SHELL and the output /bin/zsh or similar is expected.

🔰 Installing OhMyZsh

Note that zsh and OhMyZsh are different.

Install OhMyZsh by running the following command in terminal.



$ sudo sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

When you install OhMyZsh, many plugins come with it for your rescue!

To add useful plugins, Open ~/.zshrc in TextEdit/Notepad/Vim/VSCode.

In the list of plugins that you see in the file, just add a plugin named npm, like this 👇



plugins=(
  git
  bundler
  dotenv
  osx
  rake
  rbenv
  ruby
  npm # you added this
)

Voila! You are done with OhMyZsh! To see the changes, run source ~/.zshrc in the terminal, and now you have the features of an OhMyZsh shell.

🔰 Installing HyperTerm by Zeit

Zeit (the creator of now.sh and Next.js) has created an awesome terminal app for us that is built in Electron.

Download Hyper from here.

⚛️ Configure Hyper with OhMyZsh

Open Hyper Terminal. You won't see OhMyZsh running there. So, go to Hyper Settings. On OSX, it's Hyper > Preferences.

That would open a .hyper.js file in your favorite editor. This file contains all the settings of your terminal that are super easy to control!

To enable OhMyZsh as a default shell in Hyper, make this change in .hyper.js 👇



- shell: '/bin/bash'
+ shell: '/bin/zsh'

And that would make OhMyZsh your default Hyper Terminal shell!

🤩 Autocomplete while you type a command

Git Clone the zsh-autocomplete plugin in the OhMyZsh plugin folder.



$ sudo git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

Once that is done, add the plugin in the ~/.zshrc file's plugin list.



plugins=(
  ...
  zsh-autosuggestions
)

🎉 Zsh sytax highlighting

Git Clone the zsh-syntax-highlighting plugin in the OhMyZsh plugin folder.



$ sudo git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

And once again add it in the plugins list of the .zshrc file.



plugins=(
  ... 
  zsh-syntax-highlighting
)

Note: To reflect every change you make, do source ~/.zshrc in the terminal.

📯 Enabling Hyper related features and themes

Open .hyper.js by toggling Settings of Hyper Terminal.

Check out the plugins: [...] section and paste these plugin names there.



plugins: [
  ...
  'hypercwd',
  'hyper-statusline',
  'hyper-alt-click',
  'hyperterm-safepaste',
  'hyper-search',
  'hypergoogle',
  'hyperborder',
  'hyper-tab-icons',
  'hyper-hide-title',
  'shades-of-purple-hyper'
],

Save the file and Hyper would automatically install those plugins and themes for you. To reflect the changes, just close and start Hyper Terminal again.

Hooray! You now have all the features in your terminal which were listed in the start of this DEV.to article.

BONUS: Setting up the same terminal configuration for Integrated Terminal in VSCode

In the VSCode Settings, add the following JSON key-value pairs and you'll be good to go!



{
  ...
  "terminal.integrated.shell.osx": "/bin/zsh",
  "terminal.integrated.fontSize": 16
}

And that is it folks!

🔥 Resources

🏆 About me

I am Kumar Abhirup, a 16-year-old JavaScript React developer from India who keeps learning a new thing every single day.

Connect with me on Twitter 🐦
My personal website and portfolio 🖥️

Comment below your better ways, and suggestions to improve this article. :)

6 Awesome JavaScript Snippets to read and learn from!

Kumar Abhirup — Thu, 09 Apr 2020 11:35:19 +0000

When I was a JavaScript newbie, I used to read a lot of code snippets.

Reading other people's code teaches us a lot. So, I make sure I read and understand a code snippet every day and I also share them on Twitter!

So, here are a few code-snippets I have read in the past few days!

1. Convert RGB colors to Hex Codes

Liquid error: internal

Here's the gist 🚀 https://github.com/30-seconds/30-seconds-of-code/blob/master/snippets/RGBToHex.md

2. Find the length of a string in bytes

Liquid error: internal

Here's the gist 🚀 https://github.com/30-seconds/30-seconds-of-code/blob/master/snippets/byteSize.md

3. Detect all kinds of Apple Devices

Liquid error: internal

4. Find factorial of any number

Liquid error: internal

Here's the gist 🚀 https://github.com/30-seconds/30-seconds-of-code/blob/master/snippets/factorial.md

5. Function to deep clone an object

Liquid error: internal

Here's the gist 🚀 http://bit.ly/deepclone

6. Convert any string into Camel Case

Liquid error: internal

Here's the gist 🚀 https://github.com/30-seconds/30-seconds-of-code/blob/master/snippets/toCamelCase.md

🔥 There are many more online!

30 Seconds Of Code is a very awesome nifty project that has tons of JavaScript Snippets to look at! They have CSS Snippets as well. 🤩

🏆 About me

I am Kumar Abhirup, a 16-year-old JavaScript React developer from India who keeps learning a new thing every single day.

Connect with me on Twitter 🐦
My personal website and portfolio 🖥️

Comment below your better ways, and suggestions to improve this post. :)

Next.js + Docker. Made easy.

Kumar Abhirup — Sat, 28 Mar 2020 09:31:08 +0000

This week while starting to build a huge SaaS product, I had to make many decisions. The biggest decision I made was to build that SaaS product with the Microservices architecture.

Thankfully, Lucas Chen had this amazing series that explained the React + GraphQL + Docker Microservices architecture. In his series, the backends were microservices but React was not hosted on Docker. I wanted it all on Docker, so I had to research a lot, about integrating React (especially Next.js) with Docker.

After a few days of research and setting up a Containerized Next.js App, I am here to share with you how to do it.

Hope you like it :)

🦋 Getting Started

Setting up a Next.js shouldn't be hard.

yarn create next-app

Wait! We are not doing it all from scratch.

Instead, I would recommend you to clone this repo. We will learn about containerized Next.js from there. In this way, you will be able to compare your progress to that repository so that you can ensure you don't get lost in a long tutorial.

KumarAbhirup / dockerized

Boilerplate to start with Docker setup (Next.js included)

🏄 dockerized

📦 Setup

🖥️ Development environment

git clone https://github.com/KumarAbhirup/dockerized dockerized # to clone project
cd dockerized # enter in the project
docker-compose up

Rename all the .env.example to .env.
Create a .env file in the root of the directory.
Visit http://localhost:3000/

⚒️ Linting

In VSCode

Install ESLint and Prettier VSCode extensions.
Done! Now you have live linting and autofixing setup!

In Any other IDE

Run yarn lint in indivisual packages to check for linting errors.
Run yarn lint:fix to fix the linting errors.

🦄 Info

We are following the micro-services architechture. That means, to install npm modules, you'll have to run yarn add in the respective packages.
To customize the linter, use .eslintrc and .prettierrc file. Learn more

📝 License

MIT © Kumar Abhirup

Created by Kumar Abhirup 👉 .

Peace ✌️

View on GitHub

The above repository includes...

A setup that is scalable. You may append your dockerized backends to it later.
ESLint + Prettier setup included.
It's TypeScript. :)

🔰 Things you need

Docker Installed on your machine
Some basic knowledge of Next.js

🚀 Clone and Setup the repository

Run the below command

git clone https://github.com/KumarAbhirup/dockerized dockerized
cd dockerized

Rename all the .env.example to .env. You'll find it in packages/landingpage
Create a .env file in the root of the directory.

As you cloned the project, the Next.js App is ready to run.

Just run the below command to fire up the development environment for the Next.js project.

docker-compose up

👁 But Kumar, how does this thing even work?

You might be wondering where your Next.js project is staying.

It is in the packages/landingpage...

You might be wondering why that Next.js project is kept deep inside the file system.

I did it because no one dockerizes Next.js when they are only using Next.js...

Dockerizing makes sense when you have a huge container architecture that connects your React frontends to the Containerized backends.

So, the repository would not just contain a Next.js project but would have backends kept in the same packages folder.

📦 How to containerize Next.js?

To use Docker to containerize any code, we need to have a Dockerfile in the package. Every container has its own Dockerfile.

Next.js too, will have its own Dockerfile. Let us take a look at it.

packages/landingpage/Dockerfile

FROM node:12

ENV PORT 3000

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Installing dependencies
COPY package*.json /usr/src/app/
RUN npm install

# Copying source files
COPY . /usr/src/app

# Building app
RUN npm run build
EXPOSE 3000

# Running the app
CMD "npm" "run" "dev"

Let me explain what's happening here. Here, by FROM node:12, we are telling Docker to work with the Node.js image.

ENV PORT 3000 just exposes the environment variable PORT=3000.

The below code snippet tells docker to create directories, namely /usr/src/app. We also tell Docker to use that directory as its primary workspace (for carrying out processes) hereafter.

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

The below code snippet copies package.json and package-lock.json from your local cloned repository to the Docker Container and then runs npm install on it. I recommend you to take a look at package.json of the Next.js container so you get the idea.

COPY package*.json /usr/src/app/
RUN npm install

Now that we have all the node_modules ready, below code will copy our code from our local computer directory and will put it into the Docker Container Directory.

# Copying source files
COPY . /usr/src/app

Then the Dockerfile builds the Next.js app, exposes port 3000 (where Next.js works by default), and runs the command npm run dev.

# Building app
RUN npm run build
EXPOSE 3000

# Running the app
CMD "npm" "run" "dev"

I hope you understood all that is happening due to the Dockerfile.

Now, we have successfully containerized the application with Next.js! But we are not yet done.

For hot-reloading to work with Next.js and Docker, you need to have the below code snippet added to the packages/landingpage/next.config.js.

module.exports = {
  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300,
    }

    return config
  },
}

We are still not done!

To run all our containers (in this case only one) together successfully, we will need a docker-compose.yml file in the root of the project.

Check out the docker-compose.yml in your folder structure.

version: "3.3"

services:
  nextjs:
    ports:
      - 3000:3000
    build:
      context: packages/landingpage
      dockerfile: Dockerfile
    volumes:
      - ./packages/landingpage:/usr/src/app
      - /usr/src/app/node_modules
      - /usr/src/app/.next
    env_file:
      - .env

The above code snippet makes sure that port 3000 is exposed. The docker-compose.yml file also tells Docker what services to build and which Dockerfile to use.

The env_file tells the composer to use a .env file which if you have not yet made in your project, please add it for it to work.

The volumes part is very important here. Without it, your Next.js will work, but the _Hot Reloading Developmental Feature` would not work.

🔥 Hurray!

If you surf through the repository carefully, you will understand how to containerize Next.js with Docker.

We are done!

To run the Dockerized Next.js app...

Run docker-compose up and open http://localhost:3000 in your browser.

To make changes in code, make changes to packages/landingpage/pages/index.tsx file to see your website development experience come alive.

🚀 For production

When deploying to production, just make sure that you make a small change in your packages/landingpage/Dockerfile.

Change the last line (CMD "npm" "run" "dev") to CMD "npm" "start".

❤️ Links

🏆 About me

I am Kumar Abhirup, a 16-year-old JavaScript React developer from India who keeps learning a new thing every single day.

Connect with me on Twitter 🐦
My personal website and portfolio 🖥️

Comment below your better ways, and suggestions to improve this post. :)

let vs const - Let's discuss.

Kumar Abhirup — Sun, 22 Mar 2020 10:35:15 +0000

We all are familiar with the difference between const, let and var. If not, please read this.

Var, let and const- what's the difference?

Sarah Chima ・ Oct 25 '17 ・ 5 min read

#es6 #javascipt #newbie

For those who are familiar, should know that in the modern-day JavaScript, YOU SHOULD NEVER USE var.

So now, what we are left with, is the let and const.

🔥 The two scenarios

People believe their ways of using them both. Strongly.

Here are the two types of people.

1) Those who use const for Constants (Like for const PI = 3.14)
2) Those who use const for everything that won't be let

📯 const for Constants

Some people believe that const should only be used for strictly constant values like the Action Type Reducer Strings, Math values and constants like PI, etc.

If you are that person, you are from team CONSTANT SPARINGLY.

📯 const for everything that won't be let

If you always use const, no matter what, and only use let when you change a variable, you are from team CONSTANT FOR ALL.

There has been a lot of talk around it on Twitter due to this tweet by Dan Abramov.

Dan Abramov

@dan_abramov

TC39 members: const was a mistake.
Reddit: NO DAN YOU'RE WRONG YOU JUST DONT UNDERSTAND JAVASCRIPTS

12:53 PM - 21 Dec 2019

The tweet pretty much sums up that he is from the team CONSTANT SPARINGLY.

If you have been seeing WesBos' tutorials, he seems like he is from the team CONSTANT FOR ALL.

Dan has provided a beautiful explanation for why he thinks const shouldn't be used.

Also, this writeup here focuses on easily concluding this discussion. But still, what's your opinion on it?

What do you prefer? Let's Discuss!

async/await Crash Course

Kumar Abhirup — Sat, 22 Feb 2020 11:41:38 +0000

🔥 Learn async/await (very basics) here 👇

When you learn async/await in #JavaScript,

you quickly fall into words like

Synchronous & Asynchronous code
Event Loops
Promises

These things aren't easy to understand in one go.

Complex theories gatekeep beginners.

So, we will only learn about practical stuff.

Let us first learn about "Promises"

In the below snippet, what we are intending is to
output Done First
and then output Done Last.

But the below snippet outputs "Done Last" first.

That is now JavaScript behaves. It does not wait by default.

To make JavaScript wait for a second

to output Done First

and then print Done Last...

We use Promise constructor.

It accepts a function as the only argument.

The function receives few params. 2 of them being resolve and reject

resolve accepts arguments.

These arguments later become the params in the .then() function.

So, the .then() function runs only after the promise is resolved.

Well, don't create a Promise just for a "console.log after setTimeout".

This was just for explanation. 🙂

Now, here's the async/await part.

promise.then(() => console.log('Done Last.'))

can also be written as

 await promise
 console.log('Done Last.')

Just like in the below snippet. It just works!

Wondering what's the async part in the below snippet?

The await keyword only happens to work inside an async function.

An async function tells the compiler ahead of time that the function will be returning a Promise and will not have a value resolved right away.

I hope that gives a basic idea about what async/await is and what it does.

Here are two nice resources about it 🔥

If you spot a mistake, let everyone know 🙌

About me

I am Kumar Abhirup, a 16-year-old JavaScript React developer from India who keeps learning a new thing every single day.

Connect with me on Twitter 🐦
My personal website and portfolio 🖥️

Comment below your better ways, and suggestions to improve this post. :)

Top 5 Awesome Things to do in your README!

Kumar Abhirup — Mon, 10 Feb 2020 10:16:12 +0000

README.md is the landing page of your code.

If you are building an open-source repository, README is the most important file in the whole repository.

It has to not just look good, but also read well.

It should tell its readers everything.

Usage
Installation
Website
Version
Are tests failing or passing?
Average Activity
User Testimonies
License
Star Gazers on GitHub
And much more...

The good news is, most of the above information can be expressed in just a few dynamic SVG elements!

You have seen them already, everywhere... in every famous repository.

I really like how Mr. Ahmed Awais writes his READMEs. See an example here.

What are README Badges?

See this 👇

Your badges don't have to be that boring.

You can check out all the badges you can use here.

Here are 5 must-have README badges!