How to Add a Privacy-First CAPTCHA to Your Angular App Using ALTCHA (No Google Tracking)

Stop spam, bots, and fake submissions while keeping your users’ privacy intact. A complete guide with TypeScript backend + Angular integration.

Photo by Mohamed Nohassi on Unsplash

ALTCHA is the modern, ethical replacement for reCAPTCHA that you’ve been waiting for. It’s completely self-hosted, privacy-first, lightweight, and works beautifully in Angular.

In this article I’ll show you:

• Why adding CAPTCHA protection is more critical than ever
• The massive benefits (and why ignoring it hurts your business)
• A clean TypeScript backend that generates challenges
• Step-by-step Angular integration using the official widget

Let’s dive in.

Why Every Website Needs CAPTCHA Protection

Bots aren’t just annoying anymore, they’re sophisticated AI-powered machines that can:

• Create thousands of fake accounts per minute
• Flood your forms with spam comments and contact submissions
• Brute-force login attempts
• Scrape your data or post malicious links
• Waste your server resources and inflate hosting bills

Real-world benefits of adding CAPTCHA:

1. Dramatic spam reduction- 90–98% of automated abuse disappears instantly.
2. Better data quality- Your database stays clean (no fake emails, no junk registrations).
3. Improved security- Blocks credential stuffing and account takeover attempts.
4. Lower server costs- Fewer bogus/spam requests equals less CPU, bandwidth, and database load.
5. Higher trust & conversion- Real users see a seamless experience while bots get blocked.
6. Compliance & privacy wins- Especially important with GDPR, CCPA, and rising privacy regulations.

Traditional solutions like Google reCAPTCHA v3 track users across the web and this, of course, feels very invasive. Cloudflare Turnstile is better but still this is a third-party solution.

In comes ALTCHA, as the name suggests, an alternate version of Captcha, which solves all of this: it’s open-source, zero-tracking, cookie-free, and runs entirely on your servers.

Why ALTCHA Is the Best Choice Right Now

• Privacy-first- No data leaves your infrastructure.
• Self-hosted & free- Unlimited usage, no monthly limits.
• Lightweight- Tiny bundle, no performance hit.
• Accessible- Web Content Accessible Guideline (WCAG) compliant, works with screen readers.
• Modern proof-of-work- Users barely notice it (most challenges solve in the background).
• Official Angular support- There’s even an official starter repo.

Ready? Let’s build it.

Step One: TypeScript Backend (Node.js + Express)

We’ll use the official altcha-lib package — it handles everything securely.

1. Install dependencies

npm install express altcha-lib
npm install -D typescript ts-node @types/express @types/node

2. Create src/server.ts

import express from ‘express’;
import { createChallenge, verifySolution } from ‘altcha-lib’;
import dotenv from ‘dotenv’;

dotenv.config();
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

const HMAC_KEY = process.env.ALTCHA_HMAC_KEY!; // Set this in .env - make it long & random!

// ==================== GET CHALLENGE ENDPOINT ====================
app.get('/api/altcha-challenge', async (req, res) => {
 const challenge = await createChallenge({
 hmacKey: HMAC_KEY,
 maxNumber: 100_000, // Adjust based on desired difficulty
 expires: new Date(Date.now() + 10 * 60 * 1000), // 10-minute expiry
 });
res.json(challenge); // This is exactly what the widget expects
});

// ==================== FORM SUBMISSION + VERIFICATION ====================
app.post('/api/submit', async (req, res) => {
 const altchaPayload = req.body.altcha; // The widget sends this automatically
if (!altchaPayload) {
 return res.status(400).json({ error: 'ALTCHA payload missing' });
 }
const verified = await verifySolution(altchaPayload, HMAC_KEY);
if (!verified) {
 return res.status(400).json({ error: 'Invalid ALTCHA - bot detected' });
 }
// Safe to process the form now
 console.log('Real human submission:', req.body);
 res.json({ success: true, message: 'Form submitted successfully!' });
});

app.listen(3000, () => {
 console.log('🚀 Server running on http://localhost:3000');
});

Add to your .env:

ALTCHA_HMAC_KEY=your-super-secret-long-random-key-here-2026-change-me!!!

Run with:

npx ts-node src/server.ts

Your challenge endpoint is now live at:

[http://localhost:3000/api/altcha-challenge](http://localhost:3000/api/altcha-challenge`)

Goes without saying, host this somewhere you may want to use it.

Step 2: Angular Frontend Integration

1. Install the widget

npm install altcha

2. Import it (in main.ts or your component)

import ‘altcha’; // This registers the <altcha-widget> custom element

3. Create a contact form component

// contact-form.component.ts
import { Component } from ‘@angular/core’;
import { FormsModule } from ‘@angular/forms’;

@Component({
 selector: 'app-contact-form',
 standalone: true,
 imports: [FormsModule],
 template: `
 <form (ngSubmit)="onSubmit()" #form="ngForm">
 <input type="text" name="name" ngModel placeholder="Your Name" required />
 <input type="email" name="email" ngModel placeholder="Your Email" required />
 <textarea name="message" ngModel placeholder="Your Message" required></textarea>
<! - ALTCHA Widget →
 <altcha-widget
 challengeurl="http://localhost:3000/api/altcha-challenge"
 floating
 hidelogo
 ></altcha-widget>
<button type="submit" [disabled]="!form.valid">Send Message</button>
 </form>`
})

export class ContactFormComponent {
 onSubmit() {
 // The form will POST automatically with the 'altcha' field included
 // In a real app, use HttpClient to send to your /api/submit endpoint
 console.log('Form ready - ALTCHA already verified on backend!');
 }
}

That’s it! The widget automatically:

• Fetches a fresh challenge
• Solves it in the background
• Adds a hidden altcha field to your form

Step 3: Production Tips & Best Practices

• Use HTTPS in production
• Rotate your ALTCHA_HMAC_KEY periodically
• Add rate limiting on the challenge endpoint
• Enable debug attribute during development: <altcha-widget debug …>
• For even stronger protection, enable ALTCHA Sentinel (official spam filter add-on)
• Customize appearance with CSS variables (.altcha-* classes)

Final Thoughts

Adding CAPTCHA isn’t just a technical checkbox , it’s a business decision that protects your time, data, reputation, and bottom line.

With ALTCHA you get enterprise-grade protection without the privacy nightmare of Google or the complexity of older systems.

You now have a complete, production-ready implementation for Angular + TypeScript backend.

Ready to implement?

Star the official repos:

• https://github.com/altcha-org/altcha-lib
• https://github.com/altcha-org/altcha-starter-angular

Protect your forms. Respect your users. Use ALTCHA.

Again, the reason I am writing this is to remind me how to use it in the future. Instead of writing notes and store it elsewhere, I thought this might be helpful to you too.

Selamat Mengaturcara!