How to reset Google recaptcha with react-google-recaptcha

InquisitiveGirl

Looks like the google recaptcha works in such a way that if a verification attempt has been made with a particular token, it cannot be used again.

Docs states that "you will need to call grecaptcha.reset() to ask the end user to verify with reCAPTCHA again"

I'm trying to attempt this using the react-google-recaptcha npm package.

Here is my code:

function onChange(grecaptcha) {
  console.log(grecaptcha);
  grecaptcha.reset(); // this doesn't work
}

class Captcha extends React.Component {
  render() {
    return <div>
      <Recaptcha
          sitekey='#'
          onChange={onChange(this)}
      /> </div> 
  }
}

When I tried to do the server side validations using the google api https://www.google.com/recaptcha/api/siteverify with response and secret value, the success response always evaluates to "false" after the first validation. To prevent this I'm resetting the grecaptcha as suggested in the docs but it doesn't work.

Anything that I'm missing?

Thanks in advance

EDIT:

https://github.com/dozoisch/react-google-recaptcha offers the reset() utility function which is what I'm trying to call after the user solves the captcha, wondering if I'm not calling it the right way.

sarneeh

You can try Reaptcha.

It has more of a react-way approach in dealing with the reCAPTCHA than react-google-recaptcha.

Quoting the documentation:

<Reaptcha
  ref={e => (this.captcha = e)}
  sitekey="YOUR_API_KEY"
  onVerify={() => {
    // Do something
  }}
/>
<button onClick={this.captcha.reset}>
  Reset
</button>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related