@keverdjs/vue

Vue 3 SDK for Keverd device identification and fraud detection.

Installation

npm install @keverdjs/vue

Keverd has no region/realm configuration — there is nothing equivalent to Fingerprint's region option. The same API key works globally.

Quickstart

In this quickstart, you'll add Keverd to a Vue 3 app and identify the device right before a user creates an account, so you can send a trusted event ID to your backend for fraud checks.

1. Get your public API key

Sign in to the Keverd dashboard and copy your public API key from the API keys page.

2. Register the plugin

Open src/main.js (or src/main.ts) and register KeverdPlugin once, before mounting the app. The plugin initializes the underlying agent and starts a session immediately so identification calls are instant.

import { createApp } from 'vue';
import { KeverdPlugin } from '@keverdjs/vue';
import App from './App.vue';

const app = createApp(App);

app.use(KeverdPlugin, {
  apiKey: 'PUBLIC_API_KEY',
  // debug: true,         // optional — log SDK activity to console
  // endpoint: '...',      // optional — override the API endpoint
});

app.mount('#app');

For production, use Vite env variables to inject the key instead of hard-coding it.

3. Trigger identification on demand

Inside any component, use the useVisitorData composable. Pass immediate: false so identification only runs when the user takes an action (here, clicking Create Account).

<script setup>
import { ref } from 'vue';
import { useVisitorData } from '@keverdjs/vue';

const username = ref('');
const password = ref('');

const { isLoading, getData } = useVisitorData({ immediate: false });

async function handleSubmit() {
  const { requestId, action, risk_score } = await getData();

  console.log('Event ID:', requestId);
  console.log('Action:', action);
  console.log('Risk score:', risk_score);

  // Send the event ID to your backend along with the form data.
  // Your server uses it to look up the full identification result.
  await fetch('/api/create-account', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      username: username.value,
      password: password.value,
      event_id: requestId,
    }),
  });
}
</script>

<template>
  <div class="wrapper">
    <h1>Create an account</h1>
    <input v-model="username" type="text" placeholder="Username" />
    <input v-model="password" type="password" placeholder="Password" />
    <button :disabled="isLoading" @click="handleSubmit">
      {{ isLoading ? 'Loading…' : 'Create Account' }}
    </button>
  </div>
</template>

That's the whole frontend integration. From here, your backend uses the event_id (i.e. requestId) to look up the full identification result via the Keverd Events API and decide whether to allow, challenge, or block.

API

KeverdPlugin

| Option | Type | Required | Description | | ---------------- | ---------- | -------- | --------------------------------------------------- | | apiKey | string | yes | Public API key from the Keverd dashboard. | | endpoint | string | no | Override the Keverd API base URL. | | userId | string | no | Stable user ID to associate with this session. | | debug | boolean | no | Verbose console logs from the underlying agent. | | encryptPayload | boolean | no | Set to false to send plaintext JSON (legacy). |

useVisitorData(options?)

| Option | Type | Default | Description | | ----------- | --------- | ------- | ---------------------------------------------------------- | | immediate | boolean | false | If true, automatically calls getData() once on mount. |

Returns:

| Field | Type | Description | | ----------- | --------------------------------- | ---------------------------------------------------------------------- | | data | Ref<KeverdVisitorData \| null> | Latest identification response, or null until getData() resolves. | | isLoading | Ref<boolean> | true while getData() is in flight. | | error | Ref<KeverdError \| null> | Last error, if any. | | getData | () => Promise<KeverdVisitorData>| Triggers identification and resolves with the response. |

KeverdVisitorData is the raw response shape returned by the Keverd backend. The fields you'll most often use:

• requestId — event ID; send this to your backend.
• action — one of 'allow' | 'soft_challenge' | 'hard_challenge' | 'block'.
• risk_score — numeric risk score.
• session_id — current Keverd session ID.

Login helpers

import {
  hashLoginIdentifier,
  buildLoginContextFromIdentifier,
  handleAdaptiveResponse,
} from '@keverdjs/vue';

These are re-exported from the underlying agent so every framework SDK stays in sync. See the agent docs for usage.

Migrating from 1.x

The 1.x API exposed KeverdSDK, useKeverdProvider, useKeverdVisitorData, and a wrapper class that remapped backend responses into camelCase. 2.x is a clean break:

• Register KeverdPlugin instead of calling useKeverdProvider.
• Use useVisitorData instead of useKeverdVisitorData.
• await getData() now resolves directly to the agent response — read requestId, action, risk_score straight off it (no more visitorId remap).
• Standalone collectors and the KeverdSDK wrapper class are no longer exported. Use @keverdjs/agent directly if you need low-level access.