An easy to use component for implementing Cloudflare Turnstile in Angular.

Add this library to your Angular project using npm or yarn.

yarn add ngx-turnstile
npm install ngx-turnstile --save

To start, import the NgxTurnstileModule in your app module.

// app.module.ts
import { NgxTurnstileModule } from "ngx-turnstile";
import { BrowserModule } from "@angular/platform-browser";
import { MyApp } from "./app.component.ts";

@NgModule({
  bootstrap: [MyApp],
  declarations: [MyApp],
  imports: [BrowserModule, NgxTurnstileModule],
})
export class MyAppModule {}

After that, you are free to use the component anywhere:

// app.component.ts
import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `<ngx-turnstile [siteKey]="siteKey" (resolved)="sendCaptchaResponse($event)" theme="auto" [tabIndex]="0" id="container-turnstile"></ngx-turnstile>`,
})
export class MyApp {
  sendCaptchaResponse(captchaResponse: string) {
    console.log(`Resolved captcha with response: ${captchaResponse}`);
  }
}

Import both NgxTurnstileModule and NgxTurnstileFormsModule modules in your app module.

import { NgxTurnstileModule, NgxTurnstileFormsModule } from "ngx-turnstile";

Then import either FormsModule or ReactiveFormsModule from @angular/forms depending on the type of form you want to use.

You can then use the ngModel, formControl or formControlName directives on the component depending on which module you imported from @angular/forms.

<ngx-turnstile [siteKey]="siteKey" theme="auto" [formControl]="tokenControl" id="container-turnstile"></ngx-turnstile>

<ngx-turnstile [siteKey]="siteKey" theme="light" [(ngModel)]="token" id="container-turnstile"></ngx-turnstile>

The component is read-only, meaning that you should not update the control with a custom value. Updating the control value will reset the component

The component supports these options as input:

• siteKey
• action
• cData
• theme
• tabIndex

These options are well documented in the Cloudflare Docs. The letter cases are adapted to camelCase to facilitate easy migration from ng-recaptcha.

• resolved(response: string). Occurs when the CAPTCHA resolution value changed.

window.turnstile.reset("#container-turnstile");

window.turnstile.remove("#container-turnstile");

For those who prefer examples over documentation, simply clone the repository and run

$ yarn install
$ ng build ngx-turnstile
$ ng serve ngx-turnstile-demo