Improve race condition handling for slow reCAPTCHA load #11451
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🛠 Summary of changes
Updates
CaptchaSubmitButton
to better handle a scenario where reCAPTCHA is slow to load.Currently, if reCAPTCHA is not loaded by the time the user submits the form, the form will submit immediately, which may produce a failing result from the backend if reCAPTCHA is being enforced.
This is rather unlikely to happen, since the initial reCAPTCHA script is small (roughly 2kb in size), but still technically possible, particularly if someone is using browser extensions or system features to autofill the sign-in form.
The proposed changes here take advantage of documented reCAPTCHA features to "queue" callbacks prior to reCAPTCHA being loaded†, with an additional fallback to submit the form if reCAPTCHA fails to load within a reasonable timeframe (currently 5 seconds).
†: While this feature is not explicitly documented in the reCAPTCHA Enterprise documentation, I've manually confirmed the presence of this queue behavior in the
enterprise.js
script.📜 Testing Plan
Verify that reCAPTCHA validation is not impacted by these changes:
Configure reCAPTCHA for local development. You can use any credentials, they don't need to be valid.
Verify that the reCAPTCHA script failing to load doesn't prevent form submission:
You can simulate this by removing the reCAPTCHA script from
CaptchaSubmitButtonComponent
's markup: