@spektre/react

React security and monitoring wrapper for Spektre platform. Protect your React applications with real-time security scanning, monitoring, and active protection.

Installation

npm install @spektre/veil

Quick Start

Wrap your application with SecurityGate to enable security monitoring and protection:

import { SecurityGate } from '@spektre/veil';

function App() {
  return (
    <SecurityGate apiKey="your-spektre-api-key">
      <YourApp />
    </SecurityGate>
  );
}

That's it! Your app is now protected with Spektre security monitoring.

Full Usage Example

Configure security modules and add custom handlers:

import { SecurityGate } from '@spektre/veil';

function App() {
  return (
    <SecurityGate
      apiKey="your-spektre-api-key"
      config={{
        environment: 'prod',
        enabledEnvironments: ['prod', 'staging'],
        modules: {
          performanceMonitoring: true,
          secretDetection: true,
          scriptProfiling: true,
          supplyChainDetection: true,
          sessionProtection: true,
          activeProtection: true,
        },
        onSecurityFailed: (error) => {
          console.error('Security verification failed:', error);
        },
        onAttackBlocked: (attack) => {
          console.warn('Attack blocked:', attack);
        },
        onTamperingDetected: (details) => {
          console.warn('Tampering detected:', details);
        },
      }}
      loadingComponent={<CustomLoadingScreen />}
      fallback={<SecurityErrorScreen />}
    >
      <YourApp />
    </SecurityGate>
  );
}

Using Hooks

useSpektre Hook

Access security status and monitoring data throughout your application:

import { useSpektre } from '@spektre/veil';

function SecurityDashboard() {
  const {
    isVerified,
    sessionId,
    protectionEnabled,
    blockedRequests,
    totalBlocked,
    secretExposures,
    scriptProfiles,
    supplyChainAlerts,
    sessionAnomalies,
    runScan,
    getTelemetry,
    getProtectionStats,
  } = useSpektre();

  const handleManualScan = async () => {
    await runScan();
    console.log('Security scan completed');
  };

  return (
    <div>
      <h2>Security Status</h2>
      <p>Verified: {isVerified ? 'Yes' : 'No'}</p>
      <p>Session ID: {sessionId}</p>
      <p>Protection: {protectionEnabled ? 'Active' : 'Inactive'}</p>
      <p>Total Blocked Requests: {totalBlocked}</p>
      <p>Secret Exposures: {secretExposures}</p>
      <p>Script Profiles: {scriptProfiles}</p>
      <p>Supply Chain Alerts: {supplyChainAlerts}</p>
      <p>Session Anomalies: {sessionAnomalies}</p>
      <button onClick={handleManualScan}>Run Security Scan</button>
    </div>
  );
}

useProtectedFetch Hook

Make secure API calls that are only executed after security verification:

import { useProtectedFetch } from '@spektre/veil';

function DataComponent() {
  const fetch = useProtectedFetch();
  const [data, setData] = useState(null);

  const loadData = async () => {
    try {
      const response = await fetch('/api/sensitive-data');
      const json = await response.json();
      setData(json);
    } catch (error) {
      console.error('Fetch failed:', error);
    }
  };

  return (
    <div>
      <button onClick={loadData}>Load Data</button>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

API Reference

SecurityGate Component

The main component that wraps your application and provides security monitoring.

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiKey | string | Yes | Your Spektre API key from the dashboard | | children | ReactNode | Yes | Your application components | | config | SpektreConfig | No | Configuration options (see below) | | fallback | ReactNode | No | Custom component to show on security failure | | loadingComponent | ReactNode | No | Custom component to show during initialization |

Config Options

interface SpektreConfig {
  // Environment settings
  environment?: 'dev' | 'staging' | 'prod';
  enabledEnvironments?: string[];

  // Security modules
  modules?: {
    performanceMonitoring?: boolean;
    secretDetection?: boolean;
    scriptProfiling?: boolean;
    supplyChainDetection?: boolean;
    sessionProtection?: boolean;
    activeProtection?: boolean;
  };

  // Event handlers
  onSecurityFailed?: (error: string) => void;
  onAttackBlocked?: (attack: BlockedAttack) => void;
  onTamperingDetected?: (details: TamperingDetails) => void;
}

useSpektre Hook

Returns security status and monitoring data.

Return Values

| Property | Type | Description | |----------|------|-------------| | isVerified | boolean | Whether security verification passed | | sessionId | string \| null | Current Spektre session ID | | protectionEnabled | boolean | Whether active protection is enabled | | blockedRequests | BlockedRequest[] | List of blocked malicious requests | | totalBlocked | number | Total count of blocked requests | | secretExposures | number | Number of detected secret exposures | | scriptProfiles | number | Number of profiled scripts | | supplyChainAlerts | number | Number of supply chain alerts | | sessionAnomalies | number | Number of session anomalies detected | | runScan | () => Promise<void> | Manually trigger a security scan | | getTelemetry | () => MonitoringState | Get current monitoring telemetry | | getProtectionStats | () => ProtectionState | Get current protection statistics |

useProtectedFetch Hook

Returns a fetch function that only executes after security verification.

const fetch: ProtectedFetch = useProtectedFetch();

The returned fetch function has the same signature as the native fetch API but throws an error if called before security verification is complete.

Security Modules

Performance Monitoring

Tracks application performance metrics and identifies performance anomalies that could indicate security issues.

Secret Detection

Scans for exposed API keys, tokens, and other sensitive credentials in your application code and network requests.

Script Profiling

Analyzes all scripts loaded by your application to detect malicious or suspicious code.

Supply Chain Detection

Monitors third-party dependencies and detects compromised or vulnerable packages.

Session Protection

Protects user sessions from hijacking, fixation, and other session-based attacks.

Active Protection

Actively blocks malicious requests and attacks in real-time.

Environment Configuration

Control when security monitoring is active:

<SecurityGate
  apiKey="your-api-key"
  config={{
    environment: 'prod',
    enabledEnvironments: ['prod', 'staging'],
  }}
>
  <App />
</SecurityGate>

In this example, security monitoring only runs in production and staging environments. In other environments (like development), the SecurityGate passes through without performing security checks.

Custom UI Components

Custom Loading Screen

<SecurityGate
  apiKey="your-api-key"
  loadingComponent={
    <div className="loading-screen">
      <Spinner />
      <p>Initializing security...</p>
    </div>
  }
>
  <App />
</SecurityGate>

Custom Error Fallback

<SecurityGate
  apiKey="your-api-key"
  fallback={
    <div className="error-screen">
      <h1>Security Verification Failed</h1>
      <p>Please contact support</p>
    </div>
  }
>
  <App />
</SecurityGate>

Links

• Spektre Platform - Main platform website
• Dashboard - Manage your API keys and view security reports
• Documentation - Complete documentation and guides

License

MIT

Built with Spektre - Securing the future of web applications