codeep / react-recaptcha-v3 Goto Github PK

Hello DEVs,

the following error occurs when trying to download the package on react 17 app,
I think it is clear what it is saying.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.6.2 || ^16.x" from [email protected]
npm ERR! node_modules/react-recaptcha-v3
npm ERR! react-recaptcha-v3@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/ibrahimabushammah/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ibrahimabushammah/.npm/_logs/2021-04-29T07_15_18_585Z-debug.log

This should be moved to componentDidMount()

I know there is the License in the packages.json but it's easier to find out if there is a LICENSE file in the repo because Github shows it then on the right panel

Use case: By using react-router, Google reCaptcha should only be active (hiding via CSS is not a solution) in certain pages by entirely loading and unloading it when needed.

Issue: when being redirected to another page with react-router, the component page unmount hook is correctly called and obviously anything added outside the root element will not be unmounted. In this case, this module adds the recaptcha script tag and the badge element to the body.

Solution without fork:

/**
 * Unload Google reCaptcha from the page
 * @param {String} recaptchaSiteKey
 */
const unload = (recaptchaSiteKey) => {
  const nodeBadge = document.querySelector('.grecaptcha-badge');
  if (nodeBadge) {
    document.body.removeChild(nodeBadge.parentNode);
  }
  
  const scriptSelector = 'script[src=\'https://www.google.com/recaptcha/api.js?render=' +
  recaptchaSiteKey + '\']';
  const script = document.querySelector(scriptSelector);
  if (script) {
    script.remove();
  }
};

Question: what do you think would be the best reactive-way to unload, maybe with a method directly available into this module ?

Package.json
"version": "1.1.0",
npm docs:
"version" : "1.0.2"

On a error on my site I would like to reset the captcha.
How can I do this?

For your v2 project I found:

const recaptchaRef: any = React.createRef();
....
recaptchaRef.reset();
....
<ReCaptcha
    ref={recaptchaRef}
    ...
/>

But that only yields a TypeError: recaptchaRef.reset is not a function.

Per your documentation:

P.S. It will open the ReCaptcha window only when there are some doubts by Google; otherwise, it will automatically generate the recaptcha token.

Are there plans to make this optional i.e. open the recaptcha window for testing purposes?

I test on Samsung Galaxy S6 and I receive the following error most of the times when I load the form page.

Uncaught TypeError: window.grecaptcha.execute is not a function

I use gatsby.js.

import {loadReCaptcha, ReCaptcha} from 'react-recaptcha-v3'

componentDidMount() {
    loadReCaptcha(captchaSiteId);
}

render() {
    <ReCaptcha
         sitekey={captchaSiteId}
         action='quoteForm'
         verifyCallback={this.onGoogleVerify}
    />
}

Does anyone experience this?

Trying to test this package, I get the error Missing required parameters: sitekey but following your example, the site key is included

App.jsx

import React, { Component } from 'react'
import { loadReCaptcha } from 'react-recaptcha-v3'
import Test from "./Test"

class App extends Component {
  componentDidMount() {
    loadReCaptcha("myRealPublicSiteKey")
  }

  render() {
    return (
      <Test />
    )
  }
}

export default App

Test.jsx

import React, { Component } from 'react'
import { ReCaptcha } from 'react-recaptcha-v3'

class Test extends Component {
  verifyCallback = (recaptchaToken) => {
    console.log(recaptchaToken, "<= your recaptcha token")
  }

  render() {
    return (
      <ReCaptcha
        sitekey="myRealPublicSiteKey"
        action='test'
        verifyCallback={this.verifyCallback}
      />
    )
  }
}

export default Test

Dependencies:
react: 16.5.2
react-dom: 16.5.2
react-recaptcha-v3: 1.0.2

Had to change import name from 'react-recaptcha-google' to 'react-recaptcha-v3'.

Hi, i have a problem with captcha expride. How to reset token?

SyntaxError: node_modules/react-recaptcha-v3/src/ReCaptcha.js: Support for the experimental syntax 'classProperties' isn't currently enabled (50:11):
48 | }
49 |

50 | execute = () => {
| ^
51 | const {
52 | sitekey,
53 | verifyCallback,

Please, check this: material-components/material-components-web-react#107

Good day, first of all thank You for recaptcha.
Is it possible to add callback function in loadReCaptcha method.
Here exemple:

const loadReCaptcha = (siteKey: string, callback?: Function): void => {
  const script = document.createElement('script');

  if (!window.onLoadCaptchaV3Callback && callback) {
    window.onLoadCaptchaV3Callback = () => {
      callback && callback();
    };
  }

  script.src = `https://www.google.com/recaptcha/api.js? 
  onload=onLoadCaptchaV3Callback&render=${siteKey}`;

  document.body.appendChild(script);
};

Thank You!

Hello!
Did anyone else get this error and was able to find a solution?
Thanks in advance!

Could not find a declaration file for module 'react-recaptcha-v3'. 'c:/ambiente-trabalho/desenvolvimento/workspaces/vscode/siev-frontend/node_modules/react-recaptcha-v3/dist/index.js' implicitly has an 'any' type.
Try npm install @types/react-recaptcha-v3 if it exists or add a new declaration (.d.ts) file containing declare module 'react-recaptcha-v3';ts(7016)

I'm having a problem with this scenario:

• Load recaptcha
• Load token <ReCaptcha ref={ref => recaptcha = ref} sitekey={siteKey} action='checkout' verifyCallback={filled}/>
• Submit form with token, captcha validation is ok but some business data are wrong => form shows errors
• User correct data and resubmit => captcha is reused

I'm having some trouble to get a new token with current interface. I'd like to use something

this.recaptcha.execute()
  .then(token => /* set new token on request */)
  .then(() => api.post(/* new data and new token*/))

or simply a new method that refresh the token with a promise something like

this.recaptcha.refresh() // verify is called again when promise is fulfilled
  .then(() => api.post(/* new data */)) // using the refreshed token

What do you think?

Hi,
Getting error during installation of this module:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.6.2 || ^16.x" from [email protected]
npm ERR! node_modules/react-recaptcha-v3
npm ERR! react-recaptcha-v3@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /lve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /_721Z-debug.log

Hi there, first of all, thanks by the new version updated.

Is there a way to force the re-captcha verification?

Because you have
"P.S. It will open the ReCaptcha window only when there are some doubts by Google; otherwise, it will automatically generate the captcha token."

This comes from google V3 by default?

Thanks
Shintaro

This adds up 152kb of lodash into final webpack bundle!

I am wondering where you implemented the token verification part? It is not included in your documentation for npm. I am talking about this case:

https://developers.google.com/recaptcha/docs/v3#site-verify-response

The second question is: how do I trigger the action only on a form submit action? I have some forms on my website that need to be verified by googles captcha.

Looking forward for your answer.

There is no need to implment code on the server-side?

Hi,

There is an issue with the new version 1.2.0. When invoking loadReCaptcha I'm getting "Object(...) is not a function" error.

Looking at the code issue with camel case notation for the loadRecaptcha method. This should be renamed back to loadReCaptcha.

If you are going to retain this as "loadRecaptcha" instead of "loadReCaptcha", kindly update documentation.

For the time being, reverting back to 1.1.0.

Thanks in advance for your assistance.

Hello,

From time to time the following error occurs within our current recaptcha setup:

Error: Invalid site key or not loaded in api.js: CORRECT_SITE_KEY

It can be reproduced in IE11 when navigating to a page with recaptcha included, then navigating to another page (i.e. youtube) and then using browser back.

Although this path sounds obscure it happens from time to time and I can't be sure, that this is the only way to trigger it, it's just the only way I've found yet.

Did anyone else observe this behavior? Any suggestions for fixing or further debugging?

Thanks in advance,
Jo

Hello,

Is it possible to include an API which we could use to hide the Recaptcha badge?