Bot Detection with Botd

Botd (by FingerprintJS) is a browser library for bot detection. In this demo we'll be using it alongside botd-integrations for bot detection at the edge.

Demo

https://edge-functions-bot-protection-botd.vercel.app

One-Click Deploy

Deploy the example using Vercel:

How it works

If you try and go to /blocked you'll see the /bot-detected page being rendered instead, done by a rewrite from the edge after it identifies you as a bot. We do that by changing the user agent of the request before making a request to Botd.

Getting Started

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/bot-protection-botd bot-protection-botd
# or
yarn create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/bot-protection-botd bot-protection-botd

You'll need to have a token for the beta access of Botd, the token is free and there are instructions in their github repo on how to get one.

Once that's done, copy the .env.example file in this directory to .env.local (which will be ignored by Git):

cp .env.example .env.local

Then open .env.local and set the Botd API token to match your token.

Next, run Next.js in development mode:

npm install
npm run dev

# or

yarn
yarn dev

Deploy it to the cloud with Vercel (Documentation).