Nuxt
Install
1
npm i @botbye/nuxt
1
yarn add @botbye/nuxt
Requires nuxt >= 3 as a peer dependency.
Anti-phishing is exposed from the server entry point only: @botbye/nuxt/server. There is no client-side part — the catcher is served from your own origin, not embedded via a client SDK.
Configuration
Call phishing.init once at server startup, before serving any catcher requests. The recommended place in Nuxt is a Nitro server plugin — the same one used for evaluate's init. Anti-phishing is identified by its own clientKey (available in your Phishing Project in the Dashboard), not the server key used by evaluate.
1
2
3
4
5
6
7
8
9
// server/plugins/botbye.ts
import { phishing } from "@botbye/nuxt/server";
export default defineNitroPlugin(() => {
phishing.init({
// clientKey from your Phishing Project in the Dashboard
clientKey: "00000000-0000-0000-0000-000000000000",
});
});
| Option | Type | Required | Description |
|---|---|---|---|
| clientKey | string | Yes | clientKey from your Phishing Project in the Dashboard |
| url | string | No | Override BotBye API endpoint (default: https://verify.botbye.com) |
| logger.level | string | No | Log level: error, warn, info, debug, log (default: info) |
| logger.logger | TLogger | No | Custom logger implementing { error, warn, info, debug, log } |
| timeouts.fetchCatcher | number | No | Timeout in milliseconds for each fetchCatcher call |
Usage
Anti-phishing needs two routes on your own origin, each proxied through fetchCatcher. Define them as Nitro server routes:
SVG route — serves the SVG catcher. This is the URL your client code passes to getCatcher({ url }).
PNG route — serves the PNG that the SVG references (via innerPngUrl).
The paths are arbitrary — name the routes however you like. Pass the H3Event as request and the format. For the SVG, innerPngUrl must be the absolute URL of your PNG route — the browser loads that PNG directly from your origin.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// server/routes/botbye-catcher.svg.get.ts
import { phishing } from "@botbye/nuxt/server";
// Absolute URL of your PNG endpoint — the SVG catcher references it through innerPngUrl.
const PNG_CATCHER_URL = "https://your-site.example/botbye-catcher.png";
export default defineEventHandler(async (event) => {
const catcher = await phishing.fetchCatcher({
request: event,
format: "svg",
innerPngUrl: PNG_CATCHER_URL,
});
setResponseStatus(event, catcher.status);
setResponseHeaders(event, catcher.headers);
return catcher.body;
});
1
2
3
4
5
6
7
8
9
10
11
// server/routes/botbye-catcher.png.get.ts
import { phishing } from "@botbye/nuxt/server";
export default defineEventHandler(async (event) => {
const catcher = await phishing.fetchCatcher({ request: event, format: "png" });
setResponseStatus(event, catcher.status);
setResponseHeaders(event, catcher.headers);
return catcher.body;
});
We recommend embedding the SVG catcher: it is designed to keep tracking even when a phishing site copies all of your assets to its own infrastructure (the PNG route exists because the SVG catcher relies on it).
Multiple instances
phishing is a ready default instance. Use phishingFactory() to create isolated instances for multiple projects.
1
2
3
4
import { phishingFactory } from "@botbye/nuxt/server";
const phishing = phishingFactory();
phishing.init({ clientKey: "00000000-0000-0000-0000-000000000000" });