HATCHA

CAPTCHA dimostra che sei umano. HATCHA dimostra che non lo sei.

Modale HATCHA in azione

HATCHA (Hyperfast Agent Test for Computational Heuristic Assessment) è un CAPTCHA inverso che protegge l'accesso con sfide banali per gli agenti AI ma noiose per gli umani — moltiplicazione di grandi numeri, inversione di stringhe, decodifica binaria e altro.

Verifica lato server — le risposte non arrivano mai al client. Token firmati HMAC, stateless, nessun database richiesto.
5 tipi di sfida integrati — matematica, inversione di stringhe, conteggio di caratteri, ordinamento, decodifica binaria.
Estensibile — registra generatori di sfide personalizzate a runtime.
Personalizzabile — modalità scura, chiara o automatica tramite proprietà CSS custom.
Adapter per framework — Next.js App Router e middleware Express pronti all'uso.

Avvio rapido (Next.js)

1. Installazione

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

2. Aggiungi la route 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. Avvolgi il tuo 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. Avvia la verifica

"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. Imposta il tuo segreto

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

Come funziona

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 risposta non arriva mai al client. Il token firmato è opaco e contiene solo una risposta hashata + scadenza. La verifica è stateless — nessun database necessario.

Tipi di sfida

Sfide personalizzate

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),
    };
  },
});

Temi

HATCHA utilizza proprietà CSS custom con scope sotto --hatcha-*. Sovrascrivile su qualsiasi elemento padre:

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

Passa 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);

Pacchetti

Pacchetto	Descrizione

Sviluppo

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

Contributi

I contributi sono benvenuti! Consulta CONTRIBUTING.md per istruzioni di configurazione e linee guida.

Licenza

MIT

`math`	×	Moltiplicazione di 5 cifre × 5 cifre	30 s
`string`	↔	Inverti una stringa casuale di 60–80 caratteri	30 s
`count`	#	Conta un carattere specifico in ~250 caratteri	30 s
`sort`	⇅	Ordina 15 numeri, restituisci il k-esimo più piccolo	30 s
`binary`	01	Decodifica ottetti binari in ASCII	30 s

HATCHA

Più Popolari

HATCHA

Avvio rapido (Next.js)

1. Installazione

2. Aggiungi la route API

3. Avvolgi il tuo layout

4. Avvia la verifica

5. Imposta il tuo segreto

Come funziona

Tipi di sfida

Sfide personalizzate

Temi

Express

Pacchetti

Sviluppo

Contributi

Licenza