From d6409a2af2ac9ff44e8e69866006e7df77eb4a02 Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Mon, 20 Jan 2025 18:23:56 +0200 Subject: [PATCH 1/2] fix(clerk-js): Improvements on Smart bot protection - Fix bot protection layout shift on the sign-up form. - Fix the transfer flow when captcha is interactive. --- .changeset/eighty-tigers-doubt.md | 8 ++++++++ .../src/ui/components/SignUp/SignUpForm.tsx | 2 +- .../src/ui/components/SignUp/SignUpStart.tsx | 2 +- .../clerk-js/src/ui/elements/CaptchaElement.tsx | 8 ++++++-- .../clerk-js/src/utils/captcha/turnstile.ts | 17 +++++++++++++++-- 5 files changed, 31 insertions(+), 6 deletions(-) create mode 100644 .changeset/eighty-tigers-doubt.md diff --git a/.changeset/eighty-tigers-doubt.md b/.changeset/eighty-tigers-doubt.md new file mode 100644 index 00000000000..40b776f40ef --- /dev/null +++ b/.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. diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpForm.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpForm.tsx index 2bade99941a..2ff9abb1446 100644 --- a/packages/clerk-js/src/ui/components/SignUp/SignUpForm.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/SignUpForm.tsx @@ -101,7 +101,7 @@ export const SignUpForm = (props: SignUpFormProps) => { )} - + Continue diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx index 2101fa04836..85b0f5bee26 100644 --- a/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx @@ -273,7 +273,7 @@ function _SignUpStart(): JSX.Element { /> )} - {!shouldShowForm && } + {!shouldShowForm && } diff --git a/packages/clerk-js/src/ui/elements/CaptchaElement.tsx b/packages/clerk-js/src/ui/elements/CaptchaElement.tsx index 76c9a7e11ab..26edf2c5a8c 100644 --- a/packages/clerk-js/src/ui/elements/CaptchaElement.tsx +++ b/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) => ( ({ display: 'none', marginBottom: t.space.$6, alignSelf: 'center' })} + sx={{ display: 'block', alignSelf: 'center', maxHeight }} /> ); diff --git a/packages/clerk-js/src/utils/captcha/turnstile.ts b/packages/clerk-js/src/utils/captcha/turnstile.ts index a7e639852e8..e40928ecb90 100644 --- a/packages/clerk-js/src/utils/captcha/turnstile.ts +++ b/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'; } } } From d3c2a7275351fac1647060728f2c027c082ab4a5 Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Tue, 21 Jan 2025 13:40:08 +0200 Subject: [PATCH 2/2] change the name of the snapshot npm script --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c9e72c0290c..6edcc54229f 100644 --- a/package.json +++ b/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": {