HATCHA

CAPTCHA demuestra que eres humano. HATCHA demuestra que no lo eres.

Modal de HATCHA en acción

HATCHA (Hyperfast Agent Test for Computational Heuristic Assessment) es un CAPTCHA inverso que restringe el acceso mediante desafíos triviales para agentes de IA pero tediosos para humanos: multiplicación de números grandes, inversión de cadenas, decodificación binaria y más.

Verificación del lado del servidor — las respuestas nunca llegan al cliente. Tokens firmados con HMAC, sin estado, no requiere base de datos.
5 tipos de desafíos integrados — matemáticas, inversión de cadenas, conteo de caracteres, ordenamiento, decodificación binaria.
Extensible — registra generadores de desafíos personalizados en tiempo de ejecución.
Personalizable con temas — modo oscuro, claro o automático mediante propiedades personalizadas CSS.
Adaptadores de framework — Next.js App Router y middleware de Express listos para usar.

Inicio rápido (Next.js)

1. Instalar

npm install @mondaycom/hatcha-react @mondaycom/hatcha-server

2. Añadir la ruta de la API

// app/api/hatcha/[...hatcha]/route.ts
import { createHatchaHandler } from "@mondaycom/hatcha-server/nextjs";

const handler = createHatchaHandler({
  secret: process.env.HATCHA_SECRET!,
});

export const GET = handler;
export const POST = handler;

3. Envolver tu layout

// app/layout.tsx
import { HatchaProvider } from "@mondaycom/hatcha-react";
import "@mondaycom/hatcha-react/styles.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <HatchaProvider>{children}</HatchaProvider>
      </body>
    </html>
  );
}

4. Activar la verificación

"use client";
import { useHatcha } from "@mondaycom/hatcha-react";

function AgentModeButton() {
  const { requestVerification } = useHatcha();

  return (
    <button
      onClick={() =>
        requestVerification((token) => {
          console.log("Agent verified!", token);
        })
      }
    >
      Enter Agent Mode
    </button>
  );
}

5. Establecer tu secreto

# .env.local
HATCHA_SECRET=your-random-secret-here

Cómo funciona

Client                            Server
  │                                 │
  │  GET /api/hatcha/challenge      │
  │────────────────────────────────►│
  │                                 │  Generate challenge
  │                                 │  Hash answer
  │                                 │  HMAC-sign { hash, expiry }
  │  { challenge (no answer), token }
  │◄────────────────────────────────│
  │                                 │
  │  Agent solves the challenge     │
  │                                 │
  │  POST /api/hatcha/verify        │
  │  { answer, token }              │
  │────────────────────────────────►│
  │                                 │  Verify HMAC signature
  │                                 │  Check expiry
  │                                 │  Compare answer hash
  │  { success, verificationToken } │
  │◄────────────────────────────────│

La respuesta nunca llega al cliente. El token firmado es opaco y contiene solo una respuesta hash + fecha de expiración. La verificación no tiene estado — no necesita base de datos.

Tipos de desafío

Desafíos personalizados

import { registerChallenge } from "@mondaycom/hatcha-server";

registerChallenge({
  type: "hex",
  generate() {
    const n = Math.floor(Math.random() * 0xffffff);
    return {
      display: {
        type: "hex",
        icon: "0x",
        title: "Hex Decode",
        description: "Convert this hex number to decimal.",
        prompt: `0x${n.toString(16).toUpperCase()}`,
        timeLimit: 30,
        answer: String(n),
      },
      answer: String(n),
    };
  },
});

Temas

HATCHA utiliza propiedades personalizadas CSS con ámbito bajo --hatcha-*. Sobrescríbelas en cualquier elemento padre:

[data-hatcha-theme] {
  --hatcha-accent: #3b82f6;
  --hatcha-accent-light: #60a5fa;
  --hatcha-bg: #060b18;
  --hatcha-fg: #e4eaf6;
  --hatcha-success: #22c55e;
  --hatcha-danger: #ef4444;
}

Pasa theme="dark", theme="light" o theme="auto" a <HatchaProvider> o <Hatcha>.

Express

import express from "express";
import { hatchaRouter } from "@mondaycom/hatcha-server/express";

const app = express();
app.use(express.json());
app.use("/api/hatcha", hatchaRouter({ secret: process.env.HATCHA_SECRET! }));

app.listen(3000);

Paquetes

Paquete	Descripción

Desarrollo

git clone https://github.com/mondaycom/HATCHA.git
cd HATCHA
pnpm install
pnpm build
cd examples/nextjs-app
pnpm dev

Contribuciones

¡Las contribuciones son bienvenidas! Consulta CONTRIBUTING.md para instrucciones de configuración y pautas.

Licencia

MIT

`math`	×	Multiplicación de 5 dígitos × 5 dígitos	30 s
`string`	↔	Invertir una cadena aleatoria de 60–80 caracteres	30 s
`count`	#	Contar un carácter específico en ~250 caracteres	30 s
`sort`	⇅	Ordenar 15 números, devolver el k-ésimo más pequeño	30 s
`binary`	01	Decodificar octetos binarios a ASCII	30 s

HATCHA

Más Populares

HATCHA

Inicio rápido (Next.js)

1. Instalar

2. Añadir la ruta de la API

3. Envolver tu layout

4. Activar la verificación

5. Establecer tu secreto

Cómo funciona

Tipos de desafío

Desafíos personalizados

Temas

Express

Paquetes

Desarrollo

Contribuciones

Licencia