HATCHA

CAPTCHA prouve que vous êtes humain. HATCHA prouve que vous ne l'êtes pas.

Fenêtre modale HATCHA en action

HATCHA (Hyperfast Agent Test for Computational Heuristic Assessment) est un CAPTCHA inversé qui verrouille l'accès derrière des défis triviaux pour les agents IA mais pénibles pour les humains — multiplication de grands nombres, inversion de chaînes, décodage binaire, et plus encore.

Vérification côté serveur — les réponses n'atteignent jamais le client. Jetons signés HMAC, sans état, aucune base de données requise.
5 types de défis intégrés — mathématique, inversion de chaîne, comptage de caractères, tri, décodage binaire.
Extensible — enregistrez des générateurs de défis personnalisés à l'exécution.
Thémable — mode sombre, clair ou automatique via des propriétés CSS personnalisées.
Adaptateurs de frameworks — middleware Next.js App Router et Express prêts à l'emploi.

Démarrage rapide (Next.js)

1. Installer

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

2. Ajouter 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. Envelopper votre 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. Déclencher la vérification

"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. Définir votre secret

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

Comment ça fonctionne

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 réponse n'atteint jamais le client. Le jeton signé est opaque et ne contient qu'une réponse hachée et une expiration. La vérification est sans état — aucune base de données requise.

Types de défis

Défis personnalisés

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

Thèmes

HATCHA utilise des propriétés CSS personnalisées sous le préfixe --hatcha-*. Surchargez-les sur n'importe quel élément parent :

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

Transmettez theme="dark", theme="light" ou theme="auto" à <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);

Paquets

Paquet	Description

Développement

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

Contribution

Les contributions sont les bienvenues ! Consultez CONTRIBUTING.md pour les instructions de configuration et les directives.

Licence

MIT

`math`	×	Multiplication 5 chiffres × 5 chiffres	30 s
`string`	↔	Inverse une chaîne aléatoire de 60 à 80 caractères	30 s
`count`	#	Compte un caractère précis dans ~250 caractères	30 s
`sort`	⇅	Trie 15 nombres, renvoie le k-ième plus petit	30 s
`binary`	01	Décode des octets binaires en ASCII	30 s

HATCHA

Populaires

HATCHA

Démarrage rapide (Next.js)

1. Installer

2. Ajouter la route API

3. Envelopper votre layout

4. Déclencher la vérification

5. Définir votre secret

Comment ça fonctionne

Types de défis

Défis personnalisés

Thèmes

Express

Paquets

Développement

Contribution

Licence