Signup form protection quick start
Arcjet signup form protection combines rate limiting, bot protection, and email validation to protect your signup forms from abuse.
What is Arcjet?
Arcjet helps developers protect their apps in just a few lines of code. Bot detection. Rate limiting. Email validation. Attack protection. Data redaction. A developer-first approach to security.Quick start
This guide will show you how to protect your
1. Install Arcjet SDK
In your project root, run the following command to install the SDK:
bun add @arcjet/bunnpm i @arcjet/nestpnpm add @arcjet/nestyarn add @arcjet/nestnpm i @arcjet/nextpnpm add @arcjet/nextyarn add @arcjet/nextnpm i @arcjet/nodepnpm add @arcjet/nodeyarn add @arcjet/nodenpm i @arcjet/remixpnpm add @arcjet/remixyarn add @arcjet/remixnpm i @arcjet/sveltekitpnpm add @arcjet/sveltekityarn add @arcjet/sveltekit2. Set your key
Create a free Arcjet account then follow the
instructions to add a site and get a key. Add it to a .env.local file in your
ARCJET_KEY=ajkey_yourkeyARCJET_KEY=ajkey_yourkeyARCJET_KEY=ajkey_yourkeySince NODE_ENV for you, you also
need to set ARCJET_ENV in your environment file. This allows Arcjet to accept
a local IP address for development purposes.
# NODE_ENV is not set automatically, so tell Arcjet we're in dev# You can leave this unset in prodARCJET_ENV=development# Get your site key from https://app.arcjet.comARCJET_KEY=ajkey_yourkeySince NODE_ENV for you, you also
need to set ARCJET_ENV in your environment file. This allows Arcjet to accept
a local IP address for development purposes.
# NODE_ENV is not set automatically, so tell Arcjet we're in dev# You can leave this unset in prodARCJET_ENV=development# Get your site key from https://app.arcjet.comARCJET_KEY=ajkey_yourkeySince NODE_ENV for you, you also
need to set ARCJET_ENV in your environment file. This allows Arcjet to accept
a local IP address for development purposes.
# NODE_ENV is not set automatically, so tell Arcjet we're in dev# You can leave this unset in prodARCJET_ENV=development# Get your site key from https://app.arcjet.comARCJET_KEY=ajkey_yourkey3. Protect a form
Arcjet signup form protection is a combination of the rate limiting, bot protection, and email validation primitives. These are configured using our recommended rules.
The example below is a simple email form. You could adapt this as part of a signup form.
import arcjet, { protectSignup } from "@arcjet/bun";
const aj = arcjet({ // Get your site key from https://app.arcjet.com and set it as an environment // variable rather than hard coding. key: Bun.env.ARCJET_KEY!, rules: [ protectSignup({ email: { mode: "LIVE", // will block requests. Use "DRY_RUN" to log only // Block emails that are disposable, invalid, or have no MX records block: ["DISPOSABLE", "INVALID", "NO_MX_RECORDS"], }, bots: { mode: "LIVE", // configured with a list of bots to allow from // https://arcjet.com/bot-list allow: [], // "allow none" will block all detected bots }, // It would be unusual for a form to be submitted more than 5 times in 10 // minutes from the same IP address rateLimit: { // uses a sliding window rate limit mode: "LIVE", interval: "10m", // counts requests over a 10 minute sliding window max: 5, // allows 5 submissions within the window }, }), ],});
export default { port: 3000, fetch: aj.handler(async (req) => { // Get email from Bun request body const formData = await req.formData(); const email = formData.get("email")?.toString() ?? "";
const decision = await aj.protect(req, { email }); console.log("Arcjet decision", decision);
if (decision.isDenied()) { if (decision.reason.isEmail()) { // If the email is invalid then return an error message return new Response("Invalid email", { status: 400 }); } else { // We get here if the client is a bot or the rate limit has been exceeded return new Response("Forbidden", { status: 403 }); } }
return new Response("Hello world"); }),};import arcjet, { protectSignup } from "@arcjet/bun";
const aj = arcjet({ // Get your site key from https://app.arcjet.com and set it as an environment // variable rather than hard coding. key: Bun.env.ARCJET_KEY, rules: [ protectSignup({ email: { mode: "LIVE", // will block requests. Use "DRY_RUN" to log only // Block emails that are disposable, invalid, or have no MX records block: ["DISPOSABLE", "INVALID", "NO_MX_RECORDS"], }, bots: { mode: "LIVE", // configured with a list of bots to allow from // https://arcjet.com/bot-list allow: [], // "allow none" will block all detected bots }, // It would be unusual for a form to be submitted more than 5 times in 10 // minutes from the same IP address rateLimit: { // uses a sliding window rate limit mode: "LIVE", interval: "10m", // counts requests over a 10 minute sliding window max: 5, // allows 5 submissions within the window }, }), ],});
export default { port: 3000, fetch: aj.handler(async (req) => { // Get email from Bun request body const formData = await req.formData(); const email = formData.get("email")?.toString() ?? "";
const decision = await aj.protect(req, { email }); console.log("Arcjet decision", decision);
if (decision.isDenied()) { if (decision.reason.isEmail()) { // If the email is invalid then return an error message return new Response("Invalid email", { status: 400 }); } else { // We get here if the client is a bot or the rate limit has been exceeded return new Response("Forbidden", { status: 403 }); } }
return new Response("Hello world"); }),};Create the API route handler to receive the form submission:
import arcjet, { protectSignup } from "@arcjet/next";import { NextResponse } from "next/server";
const aj = arcjet({ key: process.env.ARCJET_KEY!, // Get your site key from https://app.arcjet.com rules: [ protectSignup({ email: { mode: "LIVE", // will block requests. Use "DRY_RUN" to log only // Block emails that are disposable, invalid, or have no MX records block: ["DISPOSABLE", "INVALID", "NO_MX_RECORDS"], }, bots: { mode: "LIVE", // configured with a list of bots to allow from // https://arcjet.com/bot-list allow: [], // "allow none" will block all detected bots }, // It would be unusual for a form to be submitted more than 5 times in 10 // minutes from the same IP address rateLimit: { // uses a sliding window rate limit mode: "LIVE", interval: "10m", // counts requests over a 10 minute sliding window max: 5, // allows 5 submissions within the window }, }), ],});
export async function POST(req: Request) { const data = await req.json(); const email = data.email;
const decision = await aj.protect(req, { email, });
console.log("Arcjet decision: ", decision);
if (decision.isDenied()) { if (decision.reason.isEmail()) { return NextResponse.json( { message: "Invalid email", reason: decision.reason, }, { status: 400 }, ); } else { return NextResponse.json({ message: "Forbidden" }, { status: 403 }); } } else { return NextResponse.json({ message: "Hello world", }); }}Next, create the form page:
import React, { useState } from "react";
export default function Page() { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null);
async function onSubmit(event) { event.preventDefault(); setIsLoading(true); setError(null); // Clear previous errors when a new request starts
try { const formData = new FormData(event.currentTarget); const response = await fetch("/api/form", { method: "POST", body: JSON.stringify(Object.fromEntries(formData)), headers: { "Content-Type": "application/json", }, });
if (!response.ok) { const error = await response.json(); throw new Error( `${response.status} ${response.statusText}: ${error.message}`, ); }
// Handle response if necessary const data = await response.json(); // ... } catch (error) { // Capture the error message to display to the user setError(error.message); console.error(error); } finally { setIsLoading(false); } }
return ( <div> {error && <div style={{ color: "red" }}>{error}</div>} <form onSubmit={onSubmit}> <label htmlFor="email">Email</label> {/* This is a "text" input type rather than "email" to demonstrate Arcjet validating invalid emails. Changing to "email" will allow the browser to validate as well */} <input type="text" defaultValue={"invalid@email"} name="email" id="email" /> <button type="submit" disabled={isLoading}> {isLoading ? "Loading..." : "Submit"} </button> </form> </div> );}Create the API route handler to receive the form submission:
import arcjet, { protectSignup } from "@arcjet/next";import type { NextApiRequest, NextApiResponse } from "next";
const aj = arcjet({ key: process.env.ARCJET_KEY!, // Get your site key from https://app.arcjet.com rules: [ protectSignup({ email: { mode: "LIVE", // will block requests. Use "DRY_RUN" to log only // Block emails that are disposable, invalid, or have no MX records block: ["DISPOSABLE", "INVALID", "NO_MX_RECORDS"], }, bots: { mode: "LIVE", // configured with a list of bots to allow from // https://arcjet.com/bot-list allow: [], // "allow none" will block all detected bots }, // It would be unusual for a form to be submitted more than 5 times in 10 // minutes from the same IP address rateLimit: { // uses a sliding window rate limit mode: "LIVE", interval: "10m", // counts requests over a 10 minute sliding window max: 5, // allows 5 submissions within the window }, }), ],});
export default async function handler( req: NextApiRequest, res: NextApiResponse,) { const data = req.body; const email = data.email;
const decision = await aj.protect(req, { // The submitted email is passed to the protect function email, });
console.log("Arcjet decision: ", decision);
if (decision.isDenied()) { if (decision.reason.isEmail()) { return res.status(400).json({ message: "Invalid email", reason: decision.reason, }); } else { // This returns an error which is then displayed on the form, but you // could take other actions such as redirecting to an error page. See // https://nextjs.org/docs/pages/building-your-application/data-fetching/forms-and-mutations#redirecting return res.status(403).json({ message: "Forbidden", }); } } else { // The form submission is allowed to proceed so do something with it here
res.status(200).json({ name: "Hello world" }); }}Next, create the form page:
"use client";import React, { useState, type FormEvent } from "react";
export default function Page() { const [isLoading, setIsLoading] = useState<boolean>(false); const [error, setError] = useState<string | null>(null);
async function onSubmit(event: FormEvent<HTMLFormElement>) { event.preventDefault(); setIsLoading(true); setError(null); // Clear previous errors when a new request starts
try { const formData = new FormData(event.currentTarget); const response = await fetch("/api_app/form", { method: "POST", body: JSON.stringify(Object.fromEntries(formData)), headers: { "Content-Type": "application/json", }, });
if (!response.ok) { const error = await response.json(); throw new Error( `${response.status} ${response.statusText}: ${error.message}`, ); }
// Handle response if necessary const data = await response.json(); // ... } catch (error: any) { // Capture the error message to display to the user setError(error.message); console.error(error); } finally { setIsLoading(false); } }
return ( <div> {error && <div style={{ color: "red" }}>{error}</div>} <form onSubmit={onSubmit}> <label htmlFor="email">Email</label> {/* This is a "text" input type rather than "email" to demonstrate Arcjet validating invalid emails. Changing to "email" will allow the browser to validate as well */} <input type="text" defaultValue={"invalid@email"} name="email" id="email" /> <button type="submit" disabled={isLoading}> {isLoading ? "Loading..." : "Submit"} </button> </form> </div> );}Create the API route handler to receive the form submission:
import arcjet, { protectSignup } from "@arcjet/next";import { NextResponse } from "next/server";
const aj = arcjet({ key: process.env.ARCJET_KEY, // Get your site key from https://app.arcjet.com rules: [ protectSignup({ email: { mode: "LIVE", // will block requests. Use "DRY_RUN" to log only // Block emails that are disposable, invalid, or have no MX records block: ["DISPOSABLE", "INVALID", "NO_MX_RECORDS"], }, bots: { mode: "LIVE", // configured with a list of bots to allow from // https://arcjet.com/bot-list allow: [], // "allow none" will block all detected bots }, // It would be unusual for a form to be submitted more than 5 times in 10 // minutes from the same IP address rateLimit: { // uses a sliding window rate limit mode: "LIVE", interval: "10m", // counts requests over a 10 minute sliding window max: 5, // allows 5 submissions within the window }, }), ],});
export async function POST(req) { const data = await req.json(); const email = data.email;
const decision = await aj.protect(req, { email, });
console.log("Arcjet decision: ", decision);
if (decision.isDenied()) { if (decision.reason.isEmail()) { return NextResponse.json( { message: "Invalid email", reason: decision.reason, }, { status: 400 }, ); } else { return NextResponse.json({ message: "Forbidden" }, { status: 403 }); } } else { return NextResponse.json({ message: "Hello world", }); }}Next, create the form page:
import React, { useState } from "react";
export default function Page() { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null);
async function onSubmit(event) { event.preventDefault(); setIsLoading(true); setError(null); // Clear previous errors when a new request starts
try { const formData = new FormData(event.currentTarget); const response = await fetch("/api/form", { method: "POST", body: JSON.stringify(Object.fromEntries(formData)), headers: { "Content-Type": "application/json", }, });
if (!response.ok) { const error = await response.json(); throw new Error( `${response.status} ${response.statusText}: ${error.message}`, ); }
// Handle response if necessary const data = await response.json(); // ... } catch (error) { // Capture the error message to display to the user setError(error.message); console.error(error); } finally { setIsLoading(false); } }
return ( <div> {error && <div style={{ color: "red" }}>{error}</div>} <form onSubmit={onSubmit}> <label htmlFor="email">Email</label> {/* This is a "text" input type rather than "email" to demonstrate Arcjet validating invalid emails. Changing to "email" will allow the browser to validate as well */} <input type="text" defaultValue={"invalid@email"} name="email" id="email" /> <button type="submit" disabled={isLoading}> {isLoading ? "Loading..." : "Submit"} </button> </form> </div> );}Create the API route handler to receive the form submission:
import arcjet, { protectSignup } from "@arcjet/next";import { NextResponse } from "next/server";
const aj = arcjet({ key: process.env.ARCJET_KEY, // Get your site key from https://app.arcjet.com rules: [ protectSignup({ email: { mode: "LIVE", // will block requests. Use "DRY_RUN" to log only // Block emails that are disposable, invalid, or have no MX records block: ["DISPOSABLE", "INVALID", "NO_MX_RECORDS"], }, bots: { mode: "LIVE", // configured with a list of bots to allow from // https://arcjet.com/bot-list allow: [], // "allow none" will block all detected bots }, // It would be unusual for a form to be submitted more than 5 times in 10 // minutes from the same IP address rateLimit: { // uses a sliding window rate limit mode: "LIVE", interval: "10m", // counts requests over a 10 minute sliding window max: 5, // allows 5 submissions within the window }, }), ],});
export async function POST(req) { const data = await req.json(); const email = data.email;
const decision = await aj.protect(req, { email, });
console.log("Arcjet decision: ", decision);
if (decision.isDenied()) { if (decision.reason.isEmail()) { return NextResponse.json( { message: "Invalid email", reason: decision.reason, }, { status: 400 }, ); } else { return NextResponse.json({ message: "Forbidden" }, { status: 403 }); } } else { return NextResponse.json({ message: "Hello world", }); }}Next, create the form page:
"use client";import React, { useState, type FormEvent } from "react";
export default function Page() { const [isLoading, setIsLoading] = useState<boolean>(false); const [error, setError] = useState<string | null>(null);
async function onSubmit(event: FormEvent<HTMLFormElement>) { event.preventDefault(); setIsLoading(true); setError(null); // Clear previous errors when a new request starts
try { const formData = new FormData(event.currentTarget); const response = await fetch("/api_app/form", { method: "POST", body: JSON.stringify(Object.fromEntries(formData)), headers: { "Content-Type": "application/json", }, });
if (!response.ok) { const error = await response.json(); throw new Error( `${response.status} ${response.statusText}: ${error.message}`, ); }
// Handle response if necessary const data = await response.json(); // ... } catch (error: any) { // Capture the error message to display to the user setError(error.message); console.error(error); } finally { setIsLoading(false); } }
return ( <div> {error && <div style={{ color: "red" }}>{error}</div>} <form onSubmit={onSubmit}> <label htmlFor="email">Email</label> {/* This is a "text" input type rather than "email" to demonstrate Arcjet validating invalid emails. Changing to "email" will allow the browser to validate as well */} <input type="text" defaultValue={"invalid@email"} name="email" id="email" /> <button type="submit" disabled={isLoading}> {isLoading ? "Loading..." : "Submit"} </button> </form> </div> );}import arcjet, { protectSignup } from "@arcjet/node";import express from "express";
const app = express();const port = 3000;
app.use(express.urlencoded({ extended: false }));
const aj = arcjet({ // Get your site key from https://app.arcjet.com and set it as an environment // variable rather than hard coding. key: process.env.ARCJET_KEY!, rules: [ protectSignup({ email: { mode: "LIVE", // will block requests. Use "DRY_RUN" to log only // Block emails that are disposable, invalid, or have no MX records block: ["DISPOSABLE", "INVALID", "NO_MX_RECORDS"], }, bots: { mode: "LIVE", // configured with a list of bots to allow from // https://arcjet.com/bot-list allow: [], // "allow none" will block all detected bots }, // It would be unusual for a form to be submitted more than 5 times in 10 // minutes from the same IP address rateLimit: { // uses a sliding window rate limit mode: "LIVE", interval: "10m", // counts requests over a 10 minute sliding window max: 5, // allows 5 submissions within the window }, }), ],});
app.post("/", async (req, res) => { const email = req.body.email;
const decision = await aj.protect(req, { email }); console.log("Arcjet decision", decision);
if (decision.isDenied()) { if (decision.reason.isEmail()) { // If the email is invalid then return an error message res.writeHead(400, { "Content-Type": "application/json" }); res.end( JSON.stringify({ error: "Invalid email", reason: decision.reason }), ); } else { // We get here if the client is a bot or the rate limit has been exceeded res.writeHead(403, { "Content-Type": "application/json" }); res.end(JSON.stringify({ error: "Forbidden" })); } } else { res.writeHead(200, { "Content-Type": "application/json" }); res.end(JSON.stringify({ message: "Hello World", email })); }});
app.listen(port, () => { console.log(`Example app listening on port ${port}`);});import arcjet, { protectSignup } from "@arcjet/node";import express from "express";
const app = express();const port = 3000;
app.use(express.urlencoded({ extended: false }));
const aj = arcjet({ // Get your site key from https://app.arcjet.com and set it as an environment // variable rather than hard coding. key: process.env.ARCJET_KEY, rules: [ protectSignup({ email: { mode: "LIVE", // will block requests. Use "DRY_RUN" to log only // Block emails that are disposable, invalid, or have no MX records block: ["DISPOSABLE", "INVALID", "NO_MX_RECORDS"], }, bots: { mode: "LIVE", // configured with a list of bots to allow from // https://arcjet.com/bot-list allow: [], // "allow none" will block all detected bots }, // It would be unusual for a form to be submitted more than 5 times in 10 // minutes from the same IP address rateLimit: { // uses a sliding window rate limit mode: "LIVE", interval: "10m", // counts requests over a 10 minute sliding window max: 5, // allows 5 submissions within the window }, }), ],});
app.post("/", async (req, res) => { const email = req.body.email;
const decision = await aj.protect(req, { email }); console.log("Arcjet decision", decision);
if (decision.isDenied()) { if (decision.reason.isEmail()) { // If the email is invalid then return an error message res.writeHead(400, { "Content-Type": "application/json" }); res.end( JSON.stringify({ error: "Invalid email", reason: decision.reason }), ); } else { // We get here if the client is a bot or the rate limit has been exceeded res.writeHead(403, { "Content-Type": "application/json" }); res.end(JSON.stringify({ error: "Forbidden" })); } } else { res.writeHead(200, { "Content-Type": "application/json" }); res.end(JSON.stringify({ message: "Hello World", email })); }});
app.listen(port, () => { console.log(`Example app listening on port ${port}`);});Create the Svelte page containing the form:
<script lang="ts"> let email = ""; let message = ""; let errorMessage = "";
async function handleSubmit(event: Event) { event.preventDefault(); const response = await fetch("/form", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ email }), });
const result = await response.json();
if (response.ok) { message = result.message; errorMessage = ""; } else { message = ""; errorMessage = result.message || "An error occurred"; } }</script>
<form on:submit={handleSubmit}> <label for="email">Email:</label> <input type="email" id="email" bind:value={email} required /> <button type="submit">Subscribe</button></form>
{#if message} <p>{message}</p>{/if}
{#if errorMessage} <p style="color: red;">{errorMessage}</p>{/if}Next, create the server-side code to handle the page submission:
import { env } from "$env/dynamic/private";import arcjet, { protectSignup } from "@arcjet/sveltekit";import { error, json, type RequestEvent } from "@sveltejs/kit";
const aj = arcjet({ key: env.ARCJET_KEY!, // Get your site key from https://app.arcjet.com rules: [ protectSignup({ email: { mode: "LIVE", // will block requests. Use "DRY_RUN" to log only // Block emails that are disposable, invalid, or have no MX records block: ["DISPOSABLE", "INVALID", "NO_MX_RECORDS"], }, bots: { mode: "LIVE", // configured with a list of bots to allow from // https://arcjet.com/bot-list allow: [], // "allow none" will block all detected bots }, // It would be unusual for a form to be submitted more than 5 times in 10 // minutes from the same IP address rateLimit: { // uses a sliding window rate limit mode: "LIVE", interval: "10m", // counts requests over a 10 minute sliding window max: 5, // allows 5 submissions within the window }, }), ],});
export async function POST(event: RequestEvent) { const { email } = await event.request.json();
const decision = await aj.protect(event, { email }); console.log("Arcjet decision: ", decision);
if (decision.isDenied()) { if (decision.reason.isEmail()) { return error(400, { message: "Invalid email", }); } else { return error(403, "Forbidden"); } }
return json({ message: "Valid email" });}import { env } from "$env/dynamic/private";import arcjet, { protectSignup } from "@arcjet/sveltekit";import { error, json } from "@sveltejs/kit";
const aj = arcjet({ key: env.ARCJET_KEY, // Get your site key from https://app.arcjet.com rules: [ protectSignup({ email: { mode: "LIVE", // will block requests. Use "DRY_RUN" to log only // Block emails that are disposable, invalid, or have no MX records block: ["DISPOSABLE", "INVALID", "NO_MX_RECORDS"], }, bots: { mode: "LIVE", // configured with a list of bots to allow from // https://arcjet.com/bot-list allow: [], // "allow none" will block all detected bots }, // It would be unusual for a form to be submitted more than 5 times in 10 // minutes from the same IP address rateLimit: { // uses a sliding window rate limit mode: "LIVE", interval: "10m", // counts requests over a 10 minute sliding window max: 5, // allows 5 submissions within the window }, }), ],});
export async function POST(event) { const { email } = await event.request.json();
const decision = await aj.protect(event, { email }); console.log("Arcjet decision: ", decision);
if (decision.isDenied()) { if (decision.reason.isEmail()) { return error(400, { message: "Invalid email", }); } else { return error(403, "Forbidden"); } }
return json({ message: "Valid email" });}Create a new route at app/routes/arcjet.tsx with the contents:
import arcjet, { protectSignup } from "@arcjet/remix";import type { ActionFunctionArgs } from "@remix-run/node";
const aj = arcjet({ // Get your site key from https://app.arcjet.com and set it as an environment // variable rather than hard coding. key: process.env.ARCJET_KEY!, rules: [ protectSignup({ email: { mode: "LIVE", // will block requests. Use "DRY_RUN" to log only // Block emails that are disposable, invalid, or have no MX records block: ["DISPOSABLE", "INVALID", "NO_MX_RECORDS"], }, bots: { mode: "LIVE", // configured with a list of bots to allow from // https://arcjet.com/bot-list allow: [], // "allow none" will block all detected bots }, // It would be unusual for a form to be submitted more than 5 times in 10 // minutes from the same IP address rateLimit: { // uses a sliding window rate limit mode: "LIVE", interval: "10m", // counts requests over a 10 minute sliding window max: 5, // allows 5 submissions within the window }, }), ],});
// The action function is called for non-GET requests, which is where you// typically handle signup form submissions.export async function action(args: ActionFunctionArgs) { // The request body is a FormData object const formData = await args.request.formData(); const email = formData.get("email") as string;
const decision = await aj.protect(args, { email }); console.log("Arcjet decision", decision);
if (decision.isDenied()) { if (decision.reason.isEmail()) { return Response.json({ error: "Invalid email." }, { status: 400 }); } else { return Response.json({ error: "Forbidden" }, { status: 403 }); } }
// We don't need to use the decision elsewhere, but you could return it to // the component return null;}import arcjet, { protectSignup } from "@arcjet/remix";
const aj = arcjet({ // Get your site key from https://app.arcjet.com and set it as an environment // variable rather than hard coding. key: process.env.ARCJET_KEY, rules: [ protectSignup({ email: { mode: "LIVE", // will block requests. Use "DRY_RUN" to log only // Block emails that are disposable, invalid, or have no MX records block: ["DISPOSABLE", "INVALID", "NO_MX_RECORDS"], }, bots: { mode: "LIVE", // configured with a list of bots to allow from // https://arcjet.com/bot-list allow: [], // "allow none" will block all detected bots }, // It would be unusual for a form to be submitted more than 5 times in 10 // minutes from the same IP address rateLimit: { // uses a sliding window rate limit mode: "LIVE", interval: "10m", // counts requests over a 10 minute sliding window max: 5, // allows 5 submissions within the window }, }), ],});
// The action function is called for non-GET requests, which is where you// typically handle signup form submissions.export async function action(args) { // The request body is a FormData object const formData = await args.request.formData(); const email = formData.get("email");
const decision = await aj.protect(args, { email }); console.log("Arcjet decision", decision);
if (decision.isDenied()) { if (decision.reason.isEmail()) { return Response.json({ error: "Invalid email." }, { status: 400 }); } else { return Response.json({ error: "Forbidden" }, { status: 403 }); } }
// We don't need to use the decision elsewhere, but you could return it to // the component return null;}Several files are combined here to demonstrate creating a form handler controller. In a real application you should split them as suggested in the comments.
import { ArcjetGuard, ArcjetModule } from "@arcjet/nest";import { Module } from "@nestjs/common";import { ConfigModule } from "@nestjs/config";import { APP_GUARD, NestFactory } from "@nestjs/core";
@Module({ imports: [ ConfigModule.forRoot({ isGlobal: true, }), ArcjetModule.forRoot({ isGlobal: true, key: process.env.ARCJET_KEY!, rules: [ // We're not adding any rules here for this example, but if you did they // would be the default rules wherever you use Arcjet. ], }), ], controllers: [], providers: [ { provide: APP_GUARD, useClass: ArcjetGuard, }, ],})class AppModule {}
async function bootstrap() { const app = await NestFactory.create(AppModule); await app.listen(3000);}bootstrap();import { ARCJET, type ArcjetNest, protectSignup } from "@arcjet/nest";import { Body, Controller, HttpException, HttpStatus, Inject, Injectable, Logger, Post, Req, UseInterceptors,} from "@nestjs/common";import { NoFilesInterceptor } from "@nestjs/platform-express";import { IsNotEmpty } from "class-validator";import type { Request } from "express";
// Validation class as described at// https://docs.nestjs.com/techniques/validation. We're not using the IsEmail// decorator here because Arcjet handles this for you.export class SignupDto { @IsNotEmpty() // @ts-ignore: This is a DTO class so ignore that it's not definitely assigned email: string;}
// This would normally go in your service file e.g.// src/signup/signup.service.ts@Injectable()export class SignupService { private readonly logger = new Logger(SignupService.name);
signup(email: string): { message: string } { this.logger.log(`Form submission: ${email}`);
return { message: "Hello world", }; }}
// This would normally go in your controller file e.g.// src/signup/signup.controller.ts@Controller("signup")export class SignupController { private readonly logger = new Logger(SignupController.name);
constructor( private readonly signupService: SignupService, @Inject(ARCJET) private readonly arcjet: ArcjetNest, ) {}
// Implement a form handler following // https://docs.nestjs.com/techniques/file-upload#no-files. Note this isn't // compatible with the NestJS Fastify adapter. @Post() @UseInterceptors(NoFilesInterceptor()) async index(@Req() req: Request, @Body() body: SignupDto) { const decision = await this.arcjet .withRule( protectSignup({ email: { mode: "LIVE", // will block requests. Use "DRY_RUN" to log only // Block emails that are disposable, invalid, or have no MX records block: ["DISPOSABLE", "INVALID", "NO_MX_RECORDS"], }, bots: { mode: "LIVE", // configured with a list of bots to allow from // https://arcjet.com/bot-list allow: ["CURL"], // prevents bots from submitting the form, but allow curl for this example }, // It would be unusual for a form to be submitted more than 5 times in 10 // minutes from the same IP address rateLimit: { // uses a sliding window rate limit mode: "LIVE", interval: "2m", // counts requests over a 10 minute sliding window max: 5, // allows 5 submissions within the window }, }), ) .protect(req, { email: body.email });
this.logger.log(`Arcjet: id = ${decision.id}`); this.logger.log(`Arcjet: decision = ${decision.conclusion}`);
if (decision.isDenied()) { if (decision.reason.isBot()) { throw new HttpException("No bots allowed", HttpStatus.FORBIDDEN); } else if (decision.reason.isRateLimit()) { throw new HttpException( "Too many requests", HttpStatus.TOO_MANY_REQUESTS, ); } else if (decision.reason.isEmail()) { this.logger.log(`Arcjet: email error = ${decision.reason.emailTypes}`);
let message: string;
// These are specific errors to help the user, but will also reveal the // validation to a spammer. if (decision.reason.emailTypes.includes("INVALID")) { message = "email address format is invalid. Is there a typo?"; } else if (decision.reason.emailTypes.includes("DISPOSABLE")) { message = "we do not allow disposable email addresses."; } else if (decision.reason.emailTypes.includes("NO_MX_RECORDS")) { message = "your email domain does not have an MX record. Is there a typo?"; } else { // This is a catch all, but the above should be exhaustive based on the // configured rules. message = "invalid email."; }
throw new HttpException(`Error: ${message}`, HttpStatus.BAD_REQUEST); } else { throw new HttpException("Forbidden", HttpStatus.FORBIDDEN); } }
// Arcjet Pro plan verifies the authenticity of common bots using IP data. // Verification isn't always possible, so we recommend checking the decision // separately. // https://docs.arcjet.com/bot-protection/reference#bot-verification if (decision.reason.isBot() && decision.reason.isSpoofed()) { throw new HttpException("Forbidden", HttpStatus.FORBIDDEN); }
return this.signupService.signup(body.email); }}4. Start app
Start your app and load http://localhost:3000/form. Submit the form with a
variety of email addresses and you can see how the check behaves. The requests
will also show up in the Arcjet dashboard.
4. Start app
Start your app and load http://localhost:5173/form. Submit the form with a
variety of email addresses and you can see how the check behaves. The requests
will also show up in the Arcjet dashboard.
4. Start server
bun run --hot index.tsbun run --hot index.jsMake a curl POST request from your terminal to your application with various
emails to test the result.
curl -X POST -d 'email=test@arcjet.io' http://localhost:3000/4. Start app
npm run startpnpm run startyarn run startMake a curl POST request from your terminal to your application with various
emails to test the result.
curl -X POST -d 'email=test@arcjet.io' http://localhost:3000/signup4. Start server
npx tsx --env-file .env.local index.tsnode --env-file .env.local index.jsMake a curl POST request from your terminal to your application with various
emails to test the result.
curl -X POST -d 'email=test@arcjet.io' http://localhost:3000/4. Start app
npm run devpnpm run devyarn run devMake a curl POST request from your terminal to your application with various
emails to test the result.
curl -X POST -d 'email=test@arcjet.io' http://localhost:5173/arcjet.data?indexThe requests will also show in the Arcjet dashboard.
FAQs
Do I need to run any infrastructure e.g. Redis?
No, Arcjet handles all the infrastructure for you so you don't need to worry about deploying global Redis clusters, designing data structures to track rate limits, or keeping security detection rules up to date.
What is the performance overhead?
Arcjet SDK tries to do as much as possible asynchronously and locally to minimize latency for each request. Where decisions can be made locally or previous decisions are cached in-memory, latency is usually <1ms.
When a call to the Arcjet API is required, such as when tracking a rate limit in a serverless environment, there is some additional latency before a decision is made. The Arcjet API has been designed for high performance and low latency, and is deployed to multiple regions around the world. The SDK will automatically use the closest region which means the total overhead is typically no more than 20-30ms, often significantly less.
What happens if Arcjet is unavailable?
Where a decision has been cached locally e.g. blocking a client, Arcjet will continue to function even if the service is unavailable.
If a call to the Arcjet API is needed and there is a network problem or Arcjet is unavailable, the default behavior is to fail open and allow the request. You have control over how to handle errors, including choosing to fail close if you prefer. See the reference docs for details.
How does Arcjet protect me against DDoS attacks?
Network layer attacks tend to be generic and high volume, so these are best handled by your hosting platform. Most cloud providers include network DDoS protection by default.
Arcjet sits closer to your application so it can understand the context. This is important because some types of traffic may not look like a DDoS attack, but can still have the same effect. For example, a customer making too many API requests and affecting other customers, or large numbers of signups from disposable email addresses.
Network-level DDoS protection tools find it difficult to protect against this type of traffic because they don't understand the structure of your application. Arcjet can help you to identify and block this traffic by integrating with your codebase and understanding the context of the request e.g. the customer ID or sensitivity of the API route.
Volumetric network attacks are best handled by your hosting provider. Application level attacks need to be handled by the application. That's where Arcjet helps.
What next?
Signup form protection reference Full details about Arcjet signup form protection.
Testing Write tests for your rules.
Explore
Arcjet can be used with specific rules on individual routes or as general protection on your entire application. You can setup bot protection, rate limiting for your API, minimize fraudulent registrations with the signup form protection and more.
Example apps Check out the examples.
Learn how Arcjet works Arcjet's architecture.
SDK reference Bun SDK reference guide.
SDK reference Bun SDK reference guide.
SDK reference Node.js SDK reference guide.
SDK reference NestJS SDK reference guide.
SDK reference Next.js SDK reference guide.
SDK reference Node.js SDK reference guide.
SDK reference Node.js SDK reference guide.
SDK reference Node.js SDK reference guide.
SDK reference Remix SDK reference guide.
SDK reference SvelteKit SDK reference guide.
Get help
Need help with anything? Email us or join our Discord to get support from our engineering team.