fix(clerk-js): Use stable DOM container for smart captcha to prevent 200100 errors#7767
Closed
jacekradko wants to merge 1 commit intomainfrom
Closed
fix(clerk-js): Use stable DOM container for smart captcha to prevent 200100 errors#7767jacekradko wants to merge 1 commit intomainfrom
jacekradko wants to merge 1 commit intomainfrom
Conversation
…revent 200100 errors during React re-renders
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
This PR is a proposed fix for Cloudflare Turnstile 200100 "Widget not found" errors that may occur when React re-renders remove the captcha container element during verification.
Problem (Hypothesis)
When using the "smart" widget type, Turnstile renders into a React-managed DOM element (
#clerk-captcha). If React re-renders during the verification process (e.g., due to form state changes), the element could be unmounted and remounted, causing Turnstile to lose track of its widget and throw error 200100.Suspected behavior:
Proposed Solution
Create a stable DOM container outside React's control for the smart widget:
#clerk-captchaelement#clerk-captcha-stablediv imperatively (not managed by React)This approach mirrors how the "invisible" widget already works—it creates its own container on
document.bodythat isn't affected by React re-renders.Testing Required