gl-recaptcha

Lightweight Angular wrapper for Google reCAPTCHA v3
Designed for clean, secure, and scalable integrations in modern Angular applications.

✨ Features

• Minimalistic implementation with zero external dependencies.
• recaptchaAction directive to trigger v3 actions from any UI element.
• Centralized service for programmatic execution of reCAPTCHA.
• Fully compatible with Angular Material, Reactive Forms, and authentication flows.
• Automatically loads the Google script only when required.
• Built for clean, decoupled architectures and enterprise-grade applications.

🚀 Installation

npm install gl-recaptcha

🧩 Setup

Import the module in your root module and provide your reCAPTCHA v3 site key:

import { RecaptchaModule } from 'gl-recaptcha';

@NgModule({
  imports: [
    RecaptchaModule.forRoot('YOUR_SITE_KEY_V3')
  ]
})
export class AppModule {}

🎯 Basic Usage

Direcive: recaptchaAction

<button recaptchaAction="login" (token)="onToken($event)">
  Submit
</button>

Component Action

   onToken(token: string) {
      console.log('Generated token:', token);
   }

🧱 Example with Reactive Forms

Template

<form [formGroup]="form">
  <button 
    type="button"
    recaptchaAction="login"
    (token)="onToken($event)">
    Login
  </button>
</form>

Component

form = this.fb.group({
  email: [''],
  password: [''],
  recaptchaToken: ['']
});

onToken(token: string) {
  this.form.patchValue({ recaptchaToken: token });
  this.submit();
}

🔐 Backend Validation

Send the token to your backend and validate it with Google:

POST https://www.google.com/recaptcha/api/siteverify
  ?secret=SECRET_KEY
  &response=TOKEN

📦 Public API Directive: recaptchaAction

• Attribute: recaptchaAction="actionName"
• Event: (token)="handler($event)" Service: RecaptchaService
• execute(action: string): Promise Executes reCAPTCHA v3 and returns a token.

🛠 Requirements

• Angular 16+
• Valid reCAPTCHA v3 site key
• Domain authorized in Google reCAPTCHA Admin Console

📝 License MIT — created by Andrés Mariño, Solution Architect.

💬 Support For issues, feature requests, or contributions, please open an issue in the repository or contact the author.