@vyltr/browser
v1.0.0
Published
Vyltr browser SDK — behavioral bot detection for any web framework (React, Vue, Svelte, vanilla JS)
Maintainers
vyltrReadme
@vyltr/browser
Browser-side behavioral bot detection — no CAPTCHA, no friction, GDPR compliant.
Detects bots silently using mouse trajectories, keystroke timing, scroll patterns, headless browser signals, and device fingerprinting. Works with any framework — React, Vue, Svelte, Next.js, or vanilla JS.
Install
npm install @vyltr/browserQuick Start — Vanilla JS
import { init } from '@vyltr/browser';
init('YOUR_SITE_ID');That's it. Vyltr starts collecting behavioral signals immediately and sends them to the API after 3 seconds.
React
// 1. App root — initialize once
import { useVyltr } from '@vyltr/browser/react';
export default function App() {
useVyltr('YOUR_SITE_ID');
return <YourApp />;
}
// 2. Before a sensitive action (login, checkout...)
import { useVyltrVerify } from '@vyltr/browser/react';
export default function LoginForm() {
const { flushAndGetId } = useVyltrVerify();
const handleLogin = async () => {
const sessionId = await flushAndGetId();
await fetch('/api/login', {
method: 'POST',
body: JSON.stringify({ email, password, vyltr_session_id: sessionId }),
});
};
return <button onClick={handleLogin}>Login</button>;
}Next.js
// app/layout.tsx
'use client';
import { useVyltr } from '@vyltr/browser/react';
export default function RootLayout({ children }) {
useVyltr(process.env.NEXT_PUBLIC_VYLTR_SITE_ID!);
return <html><body>{children}</body></html>;
}Vue 3
// main.ts
import { createApp } from 'vue';
import { init } from '@vyltr/browser';
import App from './App.vue';
init(import.meta.env.VITE_VYLTR_SITE_ID);
createApp(App).mount('#app');Svelte
// +layout.ts (SvelteKit)
import { browser } from '$app/environment';
import { init } from '@vyltr/browser';
if (browser) {
init(import.meta.env.VITE_VYLTR_SITE_ID);
}CDN (no bundler)
<script>window.VYLTR_SITE_ID = 'YOUR_SITE_ID';</script>
<script src="https://vyltr.ai/collector.js" async></script>Manual flush (server-side verify)
import { flushAndGetId } from '@vyltr/browser';
// Before login / payment / any sensitive action:
const sessionId = await flushAndGetId();
// Send sessionId to your backend, then:
// POST /api/v1/behavior/verify { session_id: sessionId }Options
init('YOUR_SITE_ID', {
apiUrl: 'https://vyltr.ai/api/v1', // Custom API endpoint
submitInterval: 15000, // Signal submission interval (ms)
});Server-side verification (Node.js)
const createVyltr = require('@vyltr/sdk');
const vyltr = createVyltr('YOUR_SDK_KEY');
app.post('/login', async (req, res) => {
const result = await vyltr.verify({
sessionId: req.body.vyltr_session_id,
ip: req.ip,
userAgent: req.headers['user-agent'],
});
if (result.action === 'block') {
return res.status(403).json({ error: 'Bot detected' });
}
// proceed with login...
});Signals collected
| Signal | Description | |--------|-------------| | Mouse trajectory | 60-point path with timing | | Click timing variance | Standard deviation between clicks | | Scroll depth & speed | Natural vs automated patterns | | Keystroke cadence | Characters per second | | Touch events | Mobile vs desktop | | Headless detection | WebDriver, PhantomJS, CDP, ChromeDriver | | Device fingerprint | Screen, language, timezone | | Session duration | Time-on-page analysis |
Privacy & GDPR
- No personal data collected (no name, email, IP stored client-side)
- All data processed server-side in France 🇫🇷
- Compliant with GDPR, ePrivacy Directive
- No cookie required
Get your free Site ID at vyltr.ai — free up to 10,000 requests/month.