How to reset Google recaptcha with react-google-recaptcha

Question

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.

score 14 · Answer 1 · answered Nov 06 '17 at 00:27

14

I was having a similar issue, and had to change it to:

window.grecaptcha.reset();

answered Nov 06 '17 at 00:27

Skäggiga Mannen

984
7
16

score 8 · Accepted Answer · answered Jun 13 '18 at 22:01

8

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>

answered Jun 13 '18 at 22:01

sarneeh

1,320
1
12
27

after implementing this recaptcha admin console is still blank, is there anything else to be done? – mehul9595 Jan 12 '21 at 05:16
@mehul9595 I don't understand your question. What do you want to see in the admin console? – sarneeh Jan 13 '21 at 07:52
I believe reCaptcha's admin console will show some traffic for completed/failed verifications. – mehul9595 Jan 14 '21 at 02:33
@mehul9595 I doubt that the recaptcha admin data is "live" - you'll probably see data after some delay. But anyways - it doesn't really matter if you see that it's working. – sarneeh Jan 15 '21 at 07:46

score 4 · Answer 3 · answered Oct 22 '19 at 18:40

Well, this is just a bonus or a more elaborate way of all the above. I am using react-google-recaptcha so this is reactJS and not until I saw this that I found a way to solve the reset issue. It's rather straight forward. Am just explaining to mostly newbies like I think I am on how to do it just as pointed out by @sarneeh, @Chris and @AdityaSrivast

Here's my code snippet.

Captcha.js

import React from "react";
import ReCAPTCHA from "react-google-recaptcha";


const CaptchaVerify = ({yourprops}) => {

 let captcha;

 const onChange = (value) => {
    console.log(value);      
 }

 const setCaptchaRef = (ref) => {
    if (ref) {
      return captcha = ref;
    }
 };

 const resetCaptcha = () => {
   // maybe set it till after is submitted
   captcha.reset();
 }

 return (
   <ReCAPTCHA
     ref={(r) => setCaptchaRef(r) }
     sitekey={process.env.REACT_APP_V2_CAPTCHA_SITE_KEY}
     onChange={onChange, () => resetCaptcha()}
     theme="light"
   />
  )
 };

export default CaptchaVerify;

score 3 · Answer 4 · answered Jul 01 '18 at 12:45

3

First set up a suitably scoped variable for the element, then assign it using the ref callback:

let captcha;

<Recaptcha
  sitekey={sitekey}
  onChange={...}
  ref={el => { captcha = el; }}
/>

Then you're able to access the reset function by calling captcha.reset() when you need it (e.g. callback after successful message sent, registering etc.). Hope that helps.

answered Jul 01 '18 at 12:45

Chris

114
1
7

that is the way to go if you do not want to switch to another lirary – Christophe Blin Sep 21 '18 at 08:48

score 1 · Answer 5 · answered Dec 08 '18 at 06:35

google-react-recaptcha follows the syntax:

<ReCAPTCHA
    sitekey="Your client site key"
    onChange={onChange}
/>

You can reset by using reset() component instance. To access it you will need a ref.

Proceed like this:

<ReCAPTCHA
    ref={(r) => this.captcha = r}
    sitekey="Your client site key"
    onChange={onChange}
/>

Now whenever you want to reset the recaptcha, type in:

this.captcha.reset()

and you will be done.

Ideally, one should do it after the form submission, once you have got the response.

score 1 · Answer 6 · answered Jan 31 '21 at 16:38

1

Solution with functional component and createRef:

In function body:

  const recaptchaRef = React.createRef();

In JSX:

  <ReCAPTCHA
            ref={recaptchaRef}
            name="recaptcha"
            id="recaptcha"
            sitekey="...."
            onChange={(token)=>{console.log(token);}}
            onExpired={() => {
              recaptchaRef.current.reset(); // here
            }}
            theme="light"
          />

answered Jan 31 '21 at 16:38

Tudor Morar

3,720
2
27
25

1

For TS users: `const recaptchaRef = React.createRef();` – ale917k Nov 02 '21 at 13:48

score 1 · Answer 7 · answered Jan 06 '22 at 20:41

In TypeScript you can do it like this:

const recaptchaRef = useRef<ReCAPTCHA>(null);
/* make sure it is null at first */

Then:

<ReCAPTCHA
  ref={recaptchaRef}
  sitekey={'key'}
  onChange={(e) => onCaptchaVerify(`${e}`)}
/>;

Then you can use like this after the form submission or where you want to reset the reCaptcha:

  recaptchaRef.current?.reset();

How to reset Google recaptcha with react-google-recaptcha

7 Answers7

Linked