jsardev / reaptcha Goto Github PK
View Code? Open in Web Editor NEWGoogle reCAPTCHA v2 for React
Home Page: https://sarneeh.github.io/reaptcha
License: MIT License
Google reCAPTCHA v2 for React
Home Page: https://sarneeh.github.io/reaptcha
License: MIT License
dependency
react was updated from 16.7.0
to 16.8.0
.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.
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
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]
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!
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.
Branch | Build failing π¨ |
---|---|
Dependency | styled-components |
Current Version | 3.4.1 |
Type | dependency |
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.
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
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:
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
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.
The new version differs by 75 commits.
74b8aac
4.29.2
e79d014
Merge pull request #8741 from webpack/deps/dev
d12ca7c
update dev deps
c28f6cb
Merge pull request #8742 from webpack/deps/schema-utils
5e3a053
upgrade schema-utils to new major
885ab81
Merge pull request #8740 from webpack/deps/update-jest
08473de
add workaround for jest bug
a994ec7
upgrade jest
8167e42
Merge pull request #8736 from webpack/deps/eslint-types
da59443
Merge pull request #8737 from webpack/deps/update-test-deps
dbc0b8d
Merge pull request #8725 from webpack/dependabot/npm_and_yarn/typescript-3.3.1
155cda7
update test cases dependencies
11bfb05
update linting dependencies
d7d9b9b
ignore typescript bug
5a6d654
Bump typescript from 3.0.0-rc to 3.3.1
There are 75 commits in total.
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
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
dependency
react was updated from 16.6.1
to 16.6.2
.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.
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
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.
append
option now supports the default placeholders in addition to [url]
"..."
when overriding options.The new version differs by 42 commits.
95d21bb
4.36.0
aa1216c
Merge pull request #9422 from webpack/feature/dot-dot-dot-merge
b3ec775
improve merging of resolve and parsing options
53a5ae2
Merge pull request #9419 from vankop/remove-valid-jsdoc-rule
ab75240
Merge pull request #9413 from webpack/dependabot/npm_and_yarn/ajv-6.10.2
0bdabf4
Merge pull request #9418 from webpack/dependabot/npm_and_yarn/eslint-plugin-jsdoc-15.5.2
f207cdc
remove valid jsdoc rule in favour of eslint-plugin-jsdoc
31333a6
chore(deps-dev): bump eslint-plugin-jsdoc from 15.3.9 to 15.5.2
036adf0
Merge pull request #9417 from webpack/dependabot/npm_and_yarn/eslint-plugin-jest-22.8.0
37d4480
Merge pull request #9411 from webpack/dependabot/npm_and_yarn/simple-git-1.121.0
ce2a183
chore(deps-dev): bump eslint-plugin-jest from 22.7.2 to 22.8.0
0beeb7e
Merge pull request #9391 from vankop/create-hash-typescript
bf1a24a
#9391 resolve super call discussion
bd7d95b
#9391 resolve discussions, AbstractMethodError
4190638
chore(deps): bump ajv from 6.10.1 to 6.10.2
There are 42 commits in total.
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
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.
The new version differs by 3 commits.
62255af
Update CHANGELOG and bump version
655eb01
Merge pull request #2320 from golopot/issue-2319
9639d82
[Fix] prop-types
: fix crash on multiple destructuring
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
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?
class-properties
babel proposallerna.json
according to current versionbabel
configs
webpack
configpackage.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>
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.
The new version differs by 10 commits.
98fa7f5
chore(release): 4.3.7
d6e86a5
Merge pull request #1063 from gaearon/babel-7
acad937
fix: babel 7 compatibility. #1043
d6853b7
chore(readme): fix #1060, fix #1044
6b80a47
Merge pull request #1058 from Laassari/patch-1
2545905
Merge pull request #1062 from gaearon/fix-red-master
a30db75
Merge pull request #1059 from mshatikhin/master
ba46aba
chore(build): fix react 16.4, #1061
80fb994
Typo in README
b9b185c
change App's path in create-react-app
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
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 ,
<script src="https://www.google.com/recaptcha/api.js" async defer></script>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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.