fix(clerk-js): Add the render query param on the captcha script (#4332)…

… [Core 1 backport] (#4341) Co-authored-by: panteliselef <[email protected]>
clerk · Oct 17, 2024 · 097f13b · 097f13b
1 parent b686a73
commit 097f13b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/.changeset/serious-moose-design.md b/.changeset/serious-moose-design.md
@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Add the `?render=explicit` query parameter to the Turnstile script.
diff --git a/packages/clerk-js/src/utils/captcha/turnstile.ts b/packages/clerk-js/src/utils/captcha/turnstile.ts
@@ -3,7 +3,9 @@ import type { CaptchaWidgetType } from '@clerk/types';
 
 import { CAPTCHA_ELEMENT_ID, CAPTCHA_INVISIBLE_CLASSNAME } from './constants';
 
-const CLOUDFLARE_TURNSTILE_ORIGINAL_URL = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
+// We use the explicit render mode to be able to control when the widget is rendered.
+// CF docs: https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#disable-implicit-rendering
+const CLOUDFLARE_TURNSTILE_ORIGINAL_URL = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
 
 interface RenderOptions {
   /**