Esta página aún no está disponible en tu idioma.

React Captcha Integration

ALTCHA is a next-generation, privacy-first CAPTCHA solution that protects your React applications from bots and spam without tracking users or using cookies. This guide walks you through integrating ALTCHA in your React projects for secure, GDPR-compliant React Captcha implementation.

Example Project

React Starter Project on GitHub

Why Use ALTCHA in React?

Using React Captcha integration with ALTCHA offers multiple advantages:

Privacy-first: No cookies or user tracking.
Regulation compliant: Fully GDPR and CCPA compliant.
Accessible: Works for all users, including those using assistive technologies.
Lightweight: Minimal performance impact on your React app.

Integrating ALTCHA ensures your forms and user interactions are protected from automated abuse without compromising user experience.

Installation

Install ALTCHA via npm:

npm install altcha

Or with yarn:

yarn add altcha

Basic Integration in React

Import ALTCHA in your React component:

import 'altcha';

Add the ALTCHA WebComponent to your form:

function ContactForm() {
  const handleSubmit = (event) => {
    event.preventDefault();
    // handle form submission
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Your Name" required />
      <input type="email" name="email" placeholder="Your Email" required />

      {/* ALTCHA WebComponent */}
      <altcha-widget challengeurl="https://your-challenge-url"></altcha-widget>

      <button type="submit">Submit</button>
    </form>
  );
}

Verify the CAPTCHA payload on your backend:

Always verify the ALTCHA token server-side to prevent bypasses. Example using Node.js with Hono and altcha-lib:

import { Hono } from 'hono';
import { verifySolution } from 'altcha-lib';

const hmacKey = 'your-secret-key'; // Replace with your HMAC secret

const app = new Hono();

app.post('/submit', async (c) => {
  const formData = await c.req.formData();
  const altchaToken = formData.get('altcha');

  if (!altchaToken) {
    return c.json({ error: 'Altcha payload missing' }, 400);
  }

  const verified = await verifySolution(String(altchaToken), hmacKey);

  if (!verified) {
    return c.json({ error: 'Invalid Altcha payload' }, 400);
  }

  // TODO: process form submission
  return c.json({ ok: true });
});

For detailed server guides, see Server Integration. Full server source code is available here: Node.js Starter Project.

Getting the Challenge URL

ALTCHA is self-hosted. To get the challenge URL, integrate ALTCHA on your backend or install ALTCHA Sentinel. See Server Integration for step-by-step instructions in multiple languages.

You can customize the ALTCHA widget for your website’s UX:

Adjust CSS using CSS variables or .altcha-* classes.
Use built-in localizations available in 50+ languages.

Best Practices for Captcha React Integration

Place the captcha before the submit button for better UX.
Always verify payload on the server-side.
Customize the widget to match your app’s design.
Handle errors gracefully to avoid frustrating users.

Frequently Asked Questions

Q: Can I use ALTCHA’s React Captcha with TypeScript?
Yes! ALTCHA React fully supports TypeScript with proper types.

Q: Does ALTCHA’s React Captcha require cookies?
No. ALTCHA is fully cookie-free and does not track users.

Q: Does ALTCHA’s React Captcha require external services?
No. ALTCHA is fully self-hosted, no external services, no data is ever shared with anyone.

Q: Is ALTCHA’s React Captcha accessible?
Yes. ALTCHA meets WCAG accessibility standards.