DEV Community: balankdharan

Adding reCAPTCHA in MERN Application

balankdharan — Wed, 01 Nov 2023 03:50:00 +0000

Adding reCAPTCHA to your MERN website involves several steps. reCAPTCHA is a Google service used to protect your website from spam and abuse.

Get reCAPTCHA API Keys:

Go to the reCAPTCHA website and sign in with your Google account.

Create a new site by clicking on “Admin Console” and then “Create a site”.
Choose the “reCAPTCHA v2” type (I’m assuming you want the checkbox “I’m not a robot” version) and select “I’m not a robot” Checkbox.

Add your domain(s) to the list of allowed domains. This is important for security.

note: you can also add localhost here

Accept the reCAPTCHA Terms of Service and click “Submit”.
After creating the site, you’ll get a Site Key and a Secret Key. You will use the Site Key on the client-side and secret key on the backend.

Integrate reCAPTCHA in your React application:

In your HTML <head>, include the reCAPTCHA script.

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Install the react-google-recaptcha package to use the widget:

npm install react-google-recaptcha

In your React component where you have your form, add the reCAPTCHA widget using the react-google-recaptcha library or by manually rendering the widget.

import ReCAPTCHA from "react-google-recaptcha";

function MyFormComponent() {
  const onRecaptchaChange = (value) => {
    console.log(value)
    if(value){
       // send to backend for validation
    }
  };

  return (
    <form>
      // Your form fields
      <ReCAPTCHA
        sitekey="YOUR_SITE_KEY"
        onChange={onRecaptchaChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

When captcha check is correct you will receive the token in the onRecaptchaChange function, Value will be null if the user hasn’t solved the reCAPTCHA, then send the backend for more security.
It is better to add backend validation too.

Verify reCAPTCHA Token on the Server:

In your server, you should verify the reCAPTCHA response sent from the client. You can use the axios library to send a POST request to Google's reCAPTCHA verification endpoint.

First, install axiosif you haven't already:

npm install axios

Then, in your server route:

const axios = require('axios');

async function verifyRecaptcha(recaptchaResponse) {
  try {
    const response = await axios.post(
      "https://www.google.com/recaptcha/api/siteverify",
      null,
      {
        params: {
          secret: "YOUR_SECRET_KEY",
          response: recaptchaResponse,
        },
      }
    );

    return response.data.success;
  } catch (error) {
    console.error("Error verifying reCAPTCHA:", error);
    return false;
  }
}

app.post('/submit', async (req, res) => {
  const { recaptchaToken } = req.body; 

  try {
    const isRecaptchaValid = await verifyRecaptcha(recaptchaToken);

  if (!isRecaptchaValid) {
    return res.status(400).json({ error: "reCAPTCHA verification failed" });
  }else{
    //Add your success response here
}
  } catch (error) {
    console.log(error)
  }
});

In conclusion, integrating reCAPTCHA into your MERN website is a crucial step to enhance security and protect your forms from spam and abuse. The process involves adding reCAPTCHA to both the client-side (React) and server-side (Node.js/Express) of your application. On the client-side, you obtain reCAPTCHA API keys, integrate the reCAPTCHA widget into your React forms using a library like react-google-recaptcha, and handle the user's response. On the server-side, you verify the reCAPTCHA token sent from the client by making a POST request to Google's reCAPTCHA verification endpoint using the axios library, and based on the verification result, you decide whether to process the form data or show an error message. By following these steps, you can significantly enhance the security of your MERN application and protect it from unwanted spam and abuse.

Bun- All in one JavaScript runtime

balankdharan — Fri, 15 Sep 2023 06:05:01 +0000

Bun is a JavaScript runtime that is designed to be a drop-in replacement for Node.js. It is written in Zig and powered by JavaScript Core, which is the JavaScript engine used by Apple's Safari web browser.

Bun claims to be faster than Node.js, and it also has a smaller memory footprint. It also has a built-in bundler, test runner, and package manager, which makes it a more complete development toolkit than Node.js.

Here are some of the key features of Bun:

Fast: Bun is designed to be fast and efficient. It uses a variety of techniques to improve performance, such as:

Using a lightweight runtime
Compiling JavaScript to native code
Using a minimal set of APIs

Lightweight: Bun has a small memory footprint. This makes it ideal for running on devices with limited resources, such as IoT devices and mobile phones.

Complete toolkit: Bun includes a built-in bundler, test runner, and package manager. This makes it a complete development toolkit for JavaScript applications.

Extensible: Bun is extensible. You can write your own plugins and extensions to add new features or improve performance.

Here are some of the use cases of Bun:

Building web applications
Building serverless applications
Running microservices
Developing IoT applications
Developing mobile applications

Installing Bun :

It is supported for macOS, Linux, and WSL
Bun provides a limited, experimental native build for Windows. At the moment, only the Bun runtime is supported.

To install it on Windows You need some requirements:

You need to install WSL (Windows Subsystem for Linux) and ubuntu from windows store.(You can use any other method to install)

After that you need to go to the windows feature,

Simply enter Turn windows feature on or off in your search bar and check the box Windows Subsystem for Linux if not checked, And restart you computer

After that go to your visual studio code and install the WSL extension

So the last step is to use the launch the ubuntu terminal in VSC
(you can use any directory )

Enter the following commands to install:

sudo apt install unzip

curl -fsSL https://bun.sh/install | bash

Right now you should have installed the bun in your windows, To access the bun you need to set the source path ,

source /root/.bashrc

To install it on Linux or macOS :

Linux users - The unzip package is required to install Bun. Kernel version 5.6 or higher is strongly recommended, but the minimum is 5.1.

sudo apt install unzip // linux-users

curl -fsSL https://bun.sh/install | bash

Some code examples:

bun init

const server = Bun.serve({
  port: 3000,
  fetch(req) {
    return new Response("Bun!");
  },
});

console.log(`Listening on http://localhost:${server.port} ...`);

To run the code:

bun index.ts

You can write your script to start:

{
  "name": "example",
  "module": "index.ts",
  "type": "module",
  "scripts": {
    "start": "bun run index.ts"
  },
  "devDependencies": {
    "bun-types": "^0.7.0"
  }
}

bun run start

Bun is a new runtime, so it is not yet as widely used as Node.js. However, it is gaining popularity due to its performance and features. If you are looking for a fast and lightweight JavaScript runtime, Bun is a good option to consider.

Here are some of the advantages of using Bun:

Faster performance: Bun is designed to be faster than Node.js. This is because it uses a lightweight runtime and compiles JavaScript to native code.
Smaller memory footprint: Bun has a smaller memory footprint than Node.js. This makes it ideal for running on devices with limited resources, such as IoT devices and mobile phones. -** Complete toolkit:** Bun includes a built-in bundler, test runner, and package manager. This makes it a complete development toolkit for JavaScript applications.
Extensible: Bun is extensible. You can write your own plugins and extensions to add new features or improve performance.

Here are some of the disadvantages of using Bun:

Not as widely used as Node.js: Bun is a new runtime, so it is not yet as widely used as Node.js. This means that there may be fewer resources available for learning and using Bun.
Less mature: Bun is still under development, so it may not be as mature as Node.js. This means that there may be bugs or missing features.

Overall, Bun is a promising new JavaScript runtime that offers a number of advantages over Node.js. However, it is important to weigh the advantages and disadvantages before deciding whether to use Bun for your project.