clerk / clerk/javascript

@clerk/ui: SignIn/SignUp captcha flow passes inert="" instead of boolean true, triggering React 19 console warning

Open Beginner friendly
#9,611 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.8k
Forks
472
Avg merge
2d 11h
Merged PRs (30d)
189

Description

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @clerk/ui@1.25.5 for the project I'm working on.

Identified the issue: Clerk's sign-in/sign-up modals pass inert="" when the captcha loads — invalid in React 19.

When Clerk’s bot-protection captcha becomes interactive, SignInStart and SignUpStart hide the main form with:

inert: captchaIsInteractive ? "" : void 0
React 19 treats inert as a boolean attribute, so inert="" triggers the console warning. That happens on pages using (homepage, pricing, preview wizard, etc.) once the captcha widget loads.

In @clerk/ui (tested on 1.25.5 and 1.31.0), SignInStart and SignUpStart set inert: captchaIsInteractive ? "" : void 0 on the main form container when the captcha becomes interactive. React 19 treats inert as a boolean attribute and warns: "Received an empty string for a boolean attribute inert."

Expected: inert: captchaIsInteractive ? true : void 0 (or use @clerk/shared/inert’s inertProps()).

Affected files: dist/components/SignIn/SignInStart.js, dist/components/SignUp/SignUpStart.js, and the no-rhc variants.

Here is the diff that solved my problem:

diff --git a/node_modules/@clerk/ui/dist/components/SignIn/SignInStart.js b/node_modules/@clerk/ui/dist/components/SignIn/SignInStart.js
index f5c3af2..daaa935 100644
--- a/node_modules/@clerk/ui/dist/components/SignIn/SignInStart.js
+++ b/node_modules/@clerk/ui/dist/components/SignIn/SignInStart.js
@@ -396,7 +396,7 @@ function SignInStartInternal() {
 			/* @__PURE__ */ jsx(Col, {
 				elementDescriptor: descriptors.main,
 				gap: 6,
-				inert: captchaIsInteractive ? "" : void 0,
+				inert: captchaIsInteractive ? true : void 0,
 				sx: captchaIsInteractive ? { display: "none" } : void 0,
 				children: /* @__PURE__ */ jsxs(SocialButtonsReversibleContainerWithDivider, { children: [hasSocialOrWeb3Buttons && /* @__PURE__ */ jsx(SignInSocialButtons, {
 					enableWeb3Providers: true,
diff --git a/node_modules/@clerk/ui/dist/components/SignUp/SignUpStart.js b/node_modules/@clerk/ui/dist/components/SignUp/SignUpStart.js
index c333817..4f7ede5 100644
--- a/node_modules/@clerk/ui/dist/components/SignUp/SignUpStart.js
+++ b/node_modules/@clerk/ui/dist/components/SignUp/SignUpStart.js
@@ -343,7 +343,7 @@ function SignUpStartInternal() {
 				direction: "col",
 				elementDescriptor: descriptors.main,
 				gap: 6,
-				inert: captchaIsInteractive ? "" : void 0,
+				inert: captchaIsInteractive ? true : void 0,
 				sx: captchaIsInteractive ? { display: "none" } : void 0,
 				children: /* @__PURE__ */ jsxs(SocialButtonsReversibleContainerWithDivider, { children: [(showOauthProviders || showWeb3Providers || showAlternativePhoneCodeProviders) && /* @__PURE__ */ jsx(SignUpSocialButtons, {
 					enableOAuthProviders: showOauthProviders,
diff --git a/node_modules/@clerk/ui/dist/no-rhc/components/SignIn/SignInStart.js b/node_modules/@clerk/ui/dist/no-rhc/components/SignIn/SignInStart.js
index f5c3af2..daaa935 100644
--- a/node_modules/@clerk/ui/dist/no-rhc/components/SignIn/SignInStart.js
+++ b/node_modules/@clerk/ui/dist/no-rhc/components/SignIn/SignInStart.js
@@ -396,7 +396,7 @@ function SignInStartInternal() {
 			/* @__PURE__ */ jsx(Col, {
 				elementDescriptor: descriptors.main,
 				gap: 6,
-				inert: captchaIsInteractive ? "" : void 0,
+				inert: captchaIsInteractive ? true : void 0,
 				sx: captchaIsInteractive ? { display: "none" } : void 0,
 				children: /* @__PURE__ */ jsxs(SocialButtonsReversibleContainerWithDivider, { children: [hasSocialOrWeb3Buttons && /* @__PURE__ */ jsx(SignInSocialButtons, {
 					enableWeb3Providers: true,
diff --git a/node_modules/@clerk/ui/dist/no-rhc/components/SignUp/SignUpStart.js b/node_modules/@clerk/ui/dist/no-rhc/components/SignUp/SignUpStart.js
index c333817..4f7ede5 100644
--- a/node_modules/@clerk/ui/dist/no-rhc/components/SignUp/SignUpStart.js
+++ b/node_modules/@clerk/ui/dist/no-rhc/components/SignUp/SignUpStart.js
@@ -343,7 +343,7 @@ function SignUpStartInternal() {
 				direction: "col",
 				elementDescriptor: descriptors.main,
 				gap: 6,
-				inert: captchaIsInteractive ? "" : void 0,
+				inert: captchaIsInteractive ? true : void 0,
 				sx: captchaIsInteractive ? { display: "none" } : void 0,
 				children: /* @__PURE__ */ jsxs(SocialButtonsReversibleContainerWithDivider, { children: [(showOauthProviders || showWeb3Providers || showAlternativePhoneCodeProviders) && /* @__PURE__ */ jsx(SignUpSocialButtons, {
 					enableOAuthProviders: showOauthProviders,

This issue body was partially generated by patch-package.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the affected @clerk/ui entry points in dist/components/SignIn/SignInStart.js, dist/components/SignUp/SignUpStart.js, and their no-rhc variants, then locate the corresponding source components. Reproduce the warning through SignInButton mode="modal" until the captcha becomes interactive; done means the warning is gone and all four affected variants handle inert consistently.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
authentication, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
74/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.