Closed JudeNiroshan closed 4 years ago
@JudeNiroshan , thanks for reporting that. I will have a look when I have time.
It seems like https://github.com/t49tran/react-google-recaptcha-v3/blob/24cfcb9391ec7fe5eccbec2c5098df3c02e70b53/src/google-recaptcha.tsx#L22 is not firing on component re-render
Yeah, that's expected behaviour for that component, it's only run once on componentDidMount
. You don't want it to fire on every single re-render though. You might want to track that.
Your code looks ok to me except that you should put GoogleRecaptchaProivder
on top level of your application. This component should only be rendered once for the whole application.
Thank you. But usually customers do not want to show the recaptcha logo on every page on the website. For example, home page.
Google reCaptcha v2 is about adding a different kind of form input. Now the enhanced version(v3) will not add a form input attribute rather secretly validate the user. Basically reCaptcha is used for input forms of a website.
IMO, adding the GoogleReCaptchaProvider
to wrap the entire react app, is not the intended usage of Google reCaptcha.
@JudeNiroshan , you can hide the Google Logo if you want.
The reason why GoogleReCaptchaProvider
should stay at the top level of the app, or the page has nothing to do with the intended usage of Google reCaptcha. It's a provider component that does two things: load the Google Recaptcha script and provide a React context value that including common recaptcha functions. For any application, to avoid errors, you only want to perform both these two tasks once.
Also, it's Google decision that by just including the recaptcha v3 script into your page, the logo will be displayed. So, if you use vanilla Javascript and not React, the same thing will happen. It's intended behaviour from Google.
Having said that, it doesn't seem that your problem is caused by where you place GoogleReCaptchaProvider
.
This problem has been resolved in v1.6.1 #45
I have a simple
LoginForm
component. This is how I have wrapped my component withGoogleReCaptchaProvider
component.This is my callback function that I submitted for
onVerify()
Problem:
At the initial when the page is rendering, I can see the
onVerifyCallback
has being triggered. But if I move to a different page(home page) without refreshing my web page, and then come back to login page(which has this shown code) will not trigger theonVerifyCallback
method.Output I see on the browser console:
Am I doing/using something wrong?