Captcha error while trying to login or register.

[karthxk07]

Describe the bug
I encountered a reCaptcha error when attempting to log in or register on the site. Even after successfully completing the reCaptcha challenge, the site still throws a captcha error.

Mentioned in the issue #380, but not resolved.

To Reproduce
Steps to reproduce the behavior:

1. Navigate to the login page.
2. Attempt to log in with valid credentials.
3. Complete the Recaptcha challenge.
4. Observe the captcha error.

Expected behavior
After successfully completing the Recaptcha, the login or registration process should proceed without any captcha errors.

Actual behavior
Despite successfully completing the Recaptcha, the site throws a captcha error, preventing the login or registration.

Screenshots
Screencast from 2023-12-28 17-39-08.webm

Potential internship candidates
Please read this if you are planning to apply for a Palisadoes Foundation internship PalisadoesFoundation/talawa#359

[Pranavx1]

Can i work on this?

[Kevoniat]

Can i work on this?

@Pranavx1 sure

[karthxk07]

@Kevoniat @Cioppolo14 @palisadoes Sir/Ma'am, Just as the previous issue #1311 I had authored this issue too and have been waiting for this to get assigned to me too, mentioned here #380. To give chance to fellow contributors can I get at least any one of the issues assigned to me? (Preferably this , since the other issue #1311 is a 'good-first' issue).

[karthxk07]

@palisadoes I am ready with the fix sir , can i make a pull request? (I am aware that this issue is not assigned to me).

[Tarunmeena0901]

I think you should wait for maintainers to reply before making a PR , as this is time of weekend going on they may not see your comment for while

[Cioppolo14]

@Pranavx1 Are you working on this?

@karthxk07 I apologize for the confusion, let me see where the assigned person is at in this issue. Please do not make a pull request without being assigned the issue. Please in the future, indicate that you'd like to be assigned the issue when you create it. Often people document the issue as they find it, so we don't assume that you want to resolve the issue unless you indicate so.

[Pranavx1]

Yes,i think i am close to resolving it.

[karthxk07]

@Cioppolo14 ok, sorry my bad. cool. 😄

[Sauradip07]

@Kevoniat @Pranavx1 @karthxk07
The issue arises from a misconfiguration in the .env file of the project. Specifically, the value for the REACT_APP_USE_RECAPTCHA variable should be set to 'yes'.
However, this alone is not sufficient for the proper functioning of the application. To ensure proper integration with Google's reCAPTCHA service, the REACT_APP_RECAPTCHA_SITE_KEY also needs to be populated in the .env file.

{REACT_APP_USE_RECAPTCHA === 'yes' ? ( <div className="googleRecaptcha"> <ReCAPTCHA ref={recaptchaRef} className="mt-3" sitekey={ /* istanbul ignore next */ RECAPTCHA_SITE_KEY ? RECAPTCHA_SITE_KEY : 'XXX' } /> </div> ) : ( /* istanbul ignore next */ <></> )}

The relevant portion of the code in the React application checks the value of REACT_APP_USE_RECAPTCHA. If it is set to 'yes', it renders a Google reCAPTCHA component. This component requires a site key (RECAPTCHA_SITE_KEY) for proper configuration. If the site key is not provided in the .env file, it defaults to 'XXX'.

reCAPTCHA config Guide and Test Site Key :
https://developers.google.com/recaptcha/docs/faq

For a visual guide on Proper Working, and please resolve this issue :

Screencast.from.2024-01-03.23-54-17.mp4

[karthxk07]

@Sauradip07 considering issue resolved then , closing with comment.