Implementing Invisible reCAPTCHA with Redux Form

Question

I am trying to implement Invisible reCAPTCHA with React and Redux Form. In general, the Invisible reCAPTCHA workflow is:

1. Render the "invisible" CAPTCHA, returning its widget ID.
2. Call grecaptcha.execute with the widget's ID. If necessary, the user will be prompted to solve a challenge. The result is passed to a callback function specified when the CAPTCHA was rendered.
3. Submit the form together with the CAPTCHA result.

I've created a React component intended to be used with Redux Form's Field that renders the CAPTCHA and updates the form state after grecaptcha.execute is called:

class ReCaptcha extends React.Component {
  render() {
    return <div ref={div => this.container=div} />
  }

  componentDidMount() {
    const { input: { onChange }, sitekey } = this.props
    grecaptcha.render(this.container, {
      sitekey,
      size: "invisible",
      callback: onChange
    })
  }
}

However, I don't know how or where to call grecaptcha.execute together with the widget ID upon form submission by the user. I cannot call it in onSubmit because the widget ID isn't accessible there. I could call it in ReCaptcha immediately after rendering the CAPTCHA, but if a user needs to solve the CAPTCHA he'll be prompted to do so as soon as the form has rendered.

This minimal working example shows what I have achieved so far.

Answer 1

Use the onSubmit prop to call grecaptcha.execute(), and point the data-callback to the 'real' onSubmit function.

let refToMyWidget;
const { handleSubmit } = this.props;

componentDidMount() {
  if (window.grecaptcha) {
    refToMyWidget = window.grecaptcha.render(this.container, {
      sitekey: "xxxx",
      size: "invisible",
      callback: handleSubmit(this.actuallySubmit)
    })
  }
}

preSubmit() {
  if(!window.grecaptcha) {
    return;
  }
  window.grecaptcha.execute(this.refToMyWidget)
}

actuallySubmit() {
  // submission logic here
}

render() {
  return (
    <form onSubmit={handleSubmit(this.preSubmit)}>
        <Field name="foo" component="input" />
        <button>Submit</button>
    </form>
  )
}

N.b. I haven't tested this code but it should be more or less right. If you run into trouble with loading grecaptcha into the page/form, I found this code very helpful.