Skip to main content
Get Started using the Keverd React SDK

​
Overview

In this 5-minute quickstart, you’ll add Keverd to a React app and instantly get:
  • Persistent device IDs that survive incognito, VPNs, and browser clears
  • Real-time risk scores for every user action
  • Automatic fraud detection with zero additional code
No backend setup required. Keverd works out-of-the-box with your existing React app.

​
Prerequisites

  • Node.js 16+ and npm
  • Your Favorite Code Editor
  • A React app (new or existing)
  • 5 minutes of your time
This quickstart only covers the frontend setup. You’ll need a backend server to receive and process the device identification event to enable fraud detection. Check out one of the backend quickstarts after completing this quickstart.

​
Step 1: Get Your API Key

  1. Sign up for a free Keverd account at keverd dashboard
  2. Navigate to Settings → API Keys
  3. Copy your Public API Key (starts with pk_live_)

​
Step 2: Install the SDK

// bash

npm install @keverdjs/react
That’s it. One dependency. Nothing else.

​
Step 3: Initialize Keverd (One Line)

Open your App.jsx or main.jsx and add Keverd: 
// App.jsx

import { KeverdProvider } from '@keverdjs/react';

function App() {
  return (
    <KeverdProvider apiKey="pk_live_your_api_key_here">
      {/* Your app components */}
      <YourApp />
    </KeverdProvider>
  );
}

export default App;
Done. Your entire React app is now protected.

​
Wait, That’s It? Yes.

Keverd now automatically:
  • Fingerprints every device that visits your app
  • Tracks users across incognito mode, VPNs, and browser clears
  • Detects emulators, bots, and fraud farms
  • Calculates real-time risk scores for every interaction
  • Sends everything to our API for instant fraud detection
No form modifications. No event handlers. No backend code.

​
Optional: Access Device Data (If You Need It)

Keverd works automatically, but you can access device data anytime: 
// Any component in your app
import { useKeverd } from '@keverdjs/react';

function CheckoutPage() {
  const { deviceId, riskScore, isLoading } = useKeverd();
  
  if (isLoading) return <div>Loading...</div>;
  
  return (
    <div>
      <p>Device ID: {deviceId}</p>
      <p>Risk Score: {riskScore}/100</p>
      <p>Risk Level: {riskScore > 70 ? '⚠️ High' : '✅ Normal'}</p>
    </div>
  );
}

​
Complete Example: 10 Lines Total

// App.jsx - Complete working example
import { KeverdProvider, useKeverd } from '@keverdjs/react';

// Your component with Keverd data
function Checkout() {
  const { deviceId, riskScore } = useKeverd();
  
  return (
    <div>
      <h1>Checkout</h1>
      <p>Processing payment from device: {deviceId}</p>
      {riskScore > 70 && (
        <p style={{color: 'red'}}>
          ⚠️ High risk detected. Additional verification required.
        </p>
      )}
    </div>
  );
}

// Main app - just wrap with KeverdProvider
function App() {
  return (
    <KeverdProvider apiKey="pk_live_your_api_key_here">
      <Checkout />
    </KeverdProvider>
  );
}

export default App;

​
What About My Backend?

Keverd automatically adds device context to every request your app makes: 
// Every fetch/axios request automatically gets these headers:
headers: {
  'X-Keverd-Device-ID': 'dev_2x7f9k3m4n5p8q2r',
  'X-Keverd-Risk-Score': '23',
  'X-Keverd-Session-ID': 'sess_abc123'
}

// Your backend can use these to make fraud decisions
No backend changes needed. Just read the headers Keverd automatically adds.

​
Testing It Works

​
1. Check the Console

// Open your browser console
console.log(window.__KEVERD_DEVICE_ID__);
// Should show something like: "dev_2x7f9k3m4n5p8q2r"

​
2. Test Incognito Persistence

// In normal window
await keverd.getDeviceId(); // "dev_2x7f9k3m4n5p8q2r"

// Open incognito window, run same code
await keverd.getDeviceId(); // "dev_2x7f9k3m4n5p8q2r" (SAME ID!)

​
3. View Your Dashboard

Visit app.keverd.com/dashboard to see:
  • All devices accessing your app
  • Real-time risk scores
  • Blocked fraud attempts
  • Device histor