Ember Octane: ember-g-recaptcha reCaptchaResponse comes back as undefined

Question

I am upgrading to Ember Octane and I am using ember-g-recaptcha https://www.npmjs.com/package/ember-g-recaptcha. The project README.MD has not been updated to reflect Ember Octane. The reCaptchaResponse in the component js keeps coming back undefined. How do I fix this?

I have posted the Ember-Twiddle here https://ember-twiddle.com/509eb1c04c9c7d908d16ba2a2bb39ba5. Note: you will need to provide a sitekey to use it.

Thats what I do:

<GRecaptcha 
    @size="normal" 
    @sitekey={{this.siteKey}} 
    @onSuccess={{action "onCaptchaResolved"}} 
    @onExpired={{action "onCaptchaExpired"}} 
    @ref={{mut this.googleRecaptcha}} 
/>

I have posted the code in GitHub here: https://github.com/IlliterateUser/GoogleReCaptcha

Although, the page is not displaying and the console is not throwing any errors. I will need to look at this over the weekend when I have more time.

Answer 1

GRecaptcha addon is getting the site key from the config envirenement file, you set it as follow

 gReCaptcha: {
      jsUrl: 'https://www.google.com/recaptcha/api.js?render=explicit', // default
      siteKey: '...lQ-sUAAAA...KGVMS6zlH_xry5fon9GP1..'
    }

do not pass it as argument , comment the site key import

////import ENV from '../../config/environment';
...
//  siteKey = ENV.gRecaptcha.siteKey;

and call it without site key argument,

<GRecaptcha
          @size="normal" 
          @onSuccess={{action "onCaptchaResolved"}} 
          @onExpired={{action "onCaptchaExpired"}} 
          @ref={{mut this.googleRecaptcha}} 
 />

this worked for me