CODEWITHSUNDEEP
javascriptreactjssecurityrecaptchacontent-security-policy
user12551065
user12551065

Reputation:

I am not sure if I am using the recapcha API correctly for a react app

I tried to use the recapcha API because I did not want someone getting bots and submitting posts to a forum site, the users have default 3 max posts then they have to pay for more, so I am not sure if this is even a real threat ( I am a new developer) , I created the following component, and hope I can get some advice if I am using the API correctly, or if I should even use it in the site, I have no idea what the real threats are out there...

the API: https://www.npmjs.com/package/react-google-recaptcha the code : https://codesandbox.io/s/clever-breeze-nevll

const App = () => {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [allowSubmit, setAllowSubmit] = useState(false);

  const onChange = value => {
    console.log("Captcha value:", value);
    setAllowSubmit(true);
  };

  const onSubmit = event => {
    event.preventDefault();
    console.log(
      `Your first name is ${firstName} , your last name is ${lastName}`
    );
    setAllowSubmit(false);
  };

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="first name"> firstName </label>
      <input
        placeholder="enter your first name"
        onChange={event => setFirstName(event.target.value)}
      />

      <br />

      <label htmlFor="first name"> lastName </label>
      <input
        placeholder="enter your last name"
        onChange={event => setLastName(event.target.value)}
      />

      <br />

      <ReCAPTCHA
        sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
        onChange={onChange}
      />

      <button disabled={!allowSubmit}> Submit </button>
    </form>
  );
};

Upvotes: 1

Views: 38

Answers (1)

Fabio Poloni
Fabio Poloni

Reputation: 8371

If there is a form, bots will try to automatically submit data to it sooner or later. However, if you have a forum which requires authentication and has a three posts limit per user, there shouldn't be many issues.

An important thing to consider is the validation of the reCAPTCHA token which has to be server-side (otherwise it wouldn't make much sense, because client-side-only security is like no security at all.

From a UX point of view I would recommend to use the latest version of reCAPTCHA because you don't have to do those annoying puzzles.

Upvotes: 1

Related Questions