Make your App 10x Secure with Arcjet Protection Layer

// -> middleware.ts

// Protect against common attacks e.g. SQL injection, XSS, CSRF
import arcjet, { createMiddleware, shield } from "@arcjet/next";
export const config = {
  // matcher tells Next.js which routes to run the middleware on.
  // This runs the middleware on all routes except for static assets.
  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};
// this is the main block
const aj = arcjet({
  key: process.env.ARCJET_KEY!
  rules: [
    // Block common attacks e.g. SQL injection, XSS, CSRF
    shield({
      // Will block requests. Use "DRY_RUN" to log only
      mode: "LIVE",
    }),
  ],
});
// Pass existing middleware with optional existingMiddleware prop
export default createMiddleware(aj);

// -> /app/api/arcjet/route.ts

// Prevent API abuse and set quotas based on user sessions
import arcjet, { tokenBucket } from "@arcjet/next";
import { NextResponse } from "next/server";

const aj = arcjet({
  key: process.env.ARCJET_KEY!,
  // Track requests by a custom user ID and IP address
  characteristics: ["userId", "src.ip"],
  rules: [
    // Create a token bucket rate limit.
    // Fixed and sliding window algorithms are also supported.
    tokenBucket({
      // Will block requests. Use "DRY_RUN" to log only
      mode: "LIVE",
      // Refill 5 tokens per interval
      refillRate: 5,
      // Refill every 10 seconds
      interval: 10,
      // Bucket maximum capacity of 10 tokens
      capacity: 10,
    }),
  ],
});

export async function GET(req: Request) {
  // Replace with your authenticated user ID
  const userId = "user123";
  // Deduct 5 tokens from the bucket
  const decision = await aj.protect(req, { userId, requested: 5 });

  if (decision.isDenied()) {
    return NextResponse.json(
      { error: "Too Many Requests", reason: decision.reason },
      { status: 429 },
    );
  }

  return NextResponse.json({ message: "Hello world" });
}

// -> middleware.ts

// Detect and block automated clients, scrapers & bots
import arcjet, { createMiddleware, detectBot } from "@arcjet/next";
export const config = {
  // matcher tells Next.js which routes to run the middleware on.
  // This runs the middleware on all routes except for static assets.
  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};
const aj = arcjet({
  key: process.env.ARCJET_KEY!,
  rules: [
    detectBot({
      // Will block requests. Use "DRY_RUN" to log only
      mode: "LIVE",
      // Blocks all automated clients
      block: ["AUTOMATED"],
    }),
  ],
});
// Pass existing middleware with optional existingMiddleware prop
export default createMiddleware(aj);

// Validate email addresses are correct & can receive mail
import arcjet, { validateEmail } from "@arcjet/next";
import { NextResponse } from "next/server";

const aj = arcjet({
  key: process.env.ARCJET_KEY!,
  rules: [
    validateEmail({
      // Will block requests. Use "DRY_RUN" to log only
      mode: "LIVE",
      // Blocks disposable, no MX records, and invalid emails
      block: ["DISPOSABLE", "NO_MX_RECORDS", "INVALID"],
    }),
  ],
});

export async function POST(req: Request) {
  const decision = await aj.protect(req, {
    // Pass the email address, such as from a form submission
    email: "fake@arcjet.ai",
  });

  if (decision.isDenied()) {
    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
  }

  return NextResponse.json({
    message: "Hello world",
  });
}

import Link from 'next/link'
import { buttonVariants } from '@/components/ui/button'
import { Icons } from '@/components/icons'

export default function Home() {
  return (
    <div className="flex h-screen flex-col items-center bg-black pt-28 text-center text-white">
      <div className="absolute left-6 top-6">
        <Link href={'https://twitter.com/Anmol_Codes'}>
          <div className="flex items-center justify-center text-white">
            <Icons.X className="mr-2 h-4 w-4 text-white" /> Made by Anmol
          </div>
        </Link>
      </div>
      <h2 className="bg-gradient-to-r from-[#A855F7] to-[#D9ACF5] bg-clip-text pb-2 text-3xl font-bold tracking-tighter text-transparent sm:text-4xl xl:text-5xl/none">
        Demo of core features of Arcjet
      </h2>
      <p className="tracking-tigher px-2 pt-6 text-lg leading-8 text-gray-300 lg:px-72">
        The only security layer that your app will ever need. <br />
        Find the code on{' '}
        <span className="border-b">
          <Link
            href={'https://github.com/Anmol-Baranwal/arcjet-demo'}
            target="_blank"
          >
            GitHub
          </Link>
        </span>
        .
      </p>
      <div className="flex gap-4 pt-12">
        <Link
          href="/signup-form"
          className={buttonVariants({ variant: 'primary' })}
        >
          Signup form protection
        </Link>
        <Link
          href="/bots-protection"
          className={buttonVariants({ variant: 'primary' })}
        >
          Bot protection
        </Link>
        <Link
          href="/rate-limiting"
          className={buttonVariants({ variant: 'primary' })}
        >
          Rate limiting
        </Link>
        <Link href="/shield" className={buttonVariants({ variant: 'primary' })}>
          Shield Demonstration
        </Link>
      </div>
    </div>
  )
}

import arcjet, { detectBot } 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
  characteristics: ['userId'], // track requests by a custom user ID
  rules: [
    detectBot({
      mode: 'LIVE', // will block requests. Use "DRY_RUN" to log only
      block: ['AUTOMATED', 'LIKELY_AUTOMATED'], // blocks all automated clients (LIKELY_AUTOMATED is also another option)
    }),
  ],
})

export async function GET(req: Request) {
  const userId = 'user123'
  const decision = await aj.protect(req, { userId })

  if (decision.isDenied() && decision.reason.isBot()) {
    return NextResponse.json(
      { error: 'Bot Detected in request', reason: decision.reason },
      { status: 429 }
    )
  }

  return NextResponse.json({ message: 'OK' })
}

...
if (decision.isDenied() && decision.reason.isBot()) {
    return NextResponse.json(
      { error: 'Bot Detected in request', reason: decision.reason },
      { status: 429 }
    )
  }

  return NextResponse.json({ message: 'OK' })

rules: [
    detectBot({
      mode: 'LIVE', // will block requests. Use "DRY_RUN" to log only
      block: ['AUTOMATED', 'LIKELY_AUTOMATED'], // blocks all automated clients (LIKELY_AUTOMATED is also another option)
      patterns: {
        remove: [
          // Removes the datadog agent from the list of bots so it will be
          // considered as ArcjetBotType.LIKELY_NOT_A_BOT
          'datadog agent',
          // Also allow curl clients to pass through. Matches a user agent
          // string with the word "curl" in it
          '^curl',
        ],
      },
    }),
  ],

curl -v https://arcjet-demo.vercel.app/api/bot-protection

import arcjet, { tokenBucket } from '@arcjet/next'
import { NextResponse } from 'next/server'

// Configure Arcjet
const aj = arcjet({
  key: process.env.ARCJET_KEY!, // Get your site key from https://app.arcjet.com
  characteristics: ['userId'], // you can also track requests by IP address using "ip.src"
  rules: [
    tokenBucket({
      mode: 'LIVE', // will block requests. Use "DRY_RUN" to log only
      match: '/api/rate-limiting', // match all requests to /api/rate-limiting
      refillRate: 2, // refill 2 tokens per interval
      interval: 60, // refill every 60 seconds
      capacity: 4, // bucket maximum capacity of 4 tokens
    }),
  ],
})

export async function GET(req: Request) {
  const userId = 'user123' // Replace with your authenticated user ID
  const decision = await aj.protect(req, { userId, requested: 1 }) // Deduct 1 token from the bucket
  console.log('Arcjet SDK decision', decision.conclusion)

  let message = ''
  let remaining = 0
  let reset = 0

  if (decision.reason.isRateLimit()) {
    const resetTime = decision.reason.resetTime
    remaining = decision.reason.remaining

    if (resetTime) {
      const seconds = Math.floor((resetTime.getTime() - Date.now()) / 1000)
      reset = seconds
      message = `Reset in ${seconds} seconds.`
    }
  }

  if (decision.isDenied() && decision.reason.isRateLimit()) {
    return NextResponse.json(
      { error: `HTTP 429: Too many requests. ${message}`, remaining, reset },
      { status: 429 }
    )
  }

  return NextResponse.json(
    { message: 'HTTP 200: OK', remaining, reset },
    { status: 200 }
  )
}

'use client'

import Header from '@/components/header'
import { buttonVariants } from '@/components/ui/button'
import Link from 'next/link'
import { useState } from 'react'

export default function RateLimiting() {
  const [message, setMessage] = useState('')

  const handleClick = async () => {
    const res = await fetch('/api/rate-limiting')
    const data = await res.json()

    if (res.status === 429) {
      setMessage(data.error)
    } else {
      setMessage(
        `HTTP 200: OK. ${data.remaining} requests remaining. Reset in ${data.reset} seconds.`
      )
    }
  }

  return (
    <div className="min-h-screen bg-black">
      <Header
        title="Rate Limiting Example"
        docsLink="/https://docs.arcjet.com/rate-limiting/quick-start/nextjs"
      />
      <div className="container pb-20 pt-12">
        <button
          onClick={handleClick}
          className={buttonVariants({ variant: 'primary' })}
        >
          Click ME to Call API
        </button>
        {message && (
          <div className="mt-4 w-fit rounded border border-dashed border-white bg-transparent p-4 text-white">
            <p>{message}</p>
          </div>
        )}
      </div>
      <p className="container space-y-1 text-gray-400">
        <div>
          The limit is set to 4 requests every 60 seconds. <br />
          After this, 2 requests are refilled every minute until it reaches 4
          requests. Use it wisely :)
        </div>
        <div className="pt-1">
          Rate limits can be{' '}
          <Link
            href={'https://docs.arcjet.com/reference/nextjs#ad-hoc-rules'}
            className="border-b border-gray-400"
          >
            dynamically adjusted{' '}
          </Link>
          e.g. to set a limit based on the authenticated user.
        </div>
      </p>
    </div>
  )
}

import arcjet, { shield } 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
  characteristics: ['userId'], // track requests by a custom user ID
  rules: [
    shield({
      mode: 'LIVE', // will block the request
    }),
  ],
})

export async function GET(req: Request) {
  const userId = 'user123'
  const decision = await aj.protect(req, { userId })

  if (decision.isDenied() && decision.reason.isShield()) {
    return NextResponse.json(
      {
        error: 'You seem suspicious :(',
        reason: decision.reason,
      },
      { status: 403 }
    )
  }

  return NextResponse.json({ message: 'OK' })
}

curl -v -H "x-arcjet-suspicious: true" http://arcjet-demo.vercel.app/api/shield

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'], // See https://docs.arcjet.com/email-validation/concepts#email-types
      },
      bots: {
        mode: 'LIVE',
        // Block clients that we are sure are automated
        block: ['AUTOMATED'],
      },
      // It would be unusual for a form to be submitted more than 5 times in 5
      // minutes from the same IP address
      rateLimit: {
        // uses a sliding window rate limit
        mode: 'LIVE',
        interval: '5m', // counts requests over a 10 minute sliding window
        max: 5, // allows 15 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()) {
    let message = 'Request cannot be allowed.'

    if (decision.reason.isEmail()) {
      if (decision.reason.emailTypes.includes('INVALID')) {
        message = 'Email address is invalid.'
      } else if (decision.reason.emailTypes.includes('DISPOSABLE')) {
        message = 'Disposable email addresses are not allowed.'
      } else if (decision.reason.emailTypes.includes('NO_MX_RECORDS')) {
        message =
          'Your email domain does not have an MX record. Please check for any typos!!'
      }
    } else if (decision.reason.isRateLimit()) {
      const reset = decision.reason.resetTime

      if (reset === undefined) {
        message = 'Too many requests. Please try again later.'
      } else {
        // no of seconds between reset Date and now
        const seconds = Math.floor((reset.getTime() - Date.now()) / 1000)
        const minutes = Math.ceil(seconds / 60)

        if (minutes > 1) {
          message = `Too many requests. Please try again in ${minutes} minutes.`
        } else {
          message = `Too many requests. Please try again in ${seconds} seconds.`
        }
      }
    } else {
      message = 'Forbidden'
    }

    // if (decision.ip.hasCountry()) {
    //   message += ` PS: Hello from ${decision.ip.country}.`
    // }

    return NextResponse.json(
      { message, reason: decision.reason },
      { status: decision.reason.isRateLimit() ? 429 : 400 }
    )
  }

  return NextResponse.json({ message: 'Email is Valid and has MX Records' })
}

'use client'
import React, { useState, type FormEvent } from 'react'
import Header from '@/components/header'
import { Input } from '@/components/ui/input'
import { Button, buttonVariants } from '@/components/ui/button'

export default function Page() {
  const [isLoading, setIsLoading] = useState<boolean>(false)
  const [error, setError] = useState<string | null>(null)
  const [data, setData] = useState('')

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setIsLoading(true)
    setError(null)
    setData('')
    try {
      const formData = new FormData(event.currentTarget)
      const response = await fetch('/api/signup-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}: ${error.message}`)
      }

      // Handle response if necessary
      const data = await response.json()
      setData(data.message)

      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (error: any) {
      // Capture the error message to display to the user
      setError(error.message)
      console.error(error)
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div>
      <div className="min-h-screen bg-black">
        <Header
          title="Form Protection Example"
          docsLink="/https://docs.arcjet.com/signup-protection/quick-start/nextjs"
        />
        <form onSubmit={onSubmit} className="px-6">
          <Input
            type="text"
            defaultValue={'invalid@email'}
            name="email"
            id="email"
            className="my-4 w-60 border-dashed border-white bg-transparent text-white"
          />
          <Button
            type="submit"
            disabled={isLoading}
            className={buttonVariants({ variant: 'primary' })}
          >
            {isLoading ? 'Loading...' : 'Submit Form'}
          </Button>
        </form>
        <div className="px-6 pb-16">
          {data && <div className="py-6 text-green-400">{data}</div>}
          {error && <div className="py-6 text-red-400">{error}</div>}
          <h2 className="mt-6 text-xl font-bold text-white">Test emails</h2>
          <p className="py-4 text-gray-300">
            Email validation 1/3rd of the process. Try these emails to see how
            it works:
          </p>
          <ul className="ms-8 list-outside list-disc">
            <li className="text-gray-400">
              <code className="rounded-md border border-gray-800 bg-transparent p-1 text-gray-400">
                invalid.@arcjet
              </code>{' '}
              – is an invalid email address.
            </li>
            <li className="pt-2 text-gray-400">
              <code className="rounded-md border border-gray-800 bg-transparent p-1 text-gray-400">
                test@0zc7eznv3rsiswlohu.tk
              </code>{' '}
              – is from a disposable email provider.
            </li>
            <li className="pt-2 text-gray-400">
              <code className="rounded-md border border-gray-800 bg-transparent p-1 text-gray-400">
                nonexistent@arcjet.ai
              </code>{' '}
              – is a valid email address & domain, but has no MX records.
            </li>
          </ul>
        </div>
      </div>
    </div>
  )
}

import arcjet, { tokenBucket, detectBot, shield } 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
  characteristics: ['userId'], // track requests by a custom user ID
  rules: [
    tokenBucket({
      mode: 'LIVE', // will block requests. Use "DRY_RUN" to log only
      refillRate: 2, // refill 2 tokens per interval
      interval: 40, // refill every 40 seconds
      capacity: 2, // bucket maximum capacity of 2 tokens
    }),
    detectBot({
      mode: 'LIVE', // will block requests. Use "DRY_RUN" to log only
      block: ['AUTOMATED'], // blocks all automated clients
    }),
    shield({
      mode: 'LIVE', // this will block, use DRY_RUN if you want to allow the request
    }),
  ],
})

export async function GET(req: Request) {
  const userId = 'user123' // Replace with your authenticated user ID
  const decision = await aj.protect(req, { userId, requested: 1 }) // Deduct 1 token from the bucket
  //   console.log('Arcjet SDK decision', decision)

  if (decision.isDenied()) {
    if (decision.reason.isRateLimit()) {
      return NextResponse.json(
        { error: 'Too Many Requests', reason: decision.reason },
        { status: 429 }
      )
    } else if (decision.reason.isBot()) {
      return NextResponse.json(
        { error: 'Bot Detected in request', reason: decision.reason },
        { status: 429 }
      )
    } else if (decision.reason.isShield()) {
      return NextResponse.json(
        {
          error: 'You seem suspicious :(',
          // Useful for debugging, but don't return it to the client in
          // production
          //reason: decision.reason,
        },
        { status: 403 }
      )
    } else if (decision.reason.isShield()) {
      return NextResponse.json(
        {
          error: 'You seem suspicious :(',
          reason: decision.reason,
        },
        { status: 403 }
      )
    }
  }

  return NextResponse.json({ message: 'OK' })
}