Integrate Google reCAPTCHA into Login Flow

[IvanoskiHarmonia]

• Integrate Google reCAPTCHA to enhance login security:
  • Register the application on Google reCAPTCHA to obtain Site Key and Secret Key.
    • Follow the instructions on Google reCAPTCHA admin console to create a new site and get the necessary keys.
  • Install the react-google-recaptcha package.
    • Use the command: npm install react-google-recaptcha.
  • Create a new Captcha component to handle CAPTCHA rendering.
    • Use the react-google-recaptcha package to implement this component.
  • Update the Login component to include the CAPTCHA verification.
    • Add the Captcha component to the login form.
    • Modify the login logic to include the CAPTCHA token in the request to the server.
    • Ensure the login button is disabled until the CAPTCHA is successfully completed.
  • Implement server-side CAPTCHA validation:
    • Update the server's login endpoint to validate the CAPTCHA token with Google reCAPTCHA's API.
    • Verify the CAPTCHA token using Google's reCAPTCHA API before proceeding with user authentication.
  • Add necessary environment variables for reCAPTCHA keys:
    • Add REACT_APP_RECAPTCHA_SITE_KEY and RECAPTCHA_SECRET_KEY to the .env file.
• Test the CAPTCHA integration thoroughly:
  • Ensure that the CAPTCHA is required and working correctly on the login form.
  • Validate that users cannot bypass the CAPTCHA verification.
  • Verify the server correctly handles and validates the CAPTCHA token.
  • Ensure a smooth user experience with proper error handling for failed CAPTCHA verification.