Please provide callback after renderRecaptcha() for invisible captcha

[rrsdev]

Summary

I'm submitting a:

• bug report
• feature request
• question / support request
• other

Description

In the documentation it mentions that ngAfterViewInit() can be used along with a ViewChild to call .execute() in order to initialize the reCAPTCHA. However this is not quite the case, as the RecaptchaComponent itself uses the ngAfterViewInit function to initialize the underlying lib so there is essentially a race condition which is usually lost by the parent meaning the execute() does nothing if called from the parent / containing components' ngAfterViewInit.

I have an ugly workaround for this by creating a MutationObserver on this.captchaRef.elementRef.nativeElement and waiting for the childList to populate with the grecaptcha-badge. This seems to me (based on testing) to be working for me, but as noted it's pretty ugly. It would be much cleaner for a callback/event to be triggered by the RecaptchaComponent after the this.grecaptcha.render(...) is called.

About my use case: I have a loader page which receives an ID from the ActiveRoute.paramMap; it then uses the ID + the reCAPTCHA token (from the invisible captcha) to fetch the data to display. The URL in this case is actually included in personalized emails (ID is specific to the user) so having a submit button and/or captcha checkbox would be counter productive as it's not always part of a form flow.

Lib versions:

• ng-recaptcha: 4.0.0
• Angular: 6.1.9

[DethAriel]

Hello @rrsdev , and thx for submitting this!

This is in fact a bug - the thing is, we aren't checking if grecaptcha has been rendered at the time when execute is called. I mean, this check is performed, but no action is done if the rendering hasn't happened yet. The fix would be to delay execution until recaptcha is loaded, which is what your proposal is about, but I think that a better way to handle that would be in the lib itself.

The result of this fix would be that calling execute() inside parent's ngAfterViewInit lifecycle hook would not be prone to race conditions.

[DethAriel]

@rrsdev this has been fixed in version 4.1.1. You can now invoke the execute method inside parent's ngAfterViewInit and it'll work, see this example