Sending emails in JS: Next.js+Brevo. Part 2

12/29/2024

sending emails in JS

In this article, we will continue our exploration of sending emails in JS by adding new features to the contact form we created in our previous post: Sending emails in JS: Next.js+Brevo

Contact forms are often exposed to spam bots. When these automated programs discover a form on your site, they will relentlessly attempt to fill it out and submit it. In this post, we’ll explore strategies to protect your contact forms from unwanted spam.

Make sure you have a Brevo account:

A a free Brevo account Create free account Compare plans

And you subscribed to this newsletter and…

…downloaded the previous version of the demo app:

Tech stack: Next.js 15 (SSR mode), TypeScript, Axios, Tailwind.

Contact form next.js typescript

Got it? Let's continue.

How to secure our contact form from bots?

Currently, there is only one thing that secures the form. It will not work without JavaScript enabled.

How we can secure it more? We can:

  • add a hidden input, which must be left empty aka honeypot (bots may not know it and fill it with some value)
  • add text input with a qestion to answer by your user, eg. "write dog" or "2+22="
  • use graphical captcha
  • use interactive task, eg. move something to the correct position
  • use external captcha solutions like recaptcha from Google

Step 1: Let's add a honeypot

A new field in the form that is hidden for humans but still in the form for bots:

<input
  type="text"
  placeholder="Your question"
  value=""
  className="contact-form-question hidden"
/>

Read it's value on submit:

const questionValue = target.querySelector(".contact-form-question")?.value;

And let's include that value in request too:

body: JSON.stringify({ email, name, message, question: questionValue }),

The whole contact form component with a honeypot question:

"use client";
import { useState } from "react";

export default function EmailForm() {
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [message, setMessage] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    const target = e.target;
    const questionValue = target.querySelector(".contact-form-question")?.value;
    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, name, message, question: questionValue }),
      });

      if (response.ok) {
        // Handle success (e.g., show a success message)
      }
    } catch (error) {
      console.error("Error:", error);
      alert("An error occurred.");
    }
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md"
    >
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e)=> setName(e.target.value)}
        required
        className="w-full px-4 py-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black"
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e)=> setEmail(e.target.value)}
        required
        className="w-full px-4 py-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black"
      />
      <textarea
        placeholder="Your Message"
        value={message}
        onChange={(e)=> setMessage(e.target.value)}
        required
        className="w-full px-4 py-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black resize-none"
        rows={4}
      ></textarea>
      <input
        type="text"
        placeholder="Your question"
        value=""
        className="contact-form-question hidden"
      />
      <button
        type="submit"
        className="w-full px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
      >
        Send
      </button>
    </form>
  );
}

Let's update the api handler.

We need to get the new value and check if it's value is empty, if not throw an error:

const { name, email, message, question } = req.body;
try {
  if (question?.length) {
    console.log("Bot detected", {
      name,
      email,
      message,
      honeypotTrap: question,
    });
    return res.status(200).json({ message: "Thank you!" });
  }
  ...
}

The full file content with brevo api transactional api request that actualy send an email from your JS backend part in next.js:

import axios from "axios";

export default async function handler(req, res) {
  if (req.method === "POST") {
    const { name, email, message, question } = req.body;
    try {
      if (question?.length) {
        console.log("Bot detected", {
          name,
          email,
          message,
          honeypotTrap: question,
        });
        return res.status(200).json({ message: "Thank you!" });
      }
      const response = await axios.post(
        "https://api.brevo.com/v3/smtp/email",
        {
          sender: {
            name: process.env.TARGET_NAME,
            email: process.env.TARGET_EMAIL,
          },
          to: [{ email: process.env.TARGET_EMAIL }],
          subject: "Contact Form Submission",
          htmlContent: `<html>
              <body>
                <h1>Contact Form Submission</h1>
                <p><strong>Name:</strong> ${name}</p>
                <p><strong>Email:</strong> ${email}</p>
                <p><strong>Message:</strong></p>
                <p>${message}</p>
              </body>
            </html>
          `,
        },
        {
          headers: {
            "api-key": process.env.BREVO_API_KEY,
            "Content-Type": "application/json",
            accept: "application/json",
          },
        }
      );

      return res
        .status(200)
        .json({ message: "Email sent successfully!", data: response.data });
    } catch (error) {
      console.error("Error sending email:", error);
      return res
        .status(500)
        .json({ error: "Failed to send email", details: error.message });
    }
  } else {
    res.setHeader("Allow", ["POST"]);
    return res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

Sending emails in JS secured with a simple interactive task

It won't be difficult to prevent targeted attacks, where human intervention is involved, but for generic attacks, such a custom solution might be more challenging.

Assumptions:

  • The server maintains your list of colors,
  • and a code selects, for example, five of them
  • we present a task to visitors, to sort displayed colors, them from lightest to darkest
  • to simplfy the task, colors are sorted but shifted by a random number and visitor just has to click on the whole filed till colors are in the right order

This is how this newly component will look (you can click at it):

Complete the bot prevention task: Click to sort the colors from lightest to darkest:

Let's add that custom "CAPTCHA"

We will prepare a sorted list of colors, from the lightest to the darkest. Only those colors the backend will only accept:

// Sorted colors from the lightest to the darkest:
const sortedSecureColors = [
  "#fee2e2",
  "#fca5a5",
  "#ef4444",
  "#b91c1c",
  "#7f1d1d",
  "#450a0a",
  "#000000",
];

Next we will add 2 configurable constants:

const requiredColors = 5; // required number of colors in our component
export const securityColorsSeparator = ";;"; // colors are sent in string, this string will separate each color

// This function moves the last color to the first position in a given array
export const shiftSecureColors = (values) => [
  values[values.length - 1],
  ...values.slice(0, -1),
];

// This function prepares first array to display to a user
export const getSecureColors = () => {
  const startIndex = Math.floor(
    Math.random() * (sortedSecureColors.length - requiredColors)
  );
  const randomShifts = Math.floor(Math.random() * (requiredColors - 1)) + 1;
  let returnArray = sortedSecureColors.slice(
    startIndex,
    startIndex + requiredColors
  );
  for (let i = 0; i < randomShifts; i++) {
    returnArray = shiftSecureColors(returnArray);
  }
  return returnArray;
};

// This function looks for invalid color or a valid color in invalid location
const areSecurityColorsInvalid = (values): boolean => {
  try {
    const colors = values?.split(securityColorsSeparator);
    if (colors.length !== requiredColors) {
      return false;
    }
    const invalidColor = colors.find(
      (color, index) =>
        !sortedSecureColors.includes(color) ||
        (index < colors.length - 1 &&
          sortedSecureColors.indexOf(colors[index]) >
            sortedSecureColors.indexOf(colors[index + 1]))
    );
    return !!invalidColor;
  } catch {
    return false;
  }
};

We also need to update the function that handles requests. We need to retrieve colors are check if provided values is invalid:

export default async function handler(
  req,
  res
) {
if (req.method === "POST") {
    const { name, email, message, question, securityColors } = req.body;
    try {
      const isSecurityCheckInvalid = areSecurityColorsInvalid(securityColors);
      if (question?.length || isSecurityCheckInvalid) {
        console.log("Bot detected", {
          name,
          email,
          message,
          honeypotTrap: question,
          securityColors,
          areSecurityColorsInvalid: isSecurityCheckInvalid,
        });
        return res.status(200).json({ message: botResponseMessage });
      }
      await axios.post(
        "https://api.brevo.com/v3/smtp/email",

      ...

The whole example app is available to download for subscribers:

Subscribe to the newsletter

Frontend contact form component

Here's the updated contact form component:

"use client";
import {
  botResponseMessage,
  securityColorsSeparator,
} from "@/pages/api/contact";
import { useState } from "react";

export default function EmailForm({ colors }) {
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [message, setMessage] = useState("");
  const [securityColors, setSecurityColors] = useState();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const target = e.target;
    const questionValue = target.querySelector(".contact-form-question")?.value;
    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          email,
          name,
          message,
          question: questionValue,
          securityColors: securityColors?.join(securityColorsSeparator),
        }),
      });

      if (response.ok) {
        const data = await response.json();
        if (data.message === botResponseMessage) {
          alert("Security check has failed. Your message hasn't been sent.");
          return;
        }
        alert("Email sent successfully!");
      } else {
        alert("Failed to send email.");
      }
    } catch (error) {
      console.error("Error:", error);
      alert("An error occurred.");
    }
  };

  const isDisabled = !securityColors?.length;

  const onSecurityColorsMove = () => {
    const values = securityColors ?? colors;
    setSecurityColors([values[values.length - 1], ...values.slice(0, -1)]);
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md"
    >
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e)=> setName(e.target.value)}
        required
        className="w-full px-4 py-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black"
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e)=> setEmail(e.target.value)}
        required
        className="w-full px-4 py-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black"
      />
      <textarea
        placeholder="Your Message"
        value={message}
        onChange={(e)=> setMessage(e.target.value)}
        required
        className="w-full px-4 py-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black resize-none"
        rows={4}
      ></textarea>
      <input
        type="text"
        placeholder="Your question"
        value=""
        className="contact-form-question hidden"
      />
      <div
        className="flex flex-col gap-2 mb-2 cursor-pointer border border-gray-300 rounded-md hover:ring-blue-500 hover:ring-2 p-4 transition-colors duration-300"
        onClick={onSecurityColorsMove}
      >
        <div className="select-none">
          Complete the bot prevention task: Click to sort the colors from
          lightest to darkest:
        </div>
        <div className="flex gap-2">
          {(securityColors ?? colors).map((color) => (
            <div
              key={color}
              style={{ width: 60, height: 30, background: color }}
            ></div>
          ))}
        </div>
      </div>
      <button
        type="submit"
        className={`w-full px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 ${
          isDisabled
            ? "bg-gray-300 hover:bg-gray-300 text-gray-500 cursor-not-allowed"
            : ""
        }`}
        disabled={isDisabled}
      >
        Send
      </button>
    </form>
  );
}

Sign Up to get a ZIP with complete working demo app

Subscribe to the newsletter

Tech stack: Next.js 15 (SSR mode), TypeScript, Axios, Tailwind.

Contact form next.js typescript

Sending emails in JS final note

Contact forms are essential for facilitating communication between businesses and their customers, but they are also particularly vulnerable to bot attacks.

To enhance our contact form security, we implemented a custom simple Next.js solution on both the frontend and the backend.

Despite implementing security measures such as CAPTCHAs or honeypots, no solution is foolproof, and some bots can still bypass these defenses.

Exclusive content
Bonus Tips
Early content access