Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-google-invisible-recaptcha

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-google-invisible-recaptcha

A React component which is simply interested in Google invisible reCaptcha.

  • 0.2.12
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
7.2K
increased by23.26%
Maintainers
1
Weekly downloads
 
Created
Source

Migration from 0.x to 1.0.0

Version 1.0.0 is going to have breaking changes in the API:

// Version 0.x
<Recaptcha ref={ref => this.recaptcha = ref} ... />
// this.recaptcha.execute invokes the reCAPTCHA check.

// Version 1.0.0
const refCaptcha = React.useRef(null) // or React.createRef().
<Recaptcha ref={refRecaptcha} ... />
// refRecaptcha.current.callbacks.execute invokes the reCAPTCHA check.
//             ^^^^^^^^^^^^^^^^^^

It will support React hooks and Typescript out of the box. Navigate to the versions page for the release candidates, say 1.0.0-rc.2, and install by

npm i react-google-invisible-recaptcha@1.0.0-rc.2

react-google-invisible-recaptcha

A React component which is simply interested in Google invisible reCAPTCHA.

  • Support multiple reCAPTCHA widgets on one page.
  • Vanilla JS.

Demo

Type something in an input box and click the button to submit data. The value is then checked to make up example client-side validation. Only valid input triggers reCAPTCHA. Since the reCAPTCHA is invisible, it proceeds most likely as if none is attached. You will only be present the figure of the reCAPTCHA when Google hesitates to tell your identity.

When reCAPTCHA is resolved, the demo page shows the result token for demo purpose. In a real application, it should be used with a HTTP request targeting at https://www.google.com/recaptcha/api/siteverify?secret=<secret>&response=<token> on the server to validate the reCAPTCHA result before any sensitive operation is performed. Checking input values derived from clients on the server imporves security as well.

Example

Below is a component which coordinates the procedure.

class Example extends React.Component {
  constructor( props ) {
    super( props );
    this.state = { value: '' };
    this.onSubmit = this.onSubmit.bind( this );
    this.onResolved = this.onResolved.bind( this );
  }
  render() {
    return (
      <div>
        <input
          type="text"
          value={ this.state.value }
          onChange={ event => this.setState( { value: event.target.value } ) } />
        <button onClick={ this.onSubmit }>Submit</button>
        <Recaptcha
          ref={ ref => this.recaptcha = ref }
          sitekey="<sitekey>"
          onResolved={ this.onResolved } />
      </div>
    );
  }
  onSubmit() {
    if ( '' == this.state.value ) {
      alert( 'Validation failed! Input cannot be empty.' );
      this.recaptcha.reset();
    } else {
      this.recaptcha.execute();
    }
  }
  onResolved() {
    alert( 'Recaptcha resolved with response: ' + this.recaptcha.getResponse() );
  }
}

Install

npm install react-google-invisible-recaptcha --save

Usage

import Recaptcha from 'react-google-invisible-recaptcha';

<Recaptcha
  ref={ ref => this.recaptcha = ref }
  sitekey={ <sitekey> }
  onResolved={ () => console.log( 'Human detected.' ) } />

Configuration

Set required props to get going.

  • sitekey: sitekey for your recaptcha. Required.

A few optional props you can tweak.

  • badge: bottomright, bottomleft, or inline. Default: bottomright.
  • locale: in which language it speaks. Default: en.
  • nonce: nonce included in the reCAPTCHA script tag. Default: undefined.
  • onResolved: callback when the recaptcha is resolved. Default: noop.
  • onError: callback when the recaptcha encounters an error. Default: noop.
  • onExpired: callback when the recaptcha response expires. Default: noop.
  • onLoaded: callback when the recaptcha is loaded. Default: noop.
  • style: custom CSS applied to the root node. Default: undefined.
  • tabindex: tabindex of the challenge. Default: 0.

APIs

<Recaptcha ref={ ref => this.recaptcha = ref } ... />
  • this.recaptcha.execute function which invokes the reCAPTCHA check.
  • this.recaptcha.reset function which resets the reCAPTCHA widget.
  • this.recaptcha.getResponse function which returns the response token.

License

MIT. See LICENSE.md for details.

Keywords

FAQs

Package last updated on 19 Sep 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc