[Core 1 backport] fix(clerk-js): Improvements on Smart bot protection (#4943)

Author: anagstef

.changeset/eighty-tigers-doubt.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Improvements on Smart bot protection
+
+- Fix bot protection layout shift on the sign-up form.
+- Fix the transfer flow when captcha is interactive.

package.json

@@ -38,8 +38,8 @@
     "turbo:clean": "turbo daemon clean",
     "update:lockfile": "npm run nuke && npm install -D --arch=x64 --platform=linux turbo && npm install -D --arch=arm64 --platform=darwin turbo",
     "version": "changeset version && ./scripts/version-info.sh",
+    "version-packages:snapshot": "./scripts/snapshot.mjs",
     "version:canary": "./scripts/canary.mjs",
-    "version:snapshot": "./scripts/snapshot.mjs",
     "yalc:all": "for d in packages/*/; do echo $d; cd $d; yalc push --replace --sig; cd '../../'; done"
   },
   "devDependencies": {

packages/clerk-js/src/ui/components/SignUp/SignUpForm.tsx

@@ -101,7 +101,7 @@ export const SignUpForm = (props: SignUpFormProps) => {
         </Form.ControlRow>
       )}
       <Col center>
-        <CaptchaElement />
+        <CaptchaElement maxHeight='0' />
         <Form.SubmitButton>Continue</Form.SubmitButton>
       </Col>
     </Form.Root>

packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

@@ -273,7 +273,7 @@ function _SignUpStart(): JSX.Element {
               />
             )}
           </SocialButtonsReversibleContainerWithDivider>
-          {!shouldShowForm && <CaptchaElement />}
+          {!shouldShowForm && <CaptchaElement maxHeight='0' />}
         </Flex>
         <Footer.Root>
           <Footer.Action elementId='signUp'>

packages/clerk-js/src/ui/elements/CaptchaElement.tsx

@@ -1,9 +1,13 @@
 import { CAPTCHA_ELEMENT_ID } from '../../utils/captcha';
 import { Box } from '../customizables';
 
-export const CaptchaElement = () => (
+type CaptchaElementProps = {
+  maxHeight?: string;
+};
+
+export const CaptchaElement = ({ maxHeight }: CaptchaElementProps) => (
   <Box
     id={CAPTCHA_ELEMENT_ID}
-    sx={t => ({ display: 'none', marginBottom: t.space.$6, alignSelf: 'center' })}
+    sx={{ display: 'block', alignSelf: 'center', maxHeight }}
   />
 );

packages/clerk-js/src/utils/captcha/turnstile.ts

@@ -40,6 +40,10 @@ interface RenderOptions {
    * @param errorCode string
    */
   'error-callback'?: (errorCode: string) => void;
+  /**
+   * A JavaScript callback invoked before the challenge enters interactive mode.
+   */
+  'before-interactive-callback'?: () => void;
   /**
    * A JavaScript callback invoked when a given client/browser is not supported by the widget.
    */
@@ -145,7 +149,6 @@ export const getTunstileToken = async (captchaOptions: {
         } else {
           const visibleDiv = document.getElementById(CAPTCHA_ELEMENT_ID);
           if (visibleDiv) {
-            visibleDiv.style.display = 'block';
             widgetDiv = visibleDiv;
           } else {
             console.error('Captcha DOM element not found. Using invisible captcha widget.');
@@ -163,6 +166,14 @@ export const getTunstileToken = async (captchaOptions: {
           callback: function (token: string) {
             resolve([token, id]);
           },
+          'before-interactive-callback': () => {
+            const visibleWidget = document.getElementById(CAPTCHA_ELEMENT_ID);
+            if (visibleWidget) {
+              visibleWidget.style.maxHeight = 'unset';
+              visibleWidget.style.minHeight = '68px'; // this is the height of the Turnstile widget
+              visibleWidget.style.marginBottom = '1.5rem';
+            }
+          },
           'error-callback': function (errorCode) {
             errorCodes.push(errorCode);
             /**
@@ -211,7 +222,9 @@ export const getTunstileToken = async (captchaOptions: {
       if (isInvisibleWidget) {
         document.body.removeChild(widgetDiv as HTMLElement);
       } else {
-        (widgetDiv as HTMLElement).style.display = 'none';
+        (widgetDiv as HTMLElement).style.maxHeight = '0';
+        (widgetDiv as HTMLElement).style.minHeight = 'unset';
+        (widgetDiv as HTMLElement).style.marginBottom = 'unset';
       }
     }
   }