chore(clerk-js): Deprecate experimental captcha from Clerk singleton (#…

…1905)

.changeset/wild-moons-develop.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Deprecate experimental captcha from Clerk singleton.

packages/clerk-js/src/core/clerk.ts

@@ -224,7 +224,15 @@ export default class Clerk implements ClerkInterface {
     return this.#instanceType;
   }
 
+  get isStandardBrowser(): boolean {
+    return this.#options.standardBrowser || false;
+  }
+
+  /**
+   * @deprecated This getter is no longer used internally and will be dropped in the next major version
+   */
   get experimental_canUseCaptcha(): boolean | undefined {
+    deprecated('experimental_canUseCaptcha', 'This is will be dropped in the next major version');
     if (this.#environment) {
       return (
         this.#environment.userSettings.signUp.captcha_enabled &&
@@ -236,15 +244,23 @@ export default class Clerk implements ClerkInterface {
     return false;
   }
 
+  /**
+   * @deprecated This getter is no longer used internally and will be dropped in the next major version
+   */
   get experimental_captchaSiteKey(): string | null {
+    deprecated('experimental_captchaSiteKey', 'This is will be dropped in the next major version');
     if (this.#environment) {
       return this.#environment.displayConfig.captchaPublicKey;
     }
 
     return null;
   }
 
+  /**
+   * @deprecated This getter is no longer used internally and will be dropped in the next major version
+   */
   get experimental_captchaURL(): string | null {
+    deprecated('experimental_captchaURL', 'This is will be dropped in the next major version');
     if (this.#fapiClient) {
       return this.#fapiClient
         .buildUrl({

packages/clerk-js/src/core/resources/SignUp.ts

@@ -26,6 +26,7 @@ import type {
 import { generateSignatureWithMetamask, getCaptchaToken, getMetamaskIdentifier, windowNavigate } from '../../utils';
 import { createValidatePassword } from '../../utils/passwords/password';
 import { normalizeUnsafeMetadata } from '../../utils/resourceParams';
+import { retrieveCaptchaInfo } from '../../utils/retrieveCaptchaInfo';
 import {
   clerkInvalidFAPIResponse,
   clerkMissingOptionError,
@@ -70,13 +71,13 @@ export class SignUp extends BaseResource implements SignUpResource {
 
   create = async (params: SignUpCreateParams): Promise<SignUpResource> => {
     const paramsWithCaptcha: Record<string, unknown> = params;
-    const { experimental_captchaSiteKey, experimental_canUseCaptcha, experimental_captchaURL } = SignUp.clerk;
+    const { captchaSiteKey, canUseCaptcha, captchaURL } = retrieveCaptchaInfo(SignUp.clerk);
 
-    if (experimental_canUseCaptcha && experimental_captchaSiteKey && experimental_captchaURL) {
+    if (canUseCaptcha && captchaSiteKey && captchaURL) {
       try {
         paramsWithCaptcha.captchaToken = await getCaptchaToken({
-          siteKey: experimental_captchaSiteKey,
-          scriptUrl: experimental_captchaURL,
+          siteKey: captchaSiteKey,
+          scriptUrl: captchaURL,
         });
       } catch (e) {
         if (e.captchaError) {

packages/clerk-js/src/utils/retrieveCaptchaInfo.ts

@@ -0,0 +1,22 @@
+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);
+  return {
+    captchaSiteKey: _environment ? _environment.displayConfig.captchaPublicKey : null,
+    canUseCaptcha: _environment
+      ? _environment.userSettings.signUp.captcha_enabled &&
+        clerk.isStandardBrowser &&
+        clerk.instanceType === 'production'
+      : null,
+    captchaURL: fapiClient
+      .buildUrl({
+        path: 'cloudflare/turnstile/v0/api.js',
+        pathPrefix: '',
+        search: '?render=explicit',
+      })
+      .toString(),
+  };
+};

packages/types/src/clerk.ts

@@ -87,8 +87,12 @@ export interface Clerk {
   /** Clerk Flag for satellite apps. */
   isSatellite: boolean;
 
+  /** Clerk Instance type is defined from the Publishable key */
   instanceType?: InstanceType;
 
+  /** Clerk flag for loading Clerk in a standard browser setup */
+  isStandardBrowser?: boolean;
+
   /** Client handling most Clerk operations. */
   client?: ClientResource;
 
@@ -777,8 +781,8 @@ export type UserButtonProps = {
    */
   showName?: boolean;
   /**
-   Controls the default state of the UserButton
-   */
+     Controls the default state of the UserButton
+     */
   defaultOpen?: boolean;
   /**
    * Full URL or path to navigate after sign out is complete
@@ -838,8 +842,8 @@ type LooseExtractedParams<T extends string> = `:${T}` | (string & NonNullable<un
 
 export type OrganizationSwitcherProps = {
   /**
-   Controls the default state of the OrganizationSwitcher
-   */
+     Controls the default state of the OrganizationSwitcher
+     */
   defaultOpen?: boolean;
   /**
    * By default, users can switch between organization and their personal account.