HATCHA

CAPTCHA prova que você é humano. HATCHA prova que você não é.

HATCHA modal em ação

HATCHA (Hyperfast Agent Test for Computational Heuristic Assessment) é um CAPTCHA reverso que bloqueia o acesso por meio de desafios triviais para agentes de IA, mas dolorosos para humanos — multiplicação de números grandes, reversão de strings, decodificação binária e muito mais.

Verificação no lado do servidor — as respostas nunca chegam ao cliente. Tokens assinados com HMAC, sem estado, sem necessidade de banco de dados.
5 tipos de desafio integrados — matemática, reversão de string, contagem de caracteres, ordenação, decodificação binária.
Extensível — registre geradores de desafio personalizados em tempo de execução.
Tematizável — modo escuro, claro ou automático via propriedades CSS personalizadas.
Adaptadores de framework — Next.js App Router e middleware Express prontos para uso.

Início rápido (Next.js)

1. Instalar

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

2. Adicionar a rota da 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. Encapsular seu 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. Acionar verificação

"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. Definir seu segredo

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

Como 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 } │
  │◄────────────────────────────────│

A resposta nunca chega ao cliente. O token assinado é opaco e contém apenas uma resposta com hash + expiração. A verificação é sem estado — nenhum banco de dados necessário.

Tipos de desafio

Tipo	Ícone	O que faz	Limite de tempo
`math`	×	Multiplicação de 5 dígitos × 5 dígitos	30 s
`string`	↔	Inverter uma string aleatória de 60–80 caracteres	30 s
`count`	#	Contar um caractere específico em ~250 caracteres	30 s
`sort`	⇅	Ordenar 15 números, retornar o k-ésimo menor	30 s
`binary`	01	Decodificar octetos binários para ASCII	30 s

Desafios 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 usa propriedades CSS personalizadas com escopo sob --hatcha-*. Substitua-as em qualquer elemento pai:

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

Passe theme="dark", theme="light" ou theme="auto" para <HatchaProvider> ou <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);

Pacotes

Pacote	Descrição
`@mondaycom/hatcha-core`	Geração de desafios e verificação criptográfica
`@mondaycom/hatcha-react`	Componente React, provider e estilos
`@mondaycom/hatcha-server`	Handlers de servidor Next.js e Express

Desenvolvimento

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

Contribuindo

Contribuições são bem-vindas! Consulte CONTRIBUTING.md para instruções de configuração e diretrizes.

Licença

MIT

HATCHA

Mais Populares

HATCHA

Início rápido (Next.js)

1. Instalar

2. Adicionar a rota da API

3. Encapsular seu layout

4. Acionar verificação

5. Definir seu segredo

Como funciona

Tipos de desafio

Desafios personalizados

Temas

Express

Pacotes

Desenvolvimento

Contribuindo

Licença