CODEWITHSUNDEEP
reactjsionic-frameworkrecaptchacaptchacapacitor
aceraven777
aceraven777

Reputation: 4556

How to Setup recaptcha on Ionic Capacitor React

Does anyone manage to make recaptcha work on ionic?

I'm planning to use Appflow for our deployment purposes.

I managed to make it work in my local environment, but my problem is when I deployed it on appflow. It has an error "is not in the list of supported domains for this site key."

I'm using the package react-google-recaptcha.

<ReCAPTCHA
    ref={recaptchaRef}
    name="captcha"
    sitekey={siteKey}
    onChange={onChange}
    onExpired={() => {
        recaptchaRef.current.reset();
        onExpired();
    }}
/>

Mobile apps don't have domains right, so how do I make this work?

Or is there an alternative for recaptcha for mobile apps to prevent spam?

Upvotes: 0

Views: 263

Answers (1)

Nelson SUle
Nelson SUle

Reputation: 394

Have you tried switching to mobile specific recaptcha packages like safetyNet for Android or recaptcha ios sdk? Your implementation with react-google-recaptcha component of Appflow works well for web based applications but might be problematic in a mobile app environment, due to domain verification requirements.

However, you can consider this a work around if you want to maintain the use of react-google-recaptcha package

  • set the domain to localhost in the google recaptcha admin console
  • you will still implement the serverside validation

capture the recaptcha response on the client side

<ReCAPTCHA
  ref={recaptchaRef}
  name="captcha"
  sitekey={siteKey}
  onChange={onChange}
  onExpired={() => {
    recaptchaRef.current.reset();
    onExpired();
  }}
/>

Also, on your server verify the validation using siteverify

const axios = require('axios');

// Example POST request for server-side validation
const verifyRecaptcha = async (recaptchaToken) => {
  const secretKey = 'your_secret_key';

  const response = await axios.post(
    `https://www.google.com/recaptcha/api/siteverify`,
    {},
    {
      params: {
        secret: secretKey,
        response: recaptchaToken,
      },
    }
  );

  const { success, score } = response.data;
  if (success) {
    // reCAPTCHA was successfully validated
    return true;
  } else {
    // reCAPTCHA validation failed
    return false;
  }
};

Upvotes: 0

Related Questions