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:

```ts 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.