diff --git a/.changeset/yellow-cycles-invent.md b/.changeset/yellow-cycles-invent.md new file mode 100644 index 00000000000..2fd693b71ef --- /dev/null +++ b/.changeset/yellow-cycles-invent.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Stop falling back to the Clerk proxy worker if turnstile fails to load as it is not as accurate as challenges.cloudflare.com diff --git a/packages/clerk-js/src/utils/captcha/CaptchaChallenge.ts b/packages/clerk-js/src/utils/captcha/CaptchaChallenge.ts index 918a3bd4b8b..8afa872e11e 100644 --- a/packages/clerk-js/src/utils/captcha/CaptchaChallenge.ts +++ b/packages/clerk-js/src/utils/captcha/CaptchaChallenge.ts @@ -12,14 +12,13 @@ export class CaptchaChallenge { * always use the fallback key. */ public async invisible() { - const { captchaSiteKey, canUseCaptcha, captchaURL, captchaPublicKeyInvisible } = retrieveCaptchaInfo(this.clerk); + const { captchaSiteKey, canUseCaptcha, captchaPublicKeyInvisible } = retrieveCaptchaInfo(this.clerk); - if (canUseCaptcha && captchaSiteKey && captchaURL && captchaPublicKeyInvisible) { + if (canUseCaptcha && captchaSiteKey && captchaPublicKeyInvisible) { return getCaptchaToken({ siteKey: captchaPublicKeyInvisible, invisibleSiteKey: captchaPublicKeyInvisible, widgetType: 'invisible', - scriptUrl: captchaURL, captchaProvider: 'turnstile', }).catch(e => { if (e.captchaError) { @@ -41,15 +40,14 @@ export class CaptchaChallenge { * Managed challenged start as non-interactive and escalate to interactive if necessary. */ public async managedOrInvisible(opts?: Partial) { - const { captchaSiteKey, canUseCaptcha, captchaURL, captchaWidgetType, captchaProvider, captchaPublicKeyInvisible } = + const { captchaSiteKey, canUseCaptcha, captchaWidgetType, captchaProvider, captchaPublicKeyInvisible } = retrieveCaptchaInfo(this.clerk); - if (canUseCaptcha && captchaSiteKey && captchaURL && captchaPublicKeyInvisible) { + if (canUseCaptcha && captchaSiteKey && captchaPublicKeyInvisible) { return getCaptchaToken({ siteKey: captchaSiteKey, widgetType: captchaWidgetType, invisibleSiteKey: captchaPublicKeyInvisible, - scriptUrl: captchaURL, captchaProvider, ...opts, }).catch(e => { diff --git a/packages/clerk-js/src/utils/captcha/retrieveCaptchaInfo.ts b/packages/clerk-js/src/utils/captcha/retrieveCaptchaInfo.ts index caa36e5fffd..60f16de2a26 100644 --- a/packages/clerk-js/src/utils/captcha/retrieveCaptchaInfo.ts +++ b/packages/clerk-js/src/utils/captcha/retrieveCaptchaInfo.ts @@ -1,9 +1,7 @@ import type { Clerk } from '../../core/clerk'; -import { createFapiClient } from '../../core/fapiClient'; export const retrieveCaptchaInfo = (clerk: Clerk) => { const _environment = clerk.__unstable__environment; - const fapiClient = createFapiClient(clerk); const captchaProvider = _environment ? _environment.displayConfig.captchaProvider : 'turnstile'; return { @@ -12,12 +10,5 @@ export const retrieveCaptchaInfo = (clerk: Clerk) => { captchaProvider, captchaPublicKeyInvisible: _environment ? _environment.displayConfig.captchaPublicKeyInvisible : null, canUseCaptcha: _environment ? _environment.userSettings.signUp.captcha_enabled && clerk.isStandardBrowser : null, - captchaURL: fapiClient - .buildUrl({ - path: 'cloudflare/turnstile/v0/api.js', - pathPrefix: '', - search: '?render=explicit', - }) - .toString(), }; }; diff --git a/packages/clerk-js/src/utils/captcha/turnstile.ts b/packages/clerk-js/src/utils/captcha/turnstile.ts index 37f07c8c7e3..136eb5f7359 100644 --- a/packages/clerk-js/src/utils/captcha/turnstile.ts +++ b/packages/clerk-js/src/utils/captcha/turnstile.ts @@ -78,13 +78,11 @@ export const shouldRetryTurnstileErrorCode = (errorCode: string) => { return !!codesWithRetries.find(w => errorCode.startsWith(w)); }; -async function loadCaptcha(fallbackUrl: string) { +async function loadCaptcha() { if (!window.turnstile) { - await loadCaptchaFromCloudflareURL() - .catch(() => loadCaptchaFromFAPIProxiedURL(fallbackUrl)) - .catch(() => { - throw { captchaError: 'captcha_script_failed_to_load' }; - }); + await loadCaptchaFromCloudflareURL().catch(() => { + throw { captchaError: 'captcha_script_failed_to_load' }; + }); } return window.turnstile; } @@ -100,16 +98,6 @@ async function loadCaptchaFromCloudflareURL() { } } -async function loadCaptchaFromFAPIProxiedURL(fallbackUrl: string) { - try { - return await loadScript(fallbackUrl, { defer: true }); - } catch (err) { - // Rethrow with specific message - console.error('Clerk: Failed to load the CAPTCHA script from the URL: ', fallbackUrl); - throw err; - } -} - /* * How this function works: * The widgetType is either 'invisible' or 'smart'. @@ -118,9 +106,9 @@ async function loadCaptchaFromFAPIProxiedURL(fallbackUrl: string) { * not exist, the invisibleSiteKey is used as a fallback and the widget is rendered in a hidden div at the bottom of the body. */ export const getTurnstileToken = async (opts: CaptchaOptions) => { - const { siteKey, scriptUrl, widgetType, invisibleSiteKey } = opts; + const { siteKey, widgetType, invisibleSiteKey } = opts; const { modalContainerQuerySelector, modalWrapperQuerySelector, closeModal, openModal } = opts; - const captcha: Turnstile = await loadCaptcha(scriptUrl); + const captcha: Turnstile = await loadCaptcha(); const errorCodes: (string | number)[] = []; let captchaToken = ''; diff --git a/packages/clerk-js/src/utils/captcha/types.ts b/packages/clerk-js/src/utils/captcha/types.ts index ac38b190ed1..d7cb1eb2c5f 100644 --- a/packages/clerk-js/src/utils/captcha/types.ts +++ b/packages/clerk-js/src/utils/captcha/types.ts @@ -2,7 +2,6 @@ import type { CaptchaProvider, CaptchaWidgetType } from '@clerk/types'; export type CaptchaOptions = { siteKey: string; - scriptUrl: string; widgetType: CaptchaWidgetType; invisibleSiteKey: string; captchaProvider: CaptchaProvider;