@carfromjapan/turbo-web-recaptcha v1.0.4-legacy

CAR FROM JAPAN Google ReCaptcha for React

A lightweight and powerful package to easily integrate Google ReCaptcha into your website or application.

Install

Install with npm or yarn

$ npm i @carfromjapan/turbo-web-recaptcha
# or
$ yarn add @carfromjapan/turbo-web-recaptcha

# for legacy
$ npm i @carfromjapan/turbo-web-recaptcha@1.0.4-legacy

Features

• Support recaptcha versions:
  • v3 - score-based validation without user interaction.
  • v2-invisible - action-based invisible ReCaptcha.
• Enterprise mode
  • Full support for enterprise
• TypeScript support out of the box
  • Fully typed API for seamless integration in TypeScript projects.
• SSR
  • Compatible with server-side rendered applications, including frameworks like Next.js.

Getting Started

V3 Integration

Google ReCaptcha v3 provides a score-based validation system without user interaction. The score allows you to take appropriate actions based on user behavior.

Here’s how to use ReCaptcha v3 in your project:

import { GoogleReCaptcha, GoogleReCaptchaRef } from '@carfromjapan/turbo-web-recaptcha';

const ReCaptchaExample = () => {
  const recaptchaRef = useRef<GoogleReCaptchaRef>(null);

  const handleVerify = async () => {
    try {
      const token = await recaptchaRef.current?.execute();
      console.log('ReCaptcha Token:', token);
      // Send the token to your server for verification
    } catch (error) {
      console.error('ReCaptcha verification failed:', error);
    }
  };

return (
    <div>
      <GoogleReCaptcha
        callback={function () {
            // TODO: implement this function
          console.log('callback')
        }}
        ref={recaptchaRef}
        siteKey="Your recaptcha sitekey"
        type="v3"
        action="inquiry"
        // for preload g-recaptcha script, default is true, currently only support for legacy version
        preload={false}
      />
      <button onClick={handleVerify}>Verify ReCaptcha</button>
    </div>
  );
};

export default ReCaptchaExample;

V2 Invisible Integration

Google ReCaptcha v2 invisible does not require users to solve any puzzles or enter any codes. Instead, it runs in the background and analyzes user behavior on the web page to determine if they are genuine users or potential bots.

import React, { useRef } from 'react';
import { GoogleReCaptcha, GoogleReCaptchaRef } from '@carfromjapan/turbo-web-recaptcha';

const ReCaptchaInvisibleExample = () => {
  const recaptchaRef = useRef<GoogleReCaptchaRef>(null);

  const handleSubmit = async () => {
    try {
      const token = await recaptchaRef.current?.execute();
      console.log('ReCaptcha Token:', token);
      // Send the token to your server for verification
    } catch (error) {
      console.error('ReCaptcha verification failed:', error);
    }
  };

  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <GoogleReCaptcha
        ref={recaptchaRef}
        siteKey="YOUR_SITE_KEY"
        type="v2-invisible"
      />
      <button onClick={handleSubmit}>Submit</button>
    </form>
  );
};

export default ReCaptchaInvisibleExample;

Advanced Features

Enterprise Mode

Enable Enterprise Mode by setting isEnterprise to true:

<GoogleReCaptcha
  siteKey="YOUR_ENTERPRISE_SITE_KEY"
  isEnterprise
  type="v3"
  action="login"
/>

Custom Callbacks

• callback: Triggered when a ReCaptcha token is successfully generated.
• errorCallback: Triggered when there’s an error during token generation.
• expiredCallback: Triggered when the ReCaptcha token expires.

<GoogleReCaptcha
  siteKey="YOUR_SITE_KEY"
  type="v2-invisible"
  callback={(token) => console.log('Token:', token)}
  errorCallback={() => console.error('ReCaptcha Error')}
  expiredCallback={() => console.warn('Token expired')}
/>

Language Support

Specify the language by passing the language prop:

<GoogleReCaptcha
  siteKey="YOUR_SITE_KEY"
  type="v3"
  language="es" // Spanish
/>

Development Notes

• Ensure you have a valid Google ReCaptcha key pair for your domain.
• For optimal performance, preload the ReCaptcha script by calling the onPreload method if supported.

License

This project is licensed under the MIT License.