Invisible using overloaded submit loses token and doesn't recover

[mlhDevelopment]

Summary

I'm submitting a:

• [x] bug report
• [ ] feature request
• [ ] question / support request
• [ ] other

Description

Using a consolidated submit pattern (i.e. a single button click callback, intended to performs client side validation before calling execute to be more responsive), the second button click never resolves the token. The page has to be reloaded to complete the captcha or reset() must be called after every attempt.

Demo

• [x] I did my best to come up with a Minimal, Complete, and Verifiable example

https://stackblitz.com/edit/ng-recaptcha-example-gdnhr2 (if it says 'reCAPTCHA has already been rendered in this element' after loading make a change in the .ts file and it should come up)

1. Click Execute button
2. Logs an undefined token then shortly thereafter a valid token (expected)
3. Click Execute button again (do not click Reset)
4. Logs and undefined token
5. Doesn't return a valid token.
6. It will eventually return null after which the Execute button will work for a single click.

Also discovered the same thing in the main example if you add logging to the execute button: https://stackblitz.com/edit/ng-recaptcha-example-x8cbpx

Lib versions:

• ng-recaptcha: 12.0.1 (demo), 9.0.0 (discovered)
• Angular: 16.0.2 (demo), 13.3.11 (discovered)
• Typescript (tsc --version): 4.0.2 (demo), 4.6.4 (discovered)

[DethAriel]

Hi @mlhDevelopment , and thx for submitting a reproducible example!

What would the expected behavior be in your case? recaptcha currently does not auto-reset on subsequent execute() invocations. Would that be the behavior that you find the most ergonomic?

[mlhDevelopment]

Hmm. I did not realize that. I can confirm that at https://stackblitz.com/edit/recaptcha2 Does v3 or non-invisible allow for repeated submit without resetting? We had resetting code but it forgets that the person just passed the captcha so it relentlessly challenges.

[DethAriel]

After looking into this further, I consider that this is working as intended. The purpose of execute() is to generate a token, and this token is valid for one form submission towards the backend. If the token is acquired, but not used - this token should be memoized by the calling app (or, even better, the calling app should not request a reCAPTCHA challenge until the very last moment before the form submission).

See an example of this behavior here.

Since this is the behavior that should be controlled by the implementors, I will close this issue as "won't fix". If you think this behavior should be embedded in the lib, feel free to submit a new enhancement request, stating the desired behavior from ng-recaptcha perspective.