[BUG] Re-captcha doesn't work?

[trisosamu]

Describe the bug Re-captcha doesn't work h-captcha works

Expected behavior I set both environment variable on api/.env and client/.env but doesn't work, captcha isn't displayed

Environment (please complete the following information):

• Envionement [Docker, Self-hosted]
• Browser [e.g. chrome, safari]
• OpnForm Version [e.g. latest]

[JhumanJ]

Can you please give us more details about what variables you set? Any error in the console? Please share more details

[trisosamu]

Can you please give us more details about what variables you set? Any error in the console? Please share more details

/api/.env

RE_CAPTCHA_SITE_KEY=aaaaaaa RE_CAPTCHA_SECRET_KEY=bbbbbb

/client/.env

NUXT_PUBLIC_RE_CAPTCHA_SITE_KEY=aaaaaaa

I don't see anything in console. Where can I find error?

On chrome's console I don't see any error unless Bk3RVgqs.js:14 Hydration completed but contains mismatches. but I think it's due to other reason

[JhumanJ]

How did you restart the containers after changing the .env? Please check this: https://docs.opnform.com/configuration/environment-variables#docker-environment-variables

[aindot]

Hello, I can confirm it, Google captcha won't load but hCaptcha do work.

The issue is only presented with the docker deployment

[trisosamu]

How did you restart the containers after changing the .env? Please check this: https://docs.opnform.com/configuration/environment-variables#docker-environment-variables

it isnt' restart problem

[chrislawso]

I am experiencing same issue with new docker install.
Google recaptcha won't load. hCaptcha works correctly. When recaptcha is enabled on published form it does not appear on the form webpage and when user clicks "Submit" the page shows "Please complete the captcha." and "Error Please complete the captcha."

Settings in /api/.env RE_CAPTCHA_SITE_KEY=aaaaaaa RE_CAPTCHA_SECRET_KEY=bbbbbb H_CAPTCHA_SITE_KEY=ccccc H_CAPTCHA_SECRET_KEY=ddddd

/client/.env NUXT_PUBLIC_RE_CAPTCHA_SITE_KEY=aaaaaaa NUXT_PUBLIC_H_CAPTCHA_SITE_KEY=ccccc

On google I created and tested site and secret keys of both types of recaptcha versions and neither work on opnform docker selfhost. reCAPTCHA type Score based (v3) Verify requests with a score and Challenge (v2) Verify requests with a challenge

I cannot find any information in the logs of any of the containers

[JhumanJ]

Hi there - we just updated the docker setup and this should now be fixed. Please feel free to re-open a new issue if needed.

[kav2k]

Phew. It took me hours to dig into this problem and find out what is actually happening.

The issue

The environment variable is named NUXT_PUBLIC_RE_CAPTCHA_SITE_KEY while the runtime config variable is named recaptchaSiteKey.

Note the subtle difference: it's not capitalized reCaptchaSiteKey but the env var has an extra underscore.

The code in https://github.com/JhumanJ/OpnForm/blob/main/client/runtimeConfig.js is reading the env variable with the underscore, but that actually doesn't matter at runtime in production mode.

Quoting https://nuxt.com/docs/guide/going-further/runtime-config#environment-variables (emphasis mine)

Only a specially-named environment variable can override a runtime config property. That is, an uppercase environment variable starting with NUXT_ which uses _ to separate keys and case changes.

Setting the default of runtimeConfig values to differently named environment variables (for example setting myVar to process.env.OTHER_VARIABLE) will only work during build-time and will break on runtime. It is advised to use environment variables that match the structure of your runtimeConfig object.

So while in development the assignment in runtimeConfig.js is decisive, in production the env var parsing takes over. So Nuxt expects NUXT_PUBLIC_RECAPTCHA_SITE_KEY, does not find it, and leaves config.public.recaptchaSiteKey empty.

Workaround

Define both NUXT_PUBLIC_RE_CAPTCHA_SITE_KEY and NUXT_PUBLIC_RECAPTCHA_SITE_KEY in your .env file.

Solution

Either refactor the variable to reCaptchaSiteKey or switch code / .env template to use NUXT_PUBLIC_RECAPTCHA_SITE_KEY

[JhumanJ]

Adressed in https://github.com/JhumanJ/OpnForm/commit/5962e7366aa46be119e73ff3f897b1b347bcf951, thanks for sharing your finding!