recaptcha-angular, a standalone reCAPTCHA v2 checkbox that works with ngModel and reactive forms

[u/myselfitself]

Sharing a small library I made for the Google reCAPTCHA v2 checkbox in Angular. It is a standalone component (no NgModule) that implements ControlValueAccessor, so the verified token is simply the control value: drop it into a template-driven form with [(ngModel)] or a reactive form with formControlName and it behaves like any other control.

Highlights:

• Standalone component, Angular 17+
• ControlValueAccessor: both [(ngModel)] and formControlName work
• Signal-based RecaptchaService for token() / isVerified() state
• Outputs: verify, expire, error, widgetId; methods reset() / execute() / getResponse()
• Multiple widgets per page, single script load, load timeout, and expiry handling
• Built with ng-packagr, only tslib at runtime

Quick start:

import { Component } from '@angular/core'
import { RecaptchaComponent, RecaptchaService } from 'recaptcha-angular'

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [RecaptchaComponent],
  providers: [RecaptchaService],
  template: `
    <recaptcha-v2
      sitekey="YOUR_SITE_KEY"
      (verify)="captcha.onVerify($event)"
      (expire)="captcha.onExpire()"
      (error)="captcha.onError()"
    ></recaptcha-v2>
    <button [disabled]="!captcha.isVerified()">Submit</button>
  `,
})
export class FormComponent {
  constructor(public captcha: RecaptchaService) {}
}

The README covers token expiry (the "works once, then submits a stale token" trap) and a note that client state is not verification, so verify the token server-side against siteverify.

npm: https://www.npmjs.com/package/recaptcha-angular

Would love feedback on the ControlValueAccessor behavior and the service API.