BotID

Sophisticated bots are designed to mimic real user behaviour. They can run JavaScript, solve CAPTCHAs, and navigate interfaces in ways that closely resemble human interactions. Tools like Playwright and Puppeteer automate these sessions, simulating actions from page load to form submission.

These bots do not rely on spoofed headers or patterns that typically trigger rate limits. Instead, they blend in with normal traffic, making detection difficult and mitigation costly.

Vercel BotID is an invisible CAPTCHA that protects against sophisticated bots without showing visible challenges or requiring manual intervention. It adds a protection layer for public, high-value routes, such as checkouts, signups, and APIs, that are common targets for bots imitating real users.

BotID includes a Deep Analysis mode, powered by Kasada. Kasada is a leading bot protection provider trusted by Fortune 500 companies and global enterprises. It delivers advanced bot detection and anti-fraud capabilities.

BotID provides real-time protection against:

• Automated attacks: Shield your application from credential stuffing, brute force attacks, and other automated threats
• Data scraping: Prevent unauthorized data extraction and content theft
• API abuse: Protect your endpoints from excessive automated requests
• Spam and fraud: Block malicious bots while allowing legitimate traffic through
• Expensive resources: Prevent bots from consuming expensive infrastructure, bandwidth, compute, or inventory

• Seamless integration: Works with existing Vercel projects with minimal configuration
• Customizable protection: Define which paths and endpoints require bot protection
• Privacy-focused: Respects user privacy while providing robust protection
• Deep Analysis (Kasada-powered): For the highest level of protection, enable Deep Analyis in your Vercel Dashboard. This leverages Kasada's advanced detection technology to block even the most sophisticated bots.

BotID has two modes:

• Basic - Ensures valid browser sessions are accessing your sites
• Deep Analysis - Connects thousands of additional client side signals to further distinguish humans from bots

With a few lines of code, you can run BotID on any endpoint. It operates by:

• Giving you a clear yes or no response to each request
• Deploying dynamic detection models based on a deep understanding of bots that validates requests on your server actions and route handlers to ensure only verified traffic reaches your protected endpoints
• Quickly assessing users without disrupting user sessions

BotID counters the most advanced bots by:

1. Silently collecting thousands of signals that distinguish human users from bots
2. Changing detection methods on every page load to prevent reverse engineering and sophisticated bypasses
3. Streaming attack data to a global machine learning system that improves protection for all customers

Before setting up BotID, ensure you have a JavaScript project deployed on Vercel.

1. Install the package

   Add BotID to your project:

   pnpmyarnnpmbun

   pnpm i botid

2. Configure Redirects

   For Next.js projects, use the configuration wrapper to set up proxy rewrites.

   This ensures that ad-blockers, third party scripts, and more won't make BotID any less effective.

   next.config.js

   import { withBotId } from 'botid/next/config';
    
   const nextConfig = {
     // Your existing Next.js config
   };
    
   export default withBotId(nextConfig);

   If you're not using Next.js, you can add the following configuration values to your vercel.json to ensure the correct rewrites and headers are set.

   vercel.json

   {
     "rewrites": [
       {
         "source": "/149e9513-01fa-4fb0-aad4-566afd725d1b/2d206a39-8ed7-437e-a3be-862e0f06eea3/a-4-a/c.js",
         "destination": "https://api.vercel.com/bot-protection/v1/challenge"
       },
       {
         "source": "/149e9513-01fa-4fb0-aad4-566afd725d1b/2d206a39-8ed7-437e-a3be-862e0f06eea3/:path*",
         "destination": "https://api.vercel.com/bot-protection/v1/proxy/:path*"
       }
     ],
     "headers": [
       {
         "source": "/149e9513-01fa-4fb0-aad4-566afd725d1b/2d206a39-8ed7-437e-a3be-862e0f06eea3/:path*",
         "headers": [
           {
             "key": "X-Frame-Options",
             "value": "SAMEORIGIN"
           }
         ]
       }
     ]
   }

3. Add client-side protection

   Mount the <BotIdClient/> component in your application layout.

   app/layout.tsx

   import { BotIdClient } from 'botid/client';
   import { ReactNode } from 'react';
    
   // Define the paths that need bot protection.
   // These are paths that are routed to by your app.
   // These can be:
   // - API endpoints (e.g., '/api/sensitive')
   // - Pages in your application (e.g., '/checkout')
   // - Server actions invoked from a page (e.g., '/dashboard')
    
   const protectedRoutes = [
     {
       path: '/api/sensitive',
       method: 'POST',
     },
     {
       path: '/checkout',
       method: 'POST',
     },
     {
       path: '/signup',
       method: 'POST',
     },
   ];
    
   type RootLayoutProps = {
     children: ReactNode;
   };
    
   export default function RootLayout({ children }: RootLayoutProps) {
     return (
       <html lang="en">
         <head>
           <BotIdClient protect={protectedRoutes} />
         </head>
         <body>{children}</body>
       </html>
     );
   }

4. Perform BotID checks on the server

   Use checkBotId() on the routes configured in the <BotIdClient/> component.

   Not adding the protected route to <BotIdClient /> will result in checkBotId() failing. The client side component dictates which requests to attach special headers to for classification purposes.

   • Using API routes
   app/api/sensitive/route.ts

   import { checkBotId } from 'botid/server';
   import { NextRequest, NextResponse } from 'next/server';
    
   export async function POST(request: NextRequest) {
     const verification = await checkBotId();
    
     if (verification.isBot) {
       return NextResponse.json({ error: 'Access denied' }, { status: 403 });
     }
    
     const data = await processUserRequest();
    
     return NextResponse.json({ data });
   }

   • Using Server Actions
   app/actions/create-user.ts

   'use server';
    
   import { checkBotId } from 'botid/server';
    
   export async function createUser(formData: FormData) {
     const verification = await checkBotId();
    
     if (verification.isBot) {
       throw new Error('Access denied');
     }
    
     const userData = {
       name: formData.get('name') as string,
       email: formData.get('email') as string,
     };
    
     const user = await saveUser(userData);
     return { success: true, user };
   }

5. Enable BotID deep analysis in Vercel (Recommended)

   Only available on Pro or Enterprise plans

   From the Vercel dashboard

   • Select your Project
   • Click the Firewall tab
   • Click Configure
   • Enable Vercel BotID Deep Analysis
   Go to Firewall Configuration

You can add a bypass rule to the Vercel WAF to let through traffic that would have otherwise been detected as a bot by BotID.

You can view BotID checks by selecting BotID on the firewall page dropdown on a project.

Metrics are also available in Observability Plus.