Cloudflare Turnstile Component for Angular

ngx-turnstile

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

Installation

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

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

Quickstart

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"></ngx-turnstile>`,
})
export class MyApp {
  sendCaptchaResponse(captchaResponse: string) {
    console.log(`Resolved captcha with response: ${captchaResponse}`);
  }
}

Usage with @angular/forms

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.

Reactive Form Example

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

Template Driven Form Example

<ngx-turnstile [siteKey]="siteKey" theme="light" [(ngModel)]="token"></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

API

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.

Events

• resolved(response: string). Occurs when the CAPTCHA resolution value changed.
• errored(errorCode: string). Occurs when the CAPTCHA widget returned an error code.

Example

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

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