Normally Pleasant Mixture

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    Library to integrate Recaptcha v3 with Angular

    npm version npm bundle size Depfu

    Google reCaptcha v3 service implementation for Angular 12 and beyond.


    StackBlitz live example.


    npm install --save @alekremi/ngx-recaptcha-v3


    Import NgxRecaptchaV3Module to Angular AppModule.

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
    import { NgxRecaptchaV3Module } from '@alekremi/ngx-recaptcha-v3';
    import { AppComponent } from './app.component';
      imports: [BrowserModule, HttpClientModule, HttpClientXsrfModule, NgxRecaptchaV3Module],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
    export class AppModule {}

    Jnject NgxRecaptchaV3Service in your component / service and then use execute method with your action. Once you have the token, you need to verify it on your backend to get meaningful results.

    For example if your external LoginService looks like:

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { User } from './user';
    export class LoginService {
      constructor(private httpClient: HttpClient) {}
      login(username: string, password: string): Observable<User> {
        return<User>('', { username, password });

    then NgxRecaptchaV3Service using:

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { User } from './user';
    import { NgxRecaptchaV3Service } from '@alekremi/ngx-recaptcha-v3';
    export class LoginService {
      constructor(private httpClient: HttpClient, private recaptchaV3Service: NgxRecaptchaV3Service) {}
      login(username: string, password: string): Observable<User> {
        return this.recaptchaV3Service
          .execute(RECAPTCHA_SITE_KEY, 'login')
          .pipe(mergeMap((token) =><User>('', { username, password, token })));

    Advanced usage

    Additionaly you can provide NgxRecaptchaOptions:

    Option Optional Description
    language Yes reCaptcha language (badge, errors and etc.)
    badgeHidden Yes provide if you want execute reCaptcha action with hidden badge

    Execute action with provided language:

    reCaptcha supported languages:

    this.recaptchaV3Service.execute(RECAPTCHA_SITE_KEY, 'login', { language: 'de' });

    Execute action with hidden badge:

    this.recaptchaV3Service.execute(RECAPTCHA_SITE_KEY, 'login', { badgeHidden: true });

    Note: You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:

    This site is protected by reCAPTCHA and the Google
        <a href="">Privacy Policy</a> and
        <a href="">Terms of Service</a> apply.

    For more info see FAQ:

    Unload reCaptcha manually:


    This method will remove recaptcha badge and scripts.


    npm i @alekremi/ngx-recaptcha-v3

    DownloadsWeekly Downloads






    Unpacked Size

    58.8 kB

    Total Files


    Last publish


    • alekremi