@byebot/nextjs

Next.js integration for Byebot.

Installation

npm install @byebot/nextjs

Usage

Basic Form (Recommended)

The captcha token is automatically added as a hidden byebot-token field when the user completes verification.

"use client";

import { Byebot } from "@byebot/nextjs";

function LoginForm() {
  return (
    <form action="/api/login" method="POST">
      <input name="username" type="text" />
      <input name="password" type="password" />
      <Byebot siteKey="your-site-key" />
      <button type="submit">Login</button>
    </form>
  );
}

With Callback (Optional)

Use onVerify if you need to know when verification completes (e.g., enable submit button).

<Byebot siteKey="your-site-key" onVerify={(token) => setIsVerified(true)} />

Server-Side Validation

Validate the byebot-token from the form submission:

// app/api/login/route.ts
import { validateByebotToken } from "@byebot/nextjs/server";

export async function POST(request: Request) {
  const formData = await request.formData();
  const token = formData.get("byebot-token") as string;

  const result = await validateByebotToken({
    apiKey: process.env.BYEBOT_API_KEY!,
    token,
  });

  if (!result.valid) {
    return Response.json({ error: "Captcha failed" }, { status: 403 });
  }

  // Captcha valid - proceed with login
  const username = formData.get("username");
  const password = formData.get("password");
  // ...
}

API

<Byebot />

| Prop | Type | Required | Description | | ---------- | ------------------------- | -------- | --------------------------------- | | siteKey | string | Yes | Your site key from the dashboard | | onVerify | (token: string) => void | No | Called when verification succeeds |

validateByebotToken(options)

| Option | Type | Required | | -------- | -------- | -------- | | apiKey | string | Yes | | token | string | Yes |

Returns: Promise<{ valid: boolean, message?: string }>