From 8dc4945b58d7e2f980d0744e12d0cf846193fc15 Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <anagstef@gmail.com>
Date: Fri, 25 Apr 2025 16:38:40 +0300
Subject: [PATCH 1/3] fix(clerk-js): Add the CAPTCHA element on the SignIn
 component

---
 .changeset/tricky-chicken-sell.md                          | 5 +++++
 packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx | 3 +++
 2 files changed, 8 insertions(+)
 create mode 100644 .changeset/tricky-chicken-sell.md

diff --git a/.changeset/tricky-chicken-sell.md b/.changeset/tricky-chicken-sell.md
new file mode 100644
index 00000000000..d5db7389a87
--- /dev/null
+++ b/.changeset/tricky-chicken-sell.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Add the CAPTCHA element on the SignIn component
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
index ac11ed34769..d1629c56dea 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@@ -29,6 +29,7 @@ import { handleCombinedFlowTransfer } from './handleCombinedFlowTransfer';
 import { useHandleAuthenticateWithPasskey } from './shared';
 import { SignInSocialButtons } from './SignInSocialButtons';
 import { getSignUpAttributeFromIdentifier } from './utils';
+import { CaptchaElement } from '../../elements/CaptchaElement';
 
 const useAutoFillPasskey = () => {
   const [isSupported, setIsSupported] = useState(false);
@@ -483,10 +484,12 @@ function SignInStartInternal(): JSX.Element {
                     </Form.ControlRow>
                     <InstantPasswordRow field={passwordBasedInstance ? instantPasswordField : undefined} />
                   </Col>
+                  <CaptchaElement />
                   <Form.SubmitButton hasArrow />
                 </Form.Root>
               ) : null}
             </SocialButtonsReversibleContainerWithDivider>
+            {!standardFormAttributes.length && <CaptchaElement />}
             {userSettings.attributes.passkey?.enabled &&
               userSettings.passkeySettings.show_sign_in_button &&
               isWebSupported && (

From e755f287459c2f0ca7da8caeaa7328493f01449d Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <anagstef@gmail.com>
Date: Fri, 25 Apr 2025 16:50:22 +0300
Subject: [PATCH 2/3] Fix column spacing

---
 packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
index d1629c56dea..3d26a58fd4a 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@@ -484,8 +484,10 @@ function SignInStartInternal(): JSX.Element {
                     </Form.ControlRow>
                     <InstantPasswordRow field={passwordBasedInstance ? instantPasswordField : undefined} />
                   </Col>
-                  <CaptchaElement />
-                  <Form.SubmitButton hasArrow />
+                  <Col center>
+                    <CaptchaElement />
+                    <Form.SubmitButton hasArrow />
+                  </Col>
                 </Form.Root>
               ) : null}
             </SocialButtonsReversibleContainerWithDivider>

From 64a86691dcabdb57253ca812b2dae05ccd038232 Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <anagstef@gmail.com>
Date: Mon, 28 Apr 2025 16:18:12 +0300
Subject: [PATCH 3/3] Fix lint errors

---
 .../clerk-js/src/ui/components/SignIn/SignInStart.tsx  | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
index 3d26a58fd4a..11a2b233604 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@@ -7,8 +7,12 @@ import { ERROR_CODES, SIGN_UP_MODES } from '../../../core/constants';
 import { clerkInvalidFAPIResponse } from '../../../core/errors';
 import { getClerkQueryParam, removeClerkQueryParam } from '../../../utils';
 import type { SignInStartIdentifier } from '../../common';
-import { getIdentifierControlDisplayValues, groupIdentifiers, withRedirectToAfterSignIn } from '../../common';
-import { buildSSOCallbackURL } from '../../common/redirects';
+import {
+  buildSSOCallbackURL,
+  getIdentifierControlDisplayValues,
+  groupIdentifiers,
+  withRedirectToAfterSignIn,
+} from '../../common';
 import { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
 import { Col, descriptors, Flow, localizationKeys } from '../../customizables';
 import {
@@ -20,6 +24,7 @@ import {
   useCardState,
   withCardStateProvider,
 } from '../../elements';
+import { CaptchaElement } from '../../elements/CaptchaElement';
 import { useLoadingStatus } from '../../hooks';
 import { useSupportEmail } from '../../hooks/useSupportEmail';
 import { useRouter } from '../../router';
@@ -29,7 +34,6 @@ import { handleCombinedFlowTransfer } from './handleCombinedFlowTransfer';
 import { useHandleAuthenticateWithPasskey } from './shared';
 import { SignInSocialButtons } from './SignInSocialButtons';
 import { getSignUpAttributeFromIdentifier } from './utils';
-import { CaptchaElement } from '../../elements/CaptchaElement';
 
 const useAutoFillPasskey = () => {
   const [isSupported, setIsSupported] = useState(false);