Invisible Captcha

Modern websites strive to balance security with a seamless user experience. CAPTCHAs are often seen as a necessary evil — annoying for users but crucial for stopping bots. ALTCHA takes a different approach.

The “Invisible Captcha” concept minimizes friction by verifying users without disrupting their flow. Unlike traditional CAPTCHAs that demand interaction (checkboxes, image puzzles), ALTCHA offers multiple invisible verification options — some requiring no visible UI or user actions at all.

This guide explains how to implement these invisible methods using ALTCHA’s flexible configuration and server-side tools.

ALTCHA’s Approach

ALTCHA introduces a proof-of-work (PoW) mechanism that eliminates the need for direct user interaction, offering a more seamless experience. While this method requires a small amount of time to solve challenges, it prioritizes UX by providing non-intrusive feedback during the verification process.

To make the experience even smoother, the ALTCHA widget includes an auto configuration property, enabling automatic initiation of the verification process on page load—without user intervention.

However, there are additional options available that allow you to implement an even more frictionless and truly invisible CAPTCHA experience, without any visible widgets on the page.

Option 1 – Hidden Widget

To achieve a truly invisible verification process, you can hide the ALTCHA widget using CSS (display: none) and configure the auto="onsubmit" attribute. This setup automatically triggers verification when a form is submitted, without displaying the widget.

The example below uses setAltchaVerifying() to manage a loading indicator and setAltchaVisible() to reveal the widget only when a code challenge is required (e.g., by Adaptive Captcha). In such cases, the code event is triggered to show the UI.

React Example:

App.tsx

<Altcha
  auto="onsubmit"
  style={{
    'display': altchaVisible ? 'block' : 'none',
  }}
  onStateChange={(ev) => {
    if ('detail' in ev) {
      // Toggle indicator
      setAltchaVerifying(ev.detail.state === 'verifying')

      if (ev.detail.state === 'code') {
        // If a code challenge is requested, show the widget
        setAltchaVisible(true)
      }

      if (ev.detail.state === 'unverified') {
        // Verification failed, show the widget or alert the user
        setAltchaVisible(true)
      }
    }
  }}
/>

See the full code

A working example is available on GitHub: github.com/altcha-org/example-invisible-captcha

Alternative front-end options:

• Use the Floating UI to keep the widget out of the way until needed.
• Skip the widget entirely and use altcha-lib to implement your own invisible challenge handler.

Option 2 – Server-Side Checks

If JavaScript is disabled or you need to perform verification purely on the backend, ALTCHA Sentinel provides robust server-side tools.

Use the Classifier to evaluate form data, IP addresses, and device characteristics in real time. The classifier integrates with Threat Intelligence to detect and block abusive clients without requiring any frontend components.

For implementation details, refer to the Classifier guide.