@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.