Handling two recaptchas on same page

[joelfloressottile]

I'm having problems finding a solution for two recaptchas that are in two different components in the same page and have different methods runnig for their emitted onSuccess events.

If I run this.$recaptcha.getResponse() on any of them because of a form submit the onSuccess emitted event will run both of the AJAX in both of the components.

I tried using ref in each one of them, but I can't find a way to run the getResponse() so I dont have to call this.$recaptcha.getResponse() and instead call it like this.$refs.componentOneRecaptcha.getResponse() but it wont run at that level because there's no getResponse(). Is there any other smarter way to do this?

[Marcosaurios]

Did you find any workaround? I'm facing issues loading a V3 reCaptcha instance and a V2 in case V3 fails, I'm not able to load the second one.

[joelfloressottile]

Did you find any workaround? I'm facing issues loading a V3 reCaptcha instance and a V2 in case V3 fails, I'm not able to load the second one.

Not yet :(

[Marcosaurios]

Finally I managed to solve it. I found it useless to place 2 recaptchas on the same page, instead I proposed to use V2 as fallback of V3. Or otherwise, if you want to prioritize the V2 functionality over the V3.

If one fails, you can override the recaptcha options accessing window.$nuxt.$recaptcha object, and there update the new values:

try {
      // captcha V3
      await window.$nuxt.$recaptcha.execute("login");
}
catch(e) {
      // trying V2
      window.$nuxt.$recaptcha.siteKey = process.env.RECAPTCHA_SITE_KEY_V2;
      window.$nuxt.$recaptcha.version = 2;
      window.$nuxt.$recaptcha.hideBadge = true;
      
      try {
            await window.$nuxt.$recaptcha.getResponse();
      } 
      catch(e) { 
            // both failed :(
      }
}

Hope it helps!

[Marcosaurios]

@joelfloressottile take a look at #70, this PR enables switching the plugin configuration in runtime, so instead of having two instances of the same plugin, you could switch from one plugin settings to another, whenever you need it.

[joelfloressottile]

@joelfloressottile take a look at #70, this PR enables switching the plugin configuration in runtime, so instead of having two instances of the same plugin, you could switch from one plugin settings to another, whenever you need it.

I'll take a look. Thanks!