ban-devtools

Enterprise-Grade Anti-DevTools Protection for React & Next.js

Engineered to protect proprietary Source Code and API Keys from unauthorized inspection in React and Next.js environments.

---

Open Source Commitment

ban-devtools is a fully Open Source library. It is built by the community, for the community. Developers are encouraged to audit the source code, fork the repository, and contribute to the ongoing security and optimization of this package. We believe in transparency and robust security through peer review.

Core Features

This library utilizes a multi-layered security architecture.

Triple-Layer Security Protects your application through Shortcut Blocking, Debugger Traps, and Window Resize Heuristics.	Native React Integration Provides highly optimized React Hooks and Components, avoiding heavy DOM manipulations.
Instant Auto-Redirect The moment DevTools is forcibly opened, the script instantly redirects the user to a secure destination.	Precision Interception Blocks F12, Ctrl+Shift+I, Ctrl+Shift+J, Ctrl+Shift+C, and Ctrl+U at the event listener level.

Under The Hood (Architecture Logic)

The internal mechanism, useBanDevTools, operates on three distinct vectors of detection:

1. Shortcut Interception: Intercepts keydown events globally and invokes e.preventDefault(). This stops the browser's native behavior without immediately triggering a redirect, maintaining a seamless user experience for accidental keystrokes.
2. Debugger Trap Loop: Executes a continuous debugger instruction within a 100ms interval loop. When DevTools is opened, the JavaScript engine halts execution. Our script calculates the execution delay; if it exceeds 100ms, it confirms a breach and executes the redirect protocol.
3. Resize Heuristic Detection: A failsafe mechanism. If the debugger trap is bypassed and DevTools docks to the browser window, it forcefully reduces the window.innerWidth or window.innerHeight. The script detects this aggressive delta (>160px) and immediately redirects the user.

Installation

npm install ban-devtools
# or
yarn add ban-devtools

Implementation Guide

Global Protection (Next.js App Router)

To secure the entire application, wrap your application at the root layout level.

// app/layout.tsx
import { BanDevTools } from 'ban-devtools';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <BanDevTools redirectUrl="https://www.azzamcodex.site/" />
        {children}
      </body>
    </html>
  );
}

Component-Level Protection (React Hooks)

For granular control, utilize the useBanDevTools hook directly inside specific functional components.

import React from 'react';
import { useBanDevTools } from 'ban-devtools';

export default function SecureDashboard() {
  
  // Initialize the protection hook
  useBanDevTools({
    redirectUrl: 'https://www.azzamcodex.site/',
    disableRightClick: true,
    disableShortcuts: true,
    debuggerLoop: true,
  });

  return (
    <div>
      <h1>Enterprise Dashboard</h1>
      <p>This component is protected against source inspection.</p>
    </div>
  );
}

Configuration Reference

Property	Type	Default	Description
redirectUrl	string	'https://www.azzamcodex.site/'	The secure URL destination when an inspection attempt is detected.
disableRightClick	boolean	true	Disables the context menu to prevent manual inspection.
disableShortcuts	boolean	true	Intercepts F12 and common Chromium/WebKit inspection shortcuts.
debuggerLoop	boolean	true	Activates the infinite debugger trap and execution timer.

Tech Stack

Credits & License

Designed & Engineered by Azzam Codex

Copyright © 2026 Azzam Codex. All Rights Reserved. Licensed under the MIT License.

---