React Integration

The SDK provides React-specific hooks and components for seamless integration.

Setup

Wrap your app with the provider:

import { SimplrFraudProvider } from "@simplr-ai/js/react";

function App() {
  return (
    <SimplrFraudProvider config={{ collectBiometrics: true }}>
      <YourApp />
    </SimplrFraudProvider>
  );
}

Hooks

useSimplrFraud()

Access the SDK instance and core methods:

import { useSimplrFraud } from "@simplr-ai/js/react";

function MyComponent() {
  const { isReady, collect, trackInput, reset } = useSimplrFraud();

  const handleClick = async () => {
    const signals = await collect();
    console.log(signals);
  };

  return (
    <button onClick={handleClick} disabled={!isReady}>
      Collect Signals
    </button>
  );
}

useSimplrForm()

Simplified form integration with automatic tracking:

import { useSimplrForm } from "@simplr-ai/js/react";

function SignupForm() {
  const { isReady, handleSubmit, trackInput } = useSimplrForm();

  const onSubmit = handleSubmit(async (signals, formData) => {
    // signals contains device + behavior data
    await api.post("/signup", {
      email: formData.get("email"),
      signals,
    });
  });

  return (
    <form onSubmit={onSubmit}>
      <input
        type="email"
        name="email"
        {...trackInput("email")}
        placeholder="Email"
      />
      <input
        type="password"
        name="password"
        {...trackInput("password")}
        placeholder="Password"
      />
      <button type="submit" disabled={!isReady}>
        Sign Up
      </button>
    </form>
  );
}

useDeviceFingerprint()

Get just the device fingerprint:

import { useDeviceFingerprint } from "@simplr-ai/js/react";

function DeviceInfo() {
  const { fingerprint, isLoading, error } = useDeviceFingerprint();

  if (isLoading) return <span>Loading...</span>;
  if (error) return <span>Error: {error.message}</span>;

  return <span>Device ID: {fingerprint}</span>;
}

Provider Configuration

<SimplrFraudProvider
  config={{
    // Enable behavioral biometrics
    collectBiometrics: true,

    // Start tracking immediately
    autoStart: true,

    // Custom device ID (optional)
    deviceId: undefined,

    // Debug mode
    debug: false,
  }}
>
  <App />
</SimplrFraudProvider>

Complete Example

import React, { useState } from "react";
import { SimplrFraudProvider, useSimplrForm } from "@simplr-ai/js/react";

function SignupPage() {
  return (
    <SimplrFraudProvider config={{ collectBiometrics: true }}>
      <SignupForm />
    </SimplrFraudProvider>
  );
}

function SignupForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [status, setStatus] = useState<
    "idle" | "loading" | "success" | "error"
  >("idle");

  const { isReady, handleSubmit, trackInput } = useSimplrForm();

  const onSubmit = handleSubmit(async (signals) => {
    setStatus("loading");

    try {
      const response = await fetch("/api/signup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password, signals }),
      });

      const result = await response.json();

      if (result.risk_level === "critical") {
        setStatus("error");
        alert("Unable to create account");
      } else {
        setStatus("success");
        window.location.href = "/dashboard";
      }
    } catch (err) {
      setStatus("error");
    }
  });

  return (
    <form onSubmit={onSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          {...trackInput("email")}
          required
        />
      </div>

      <div>
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          {...trackInput("password")}
          required
        />
      </div>

      <button type="submit" disabled={!isReady || status === "loading"}>
        {status === "loading" ? "Creating account..." : "Sign Up"}
      </button>
    </form>
  );
}

export default SignupPage;

TypeScript Types

import type {
  SimplrFraudConfig,
  CollectedSignals,
  UseSimplrFraudReturn,
  UseSimplrFormReturn,
  UseDeviceFingerprintReturn,
} from "@simplr-ai/js/react";

Next.js Integration

For Next.js with App Router, use client components:

// app/signup/page.tsx
import SignupForm from "./SignupForm";

export default function SignupPage() {
  return <SignupForm />;
}

// app/signup/SignupForm.tsx
("use client");

import { SimplrFraudProvider, useSimplrForm } from "@simplr-ai/js/react";

export default function SignupForm() {
  // ... your form component
}

For Pages Router, see the Installation guide.