@redeyed_/sentinel-vue

A Vue 3 component for the Redeyed Sentinel CAPTCHA. Drop a privacy-first, bot-resistant human check into any Vue app with a single tag.

Sentinel is free to use, but it needs keys. Create a free Site Key and Secret Key at https://redeyed.com/developers.

Install

npm install @redeyed_/sentinel-vue
# vue ^3 is a peer dependency you already have in your app

Quick start

<script setup lang="ts">
import { SentinelCaptcha } from '@redeyed_/sentinel-vue';

function onVerify(token: string) {
  // Send `token` to YOUR server, then verify it (see "Server-side verification").
  console.log('got token', token);
}

function onError(err: Error) {
  console.error('Sentinel failed to load', err);
}
</script>

<template>
  <SentinelCaptcha
    site-key="YOUR_PUBLIC_SITE_KEY"
    @verify="onVerify"
    @error="onError"
  />
</template>

Register globally (optional)

The default export is a Vue plugin that registers <SentinelCaptcha> for you:

import { createApp } from 'vue';
import RedeyedCaptcha from '@redeyed_/sentinel-vue';
import App from './App.vue';

createApp(App).use(RedeyedCaptcha).mount('#app');

Props

Prop	Type	Required	Description
site-key	string	yes	Public site key from redeyed.com/developers.
widget	string	no	Widget variant (data-widget).
theme	string	no	Theme, e.g. light / dark (data-theme).
scheme	string	no	Colour scheme (data-scheme). Includes premium midnight / aurora.
width	string	no	Widget width, e.g. full / 100% / 340px (data-width).
difficulty	string | number	no	Challenge strength: easy/medium/hard/max or 1-6 (data-difficulty).
base-url	string	no	Sentinel host. Defaults to https://redeyed.com.

If site-key is missing, the component renders nothing and logs a console.warn.

Events

Event	Payload	When
verify	string	The user solved the CAPTCHA; payload is the token.
error	Error	The Sentinel script failed to load.

How it works

The component loads {base-url}/sentinel.js once per page (it is injected only if not already present) and renders:

<div class="sentinel-captcha" data-sitekey="..."></div>

When solved, the Sentinel widget injects a hidden sentinel-token input and dispatches a bubbling sentinel:solved DOM event. This component listens for that event and re-emits the token via @verify. The component is SSR-safe — all document / window access is guarded.

Server-side verification

Never put your Secret Key in the client. Verify the token from your own backend:

POST https://redeyed.com/sentinel/siteverify
Content-Type: application/json

{ "secret": "YOUR_SECRET_KEY", "response": "TOKEN_FROM_VERIFY_EVENT" }

You may also include an optional "remoteip" field with the end user's IP. The check passes when the response has success === true; the response also carries outcome and score.

Both keys come from the Redeyed Lab → Sentinel → Sites. The Secret Key is shown once and stays server-side.

Build (contributors)

Source ships under src/. To produce the dist/ bundle:

npm install
npm run build   # vite (ESM + CJS) + vue-tsc (type declarations)

Changelog

• 1.0.1 — Add width prop (data-width) and midnight / aurora schemes.

License

MIT © 2026 Redeyed Corporation