feat(clerk-js): Backport interactive captcha spotlight for Core 2

[anagstef]

Backports the interactive-captcha spotlight from #8907 to the Core 2 release line.

There is no @clerk/ui package in Core 2 — the sign-in/sign-up UI lives entirely inside clerk-js (packages/clerk-js/src/ui). So the UI changes from the original PR are applied directly to clerk-js's bundled components here, alongside the clerk-js runtime change.

What it does

When a Cloudflare Turnstile challenge escalates to an interactive "Verify you are human" check, the start card brings it to the foreground: the rest of the card (social buttons, form) collapses and is inert-ed until the challenge is solved, while the header, footer, and passkey action stay reachable. Invisible challenges — the vast majority — are unaffected.

Changes

• utils/captcha/turnstile.ts — sets a data-cl-interactive attribute on #clerk-captcha when a challenge becomes interactive (removed on resolve), giving the UI a reliable signal.
• ui/elements/CaptchaElement.tsx — new optional onInteractiveChange and gapless props; the MutationObserver now also reads data-cl-interactive, with a maxHeight fallback for older runtimes. Other render sites that use a bare <CaptchaElement /> are unaffected.
• ui/components/SignIn/SignInStart.tsx and ui/components/SignUp/SignUpStart.tsx — hoist the captcha into a single slot outside the collapsing column and wire up the spotlight.
• ui/components/SignUp/SignUpForm.tsx — no longer renders its own captcha; the start card's slot owns it now.

Note

SignUpForm is shared by the start and continue flows, so removing its captcha means SignUpContinue no longer renders a captcha element. This matches the original PR's behavior — the captcha is only needed on the initial sign-up create.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jun 19, 2026 3:47pm
swingset	Error		Jun 19, 2026 3:47pm

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4aa8d72e-567a-46e1-bdda-463ba9f491ea

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch stefanos/backport-captcha-interactive-core-2

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[changeset-bot]

🦋 Changeset detected

Latest commit: cc5f7ff

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Minor
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[anagstef]

!snapshot

[github-actions]

Hey @anagstef - the snapshot version command generated the following package versions:

Package	Version
@clerk/chrome-extension	2.9.19-snapshot.v20260619160001
@clerk/clerk-js	5.126.0-snapshot.v20260619160001
@clerk/clerk-expo	2.19.40-snapshot.v20260619160001

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension

npm i @clerk/chrome-extension@2.9.19-snapshot.v20260619160001 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.126.0-snapshot.v20260619160001 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.19.40-snapshot.v20260619160001 --save-exact