search

snelsi / next-recaptcha-v3

⭐ Straightforward solution for using ReCaptcha in your Next.js application
MIT License
108 stars 8 forks source link

recaptcha UI render all over the app #136

Closed sohagmahin closed 1 year ago

sohagmahin commented 1 year ago

Describe the bug I used reCaptcha on a single page. but somehow it renders on every page of the app.

To Reproduce N/A

Expected behavior It should render on a single page.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

snelsi commented 1 year ago

When ReCaptchaProvider is rendered, it adds ReCaptcha script to your page. When this script is executed, it adds a global recaptcha variable, loads some internal scripts, and adds some handlers and other stuff to the HTML. Even if you remove the ReCaptchaProvider, it won't remove the stuff that ReCaptcha has loaded to the global scope.

Most of the time it's not a problem, since you actually want to load ReCaptha early, to get more user-data, and as a result, more accurate bot-detection.

If you don't like the ReCaptcha tag floating in the corner, just hide it, using the following CSS:

.grecaptcha-badge {
    visibility: hidden;
}
vixero-dev commented 1 year ago

I will leave this here: You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. - Google, source