Google reCAPTCHA JavaScript Library

The Google reCAPTCHA JavaScript third party library allows you to easily integrate the reCAPTCHA service into your web application. With reCAPTCHA, you can protect your site from spam and abuse while allowing real users to pass through with ease.

Installation

To include the reCAPTCHA library in your project, execute below npm install command

npm install recaptcha-lib 

Usage

API key generation

1. Visit the Google reCAPTCHA website and click on the "Admin console" button in the top right corner.
2. Sign in with your Google account and click on the "+" button to create a new site.
3. Enter a label for your site, select the type of reCAPTCHA you want to use, and enter the domain(s) where you will be using the reCAPTCHA.
4. Accept the terms of service and click on the "Submit" button.
5. You will be given a site key and a secret key. These keys will be used to integrate reCAPTCHA into your application.

Frontend integration

Example - reCAPTCHA integration with button click event

import React, { useEffect } from 'react';
import { recaptcha } from 'recaptcha-lib';
import axios from 'axios';

function App() {
    
    useEffect(() => {
        recaptcha.initiate('<SITE-KEY>');
    }, []);
            
    const submit = () => {
        recaptcha.execute((token) => {
            // Backend call for token verification
            // token should be send as a header value
            axios.get('<SERVER-TOKEN-VALIDATION-ENDPOINT>', {
                headers: {
                    "X-recaptcha-token": token
                }
            })
            .then(response => {
                // handle success
            })
            .catch(error => {
                // handle error
            });
        })};

    return (
        <div>
            <button
                onClick={submit}>
                submit
            </button>
        </div>
    );
}
                
export default App;

Server side integration

Example - Server side reCAPTCHA token validation endpoint implementation

const { recaptcha } = require('recaptcha-lib/server')

app.get('/', (req, res) => {
    
    const token = req.get('X-recaptcha-token');
    const secret = '<SECRET-KEY>';
    
    recaptcha.validateToken(token, secret).then(function (response) {
        // handle success and failure based on response received
        
    });
})

Token verification response format

{
  "success": true|false,
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional
}