Skip to main content
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.