@captchafox/angular

@captchafox/angular

Installation

Install the library using your prefered package manager

npm install @captchafox/angular

yarn add @captchafox/angular

pnpm add @captchafox/angular

bun add @captchafox/angular

Usage

Importing the Module

Add the CaptchaFoxModule to your app's imports and initialize it.

You can choose between using a global config for the whole app or specifing the config manually on each component.

import { CaptchaFoxModule } from '@captchafox/angular';

@NgModule({
  imports: [
    CaptchaFoxModule.forRoot({
      siteKey: '<YOUR_SITEKEY>'
    })
  ]
})
export class AppModule {}

Standalone

In an application that uses standalone components, the setup is different.

First, add provideCaptchaFox to providers in your app.config.ts and initialize it.

You can choose between using a global config for the whole app or specifing the config manually on each component.

import { provideCaptchaFox } from '@captchafox/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideCaptchaFox({ siteKey: '<YOUR_SITEKEY>' }),
  ],
};

Then, import the CaptchaFoxModule in your component.

import { CaptchaFoxModule } from '@captchafox/angular';

@Component({
  selector: 'example',
  standalone: true,
  imports: [CommonModule, CaptchaFoxModule],
  ...
})
export class ExampleComponent {
}

Using the component

After the setup, you can use the ngx-captchafox component inside your template:

<ngx-captchafox
  (verify)="onVerify($event)"
  (error)="onError($event)"
  (expire)="onExpire($event)"
></ngx-captchafox>

Inputs

Name	Type	Description
siteKey	string	The site key for the widget.
lang	string	The language the widget should display. Defaults to automatically detecting it.
mode	inline|popup|hidden	The mode the widget should be displayed in.
theme	light | dark | ThemeDefinition	The theme of the widget. Defaults to light.
nonce	string	Randomly generated nonce.
i18n	object	Custom i18n configuration.

Outputs

Name	Type	Description
verify	function	Called with the response token after successful verification.
fail	function	Called after unsuccessful verification.
error	function	Called when an error occured.
expire	function	Called when the challenge expires.
close	function	Called when the challenge was closed.
load	function	Called when the widget is ready.

Using the verify event

<ngx-captchafox (verify)="onVerify($event)"></ngx-captchafox>

@Component({...})
export class YourComponent {
  onVerify(token: string) {
    // verify the token on the server / submit your form with it
  }
}

Using reactive forms

<form [formGroup]="yourForm" (ngSubmit)="onSubmit()">
  <ngx-captchafox formControlName="captchaToken" />
  ...
</form>

@Component({...})
export class YourComponent {
    public yourForm = new FormGroup({
        captchaToken: new FormControl(null, Validators.required),
        ...
    });

    public onSubmit() {
        // send an API request to your server using the form values
        console.log(this.yourForm.value.captchaToken);
        this.loginForm.reset();
    }
}

You can find more detailed examples in the GitHub repository.