dozoisch / react-google-recaptcha

Component wrapper for Google reCAPTCHA
MIT License
1.04k stars 143 forks source link

Recaptcha disappears after going back from one page - to login page #253

Open uendar opened 2 years ago

uendar commented 2 years ago

i have a strange issue with recaptcha. i see it when i am in login page but when i go to another page as forget password and then go back to login, the component recaptcha is not anymore

useEffect(() => {
    const script = document.createElement("script")

    script.src = "https://www.google.com/recaptcha/api.js"
    script.async = true
    script.defer = true
    document.body.appendChild(script)
  }, [])

  const changedRecaptcha = () => {
    const recaptchaValue = recaptchaRef?.current?.getValue()
  }
  const reset = () => {
    recaptchaRef?.current?.reset() 
  }

  <ReCaptcha
          ref={recaptchaRef}
          hl={currentLanguage}
          type="image"
          sitekey={key}
          onChange={changedRecaptcha}
          onExpired={reset}
        />
exxizor commented 2 years ago

i have same issue i fixed it temporary by adding this code in useEffect

useEffect(() => { try { if (!Recaptcha.getResponse()) { captchaRef.current?.props.grecaptcha.render(document.getElementById(captchaID), { sitekey: import.meta.env.VITE_CAPTCHA_KEY, size: "normal", }); } } catch (e) {} }, []);

<ReCAPTCHA onChange={token => { elm.value = token; }} id={captchaID} ref={captchaRef} sitekey={import.meta.env.VITE_CAPTCHA_KEY} size="normal" />

uendar commented 2 years ago

@exxizor thanks for answer but the code is not clear . What is Recatpcha and captchaID

ET-CS commented 2 years ago

This is still open since Apr 9, 2019 Unfortunately this makes this library un-useful :(

lapotkov commented 1 year ago

@uendar were you using Strict mode or not? https://stackoverflow.com/questions/70890193/why-does-recaptcha-disappear-when-i-navigate-to-another-page