DevTools Guardian 🛡️

DevTools Guardian is a lightweight, zero-dependency client-side security wrapper for React applications. It detects browser Developer Tools usage and locks down the interface with a professional, animated security warning screen to protect your source code, assets, and UI layout.

[!IMPORTANT] Created and Maintained by Ali Arshad

• GitHub: Ali-Arshad-110
• LinkedIn: aliarshad110

🚀 Quick Setup

1. Install

npm install devtools-guardian

2. Protect Your App with Custom Details

Wrap your root layout or main application path with <DevToolsProtection />. You can pass your own branding details (creatorName, githubUrl, linkedinUrl, portfolioUrl, etc.) directly to customize the warning overlay.

import React from 'react';
import { DevToolsProtection } from 'devtools-guardian';

export default function App() {
  return (
    <DevToolsProtection
      overlay={true}
      creatorName="Your Name"
      githubUrl="https://github.com/yourusername"
      linkedinUrl="https://linkedin.com/in/yourprofile"
      portfolioUrl="https://yourportfolio.com"
      warningMessage="This platform is protected. Unauthorized inspection is prohibited."
    >
      <YourAppRoutes />
    </DevToolsProtection>
  );
}

🛠️ Advanced Usage

Custom Hook (useDevToolsDetector)

If you want to trigger custom actions (e.g. logging out a user or hiding specific components) instead of displaying the default warning overlay:

import React from 'react';
import { useDevToolsDetector } from 'devtools-guardian';

export default function SensitiveComponent() {
  const isDevToolsOpen = useDevToolsDetector({
    creatorName: "Your Name",
    githubUrl: "https://github.com/yourusername",
    linkedinUrl: "https://linkedin.com/in/yourprofile",
    portfolioUrl: "https://yourportfolio.com",
    onDetect: () => {
      console.warn('Suspicious activity flagged!');
      // Trigger API reports or logout here
    }
  });

  return (
    <div>
      {isDevToolsOpen ? (
        <div className="secured-message">Sensitive content has been hidden.</div>
      ) : (
        <div className="sensitive-data">Confidential Data</div>
      )}
    </div>
  );
}

Display Warning Overlay Manually

If you need to show the animated overlay manually on event triggers:

import React, { useState } from 'react';
import { DevToolsWarningOverlay } from 'devtools-guardian';

export default function DemoPage() {
  const [showWarning, setShowWarning] = useState(false);

  return (
    <div>
      <button onClick={() => setShowWarning(true)}>Simulate Defense System</button>
      
      {showWarning && (
        <DevToolsWarningOverlay 
          creatorName="Your Name"
          githubUrl="https://github.com/yourusername"
          linkedinUrl="https://linkedin.com/in/yourprofile"
          portfolioUrl="https://yourportfolio.com"
          onClose={() => setShowWarning(false)} 
        />
      )}
    </div>
  );
}

⚙️ Configuration Options

<DevToolsProtection /> Options

Inherits all options of useDevToolsDetector plus:

| Prop | Type | Default | Description | |---|---|---|---| | children | React.ReactNode | Required | The elements wrapped by the protection. | | overlay | boolean | true | Automatically renders the warning overlay when DevTools are detected. |

useDevToolsDetector / Overlay Configuration

| Option | Type | Default | Description | |---|---|---|---| | creatorName | string | "UnKnown" | Custom creator name displayed in console branding and warning screen footer. | | githubUrl | string | undefined | Custom GitHub profile link displayed in the warning card. | | linkedinUrl | string | undefined | Custom LinkedIn profile link displayed in the warning card. | | portfolioUrl | string | undefined | Custom portfolio/website link displayed in the warning card. | | warningMessage | string | Default | Custom message shown when DevTools are opened. | | disableRightClick | boolean | true | Disables browser right-click context menus. | | disableSelection | boolean | true | Prevents text selection on the page. | | blockedKeys | string[] | ['Ctrl+Shift+I', 'Ctrl+Shift+J', 'Ctrl+Shift+C', 'Ctrl+U', 'Ctrl+S'] | Keys/shortcuts intercepted and cancelled. | | pollInterval | number | 1500 | Frequency in ms to check DevTools status. | | detectInDevMode | boolean | true | Enables DevTools detection during local development. | | enableDebuggerInDevMode | boolean | false | Enables debugger statement timing checks in local development. | | onDetect | () => void | undefined | Callback fired when DevTools is opened. | | onClose | () => void | undefined | Callback fired when DevTools is closed. |

Keywords

devtools, devtools-detector, disable-devtools, disable-f12, disable-right-click, react-security, nextjs-security, web-security, protect-source-code, debugger-protection, anti-debugging, devtools-guardian

License

This project is licensed under the ISC License.