There have been updates to the react monorepo:

• • The dependency react was updated from 16.7.0 to 16.8.0.

• The dependency react-dom was updated from 16.7.0 to 16.8.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

Using reaptcha to display Google's Recaptcha, you can see the following error in the console:

A cookie associated with a cross-site resource at https://google.com/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

The reaptcha presence at npmjs.com looks a little bit barren to me. There is no link to the github repo and no working Readme.

This initially raised some flags when I was looking for a suitable reCAPTCHA package, so you might want to consider to add some details to https://www.npmjs.com/package/reaptcha

Is getResponse really released in [email protected]?
Cause if I wanna use it, I get:

TypeError: this.captchaRef.getResponse is not a function

npm ls reaptcha
@axa-ch/[email protected] ...\projects\aletheia
`-- [email protected]

https://unpkg.com/[email protected]/dist/index.js

Hi @sarneeh, firstly I'd like to thank you for implementing reaptcha, it works great and is a true pleasure to use.

Not sure if it's an issue however, is there a reason why dark mode is not accessible when using Invisible variant of the ReCaptcha? Is it just an oversight?

https://github.com/sarneeh/reaptcha/blob/3ac319111e08fd0fc75e36d8275289fa78c5c2f6/lib/index.js#L144

Thanks,
Tom

I just wanted to say thank you for this library! I'm doing a Gatsby site and was super stuck using react-recaptcha because it wouldn't reset correctly and would only work on a single page load.

I ended up finding you on another library's issue! appleboy/react-recaptcha#228 (comment)

However, I had a hard time finding you with just a search... I'm not sure how to get your SEO out there, but I did give you a tweet shout out :)

Thanks again!

• change required yes/no in API documentation table to emojis

The repo description mentions v2 but isn't this compatible with v3 reCaptcha actually?

I have this loading inside a component that may be reloaded as part of a multi-step form process.

Upon reloading, as expected, it reloads Googles Recaptcha, and what we see are multiple 'bframes'.

I'm not sure if this would eventually lead to a memory leak (in extreme cases) but is there a way to clean this up a bit if the Recaptcha was no longer needed?

https://sarneeh.github.io/reaptcha/

Page doesn't seem to be working at the moment.

Version 3.4.2 of styled-components was just published.

This version is covered by your current version range and after updating it in your project the build failed.

styled-components is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

Need to validate the response from Recaptcha API.

Right now Reaptcha has its state in class fields. It would be more React-way if it would be hold in the component state.

<Reaptcha theme="dark"> </Reaptcha>

I have a form, which should disable all fields during submission.
But I can't update className prop.

render() {
    const {
      meta: { submitting },
    } = this.props;

    return (
      <Reaptcha
        className={classnames('m-aletheia-captcha', {
          'm-aletheia-captcha--disabled': submitting,
        })}
     />
  }

When I am leaving the page with reCAPTCHA displayed, the following errors are logged to console.
Edge 18.

reacaptcha__cs.js
Unable to get property 'create' of undefined or null reference

anchor
'recaptcha' is not defined

SCRIPT5007: SCRIPT5007: Object expected

They do not have negative effect to reCAPTCHA function but are logged to bugsnag every time as they are related to my page.

After a while google chrome gives a warning: "SameSite" attribute must be either lax,none etc. also "Secure" attribute must be sent by cookie.
Anyone get these warnings?

Please allow arbitrary data attributes to be passed through to the iframe.

For example I use 'data-cy` to tag elements that I want to use in my Cypress tests. There is currently no way for me to tag the reaptcha iframe with an attribute.

Like in the title :) So there won't be any need to point code style mismatch in code reviews.

This component doesn't work with IE yet, it throws SCRIPT438: Object doesn't support property or method 'from' error.

Repro steps:

1. Open any IE browser, go to the demo page : https://sarneeh.github.io/reaptcha/
2. Page appears to be blank
3. Open the console it shows Object doesn't support property or method 'from':
   

If invisible mode can't auto-detect a human, it asks for a challenge like checkbox, selecting images, etc.
The user can close this overlay by clicking outside, but there is no way to handle this close by the component nor the offical Google API.

But there are some hacky ways, to poll it's state:
https://stackoverflow.com/questions/43488605/detect-when-challenge-window-is-closed-for-google-recaptcha

https://caniuse.com/#feat=mutationobserver

The devDependency webpack was updated from 4.29.1 to 4.29.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Every time a component containing <Reaptcha /> is unmounted I get (in 5–10 sec) that annoying error in recaptcha__en.js:105. Handlers onError and onExpire are not called. I tried to call reset and _stopTimer in componentWillUnmount but it didn't help.

I use invisible Recaptcha v2. Actually, when component with <Reaptcha /> is mounted again after the error, Recaptcha works without problems. So the only problem is that error falling to console and error tracking service.

I also tried several solutions (e.g. clearing cookies) but no one worked.

Is there any way to avoid it?

I want the key that generated to be sent to the backend so that I can verify it. Where I can Receive the key?

I get this error when I refresh my page which has Reaptcha component. Here is my code snippet. I confirmed that sitekey is being passed correctly to the component when I refresh the page.

                <Reaptcha style={{ margin: "20px" }}
                    ref={e => this.recaptchaInstance = e}
                    sitekey={process.env.REACT_APP_CAPTCHA_SITEKEY}
                    onLoad={() => { }}
                    onVerify={this.captchaCallback}
                    onExpire={this.captchaExpiredCallback}
                />

It's not being used too much. Can be deleted.

I'm curious if it's possible to handle this situation in Reaptcha: https://developers.google.com/recaptcha/docs/invisible#auto_render

I'll keep this issue to roam around with it a little bit in the free time. 💃

So i have implemented the Reapcha successfully. was wondering how can i mock google reCaptcha? My testing tools are
Jest,Enzyme

There have been updates to the react monorepo:

• • The dependency react was updated from 16.6.1 to 16.6.2.

• The dependency react-dom was updated from 16.6.1 to 16.6.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

The devDependency webpack was updated from 4.35.3 to 4.36.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

The devDependency eslint-plugin-react was updated from 7.14.0 to 7.14.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

const [email, setEmail] = useState('')

const onVerify = response => {
  console.log(email) ??
}

Email does not update state to the latest.
when I set email state to 'xxx' (setEmail('xxx'))

but outside onVerify function can access email state
console.log(email) // 'xxx'

Can I use reapctcha with hook component?

• get rid of class-properties babel proposal
• update lerna.json according to current version
• separate babel configs
  • example: inline config in webpack config
  • ava: inline config in package.json (after resolution of this issue)

In the readme, it is stated: If you have an idea how to do this better, feel free to file an issue to discuss it!

It can be done easily with render prop pattern.

Instead of doing:

render = () => {
  return (
    <div id={this.props.id} className={this.props.className} ref={e => (this.container = e)} />
  );
};

We could do:

render = () => {
  const component = (
    <div id={this.props.id} className={this.props.className} ref={e => (this.container = e)} />
  );

  return this.props.children
    ? this.props.children({
      renderExplicitly: this.renderExplicitly,
      reset: this.reset,
      execute: this.execute,
      recaptchaComponent: component,
    })
  : component;
};

And then the component could be used like:

<Reaptcha
  sitekey={key}
  onLoad={onLoad}
  onVerify={onVerify}
  onExpire={onExpire}
  explicit
>
  {({ renderExplicitly, reset, execute, recaptchaComponent }) => (
    <div>
      {recaptchaComponent}
      <button onClick={reset}>Reset</button>
    </div>
  )}
</Reaptcha>

The devDependency react-hot-loader was updated from 4.3.6 to 4.3.7.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-hot-loader is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

• try to get to 100% coverage

This assumes that window exists and so breaks when you try and render the component on the server side (to be later rehydrated on the client side). react-recpatcha doesn't have this issue (but does have others) so I was hoping to try and use this as an almost drop in replacement, but this is preventing that!

Hi
How can I choose the language in recaptcha??

hi
I get this error

Uncaught Error: Missing required parameters: sitekey
at new zr (recaptcha__en.js:392)
at new es (recaptcha__en.js:400)
at ss (recaptcha__en.js:411)
at recaptcha__en.js:412
at Array.forEach ()
at ts (recaptcha__en.js:412)
at bs (recaptcha__en.js:417)
at cs (recaptcha__en.js:400)
at recaptcha__en.js:419
at recaptcha__en.js:429

but I entered sitekey and it works

I am using this module with Nextjs (ssr) and it is the only one that works well. Thanks for that!

I'm combining it with Formik, and I'm needing the grecaptcha.getResponse() method, because the onVerify callback does not fit my need.

Is there any technical reason why it is not implemented?

I've read articles about Rollup and how it creates smaller bundles than Webpack. I'd like to give it a try and check out what would be the differences comparing to the current approach.

Hi,
Iam getting "Missing required parameters: sitekey" error when i try to load Google recaptcha V2.
Am passing siteKey value from a service response in typescript.. Please help me resolve this issue.
My HTML Code,
<re-captcha (resolved)="resolved($event)" [siteKey] = "siteKeyVal" formControlName="recaptchareactive">

Typescript code:
this.authService.getpropertyvalue('RECAPTCHA_PUBLIC_KEY').subscribe(
result => {
this.siteKeyVal = result;

});

Added this script in index.html ,

For performance and stuff (?) ideally as an optional prop

After successful reaptcha verification onverify callback is not getting called.

Hello there,

First, thanks for the library !

I have a question about hl and theme props:
The user of my app can change the theme or the lang of the app dynamically so I would like the reCaptcha to change according to his choice.
But when I receive the props (let's say about the lang, it's the same process) in my component, and call recaptchaRef.reset(), the reCaptcha lang is still the same..

Am I doing something wrong ?

Thanks,
Alexandre