chore(clerk-js): Utilize the action property of Turnstile

.changeset/sixty-ways-melt.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Pass the `action` property to Turnstile

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

@@ -27,7 +27,7 @@ export class CaptchaHeartbeat {
     }
 
     try {
-      const params = await this.captchaChallenge.invisible();
+      const params = await this.captchaChallenge.invisible({ action: 'heartbeat' });
       await this.clerk.client.sendCaptchaToken(params);
     } catch {
       // Ignore unhandled errors

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

@@ -62,6 +62,6 @@ export class FraudProtection {
   }
 
   public managedChallenge(clerk: Clerk) {
-    return new this.CaptchaChallengeImpl(clerk).managedInModal();
+    return new this.CaptchaChallengeImpl(clerk).managedInModal({ action: 'verify' });
   }
 }

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

@@ -86,7 +86,7 @@ export class SignUp extends BaseResource implements SignUpResource {
 
     if (!__BUILD_DISABLE_RHC__ && !this.clientBypass() && !this.shouldBypassCaptchaForAttempt(params)) {
       const captchaChallenge = new CaptchaChallenge(SignUp.clerk);
-      const captchaParams = await captchaChallenge.managedOrInvisible();
+      const captchaParams = await captchaChallenge.managedOrInvisible({ action: 'signup' });
       if (!captchaParams) {
         throw new ClerkRuntimeError('', { code: 'captcha_unavailable' });
       }

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

@@ -11,7 +11,7 @@ export class CaptchaChallenge {
    * This will always use the non-interactive variant of the CAPTCHA challenge and will
    * always use the fallback key.
    */
-  public async invisible() {
+  public async invisible(opts?: Partial<CaptchaOptions>) {
     const { captchaSiteKey, canUseCaptcha, captchaPublicKeyInvisible } = retrieveCaptchaInfo(this.clerk);
 
     if (canUseCaptcha && captchaSiteKey && captchaPublicKeyInvisible) {
@@ -20,6 +20,7 @@ export class CaptchaChallenge {
         invisibleSiteKey: captchaPublicKeyInvisible,
         widgetType: 'invisible',
         captchaProvider: 'turnstile',
+        action: opts?.action,
       }).catch(e => {
         if (e.captchaError) {
           return { captchaError: e.captchaError };
@@ -65,12 +66,13 @@ export class CaptchaChallenge {
    * Similar to managed() but will render the CAPTCHA challenge in a modal
    * managed by clerk-js itself.
    */
-  public async managedInModal() {
+  public async managedInModal(opts?: Partial<CaptchaOptions>) {
     return this.managedOrInvisible({
       modalWrapperQuerySelector: '#cl-modal-captcha-wrapper',
       modalContainerQuerySelector: '#cl-modal-captcha-container',
       openModal: () => this.clerk.__internal_openBlankCaptchaModal(),
       closeModal: () => this.clerk.__internal_closeBlankCaptchaModal(),
+      action: opts?.action,
     });
   }
 }

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

@@ -58,6 +58,12 @@ interface RenderOptions {
    * @default 'always'
    */
   appearance?: 'always' | 'execute' | 'interaction-only';
+  /**
+   * A custom value that can be used to differentiate widgets under the same sitekey
+   * in analytics and which is returned upon validation. This can only contain up to
+   * 32 alphanumeric characters including _ and -.
+   */
+  action?: string;
 }
 
 interface Turnstile {
@@ -166,6 +172,7 @@ export const getTurnstileToken = async (opts: CaptchaOptions) => {
         const id = captcha.render(widgetContainerQuerySelector, {
           sitekey: turnstileSiteKey,
           appearance: 'interaction-only',
+          action: opts.action,
           retry: 'never',
           'refresh-expired': 'auto',
           callback: function (token: string) {

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

@@ -9,6 +9,7 @@ export type CaptchaOptions = {
   modalWrapperQuerySelector?: string;
   openModal?: () => Promise<unknown>;
   closeModal?: () => Promise<unknown>;
+  action?: 'verify' | 'signup' | 'heartbeat';
 };
 
 export type GetCaptchaTokenReturn = {