Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.deflect.bot/llms.txt

Use this file to discover all available pages before exploring further.

Deflect’s JavaScript SDK allows you to integrate bot protection seamlessly into any frontend application including React, Vue, Next.js, or plain JavaScript.

​
Installation

Add the script tag directly to your HTML file: 
<script src="https://cdn.jsdelivr.net/npm/@deflectbot/deflect-sdk@latest/dist/index.min.js"></script>
Use @latest to always get the latest version, or specify a version with @deflectbot/[email protected].

​
NPM/Yarn

If you prefer using a package manager:

​
npm

npm install @deflectbot/deflect-sdk

​
yarn

yarn add @deflectbot/deflect-sdk
Then import it in your JavaScript: 
import Deflect from "@deflectbot/deflect-sdk";

​
Quick Start

​
1. Configure the SDK

Configure Deflect with your Action ID (get this from your dashboard): 
Deflect.configure({
  actionId: "YOUR_ACTION_ID", // Required - get from dashboard
});
Call this once early in your app’s lifecycle, before making any protected API calls.

​
2. Get a token for protected requests

When you need to make a request to a protected endpoint (login, register, payment, etc.): 
const token = await Deflect.getToken(); // Returns token as string

// Include this token in your API request
fetch("/api/login", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    username: "[email protected]",
    password: "password123",
    deflect_token: token, // Include the token
  }),
});

​
3. Form Helper (Optional)

If you’re using HTML forms, you can use the helper function: 
<form
  action="/login"
  method="POST"
  onsubmit="return Deflect.injectToken(event)"
>
  <input name="username" />
  <input name="password" type="password" />
  <button type="submit">Login</button>
</form>
The injectToken() function will automatically fetch a token and inject it as a hidden input named deflect_token into your form.

​
Complete Example

Here’s a full working example: 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@deflectbot/deflect-sdk@latest/dist/index.min.js"></script>
  </head>
  <body>
    <form id="loginForm">
      <input type="email" name="email" placeholder="Email" required />
      <input type="password" name="password" placeholder="Password" required />
      <button type="submit">Login</button>
    </form>

    <script>
      // 1. Configure Deflect
      Deflect.configure({
        actionId: "YOUR_ACTION_ID",
      });

      // 2. Handle form submission
      document
        .getElementById("loginForm")
        .addEventListener("submit", async (e) => {
          e.preventDefault();

          try {
            // Get token from Deflect
            const token = await Deflect.getToken();

            // Make your API request with the token
            const formData = new FormData(e.target);
            const response = await fetch("/api/login", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                email: formData.get("email"),
                password: formData.get("password"),
                deflect_token: token,
              }),
            });

            const result = await response.json();
            console.log("Login result:", result);
          } catch (error) {
            console.error("Error:", error);
          }
        });
    </script>
  </body>
</html>

​
Next Steps

After implementing the client-side SDK, you’ll need to verify the tokens on your backend using the Verdict API.