feat(types,clerk-js): Bypass captcha for providers dynamically provided in environment (#4322)

Author: nikosdouvlis

.changeset/shy-peaches-grow.md

@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": patch
+"@clerk/types": patch
+---
+
+Bypass captcha for providers dynamically provided in environment

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

@@ -4,6 +4,7 @@ import type {
   DisplayConfigJSON,
   DisplayConfigResource,
   DisplayThemeJSON,
+  OAuthStrategy,
   PreferredSignInStrategy,
 } from '@clerk/types';
 
@@ -24,6 +25,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
   captchaWidgetType: CaptchaWidgetType = null;
   captchaProvider: CaptchaProvider = 'turnstile';
   captchaPublicKeyInvisible: string | null = null;
+  captchaOauthBypass: OAuthStrategy[] = [];
   homeUrl!: string;
   instanceEnvironmentType!: string;
   faviconImageUrl!: string;
@@ -74,6 +76,9 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
     this.captchaWidgetType = data.captcha_widget_type;
     this.captchaProvider = data.captcha_provider;
     this.captchaPublicKeyInvisible = data.captcha_public_key_invisible;
+    // These are the OAuth strategies we used to bypass the captcha for by default
+    // before the introduction of the captcha_oauth_bypass field
+    this.captchaOauthBypass = data.captcha_oauth_bypass || ['oauth_google', 'oauth_microsoft', 'oauth_apple'];
     this.supportEmail = data.support_email || '';
     this.clerkJSVersion = data.clerk_js_version;
     this.organizationProfileUrl = data.organization_profile_url;

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

@@ -324,18 +324,19 @@ export class SignUp extends BaseResource implements SignUpResource {
    * We delegate bot detection to the following providers, instead of relying on turnstile exclusively
    */
   protected shouldBypassCaptchaForAttempt(params: SignUpCreateParams) {
-    if (
-      params.strategy === 'oauth_google' ||
-      params.strategy === 'oauth_microsoft' ||
-      params.strategy === 'oauth_apple'
-    ) {
+    if (!params.strategy) {
+      return false;
+    }
+
+    const captchaOauthBypass = SignUp.clerk.__unstable__environment!.displayConfig.captchaOauthBypass;
+
+    if (captchaOauthBypass.some(strategy => strategy === params.strategy)) {
       return true;
     }
+
     if (
       params.transfer &&
-      (SignUp.clerk.client?.signIn.firstFactorVerification.strategy === 'oauth_google' ||
-        SignUp.clerk.client?.signIn.firstFactorVerification.strategy === 'oauth_microsoft' ||
-        SignUp.clerk.client?.signIn.firstFactorVerification.strategy === 'oauth_apple')
+      captchaOauthBypass.some(strategy => strategy === SignUp.clerk.client!.signIn.firstFactorVerification.strategy)
     ) {
       return true;
     }

packages/types/src/displayConfig.ts

@@ -1,5 +1,6 @@
 import type { DisplayThemeJSON } from './json';
 import type { ClerkResource } from './resource';
+import type { OAuthStrategy } from './strategies';
 
 export type PreferredSignInStrategy = 'password' | 'otp';
 export type CaptchaWidgetType = 'smart' | 'invisible' | null;
@@ -19,6 +20,7 @@ export interface DisplayConfigJSON {
   captcha_widget_type: CaptchaWidgetType;
   captcha_public_key_invisible: string | null;
   captcha_provider: CaptchaProvider;
+  captcha_oauth_bypass: OAuthStrategy[] | null;
   home_url: string;
   instance_environment_type: string;
   logo_image_url: string;
@@ -52,6 +54,12 @@ export interface DisplayConfigResource extends ClerkResource {
   captchaWidgetType: CaptchaWidgetType;
   captchaProvider: CaptchaProvider;
   captchaPublicKeyInvisible: string | null;
+  /**
+   * An array of OAuth strategies for which we will bypass the captcha.
+   * We trust that the provider will verify that the user is not a bot on their end.
+   * This can also be used to bypass the captcha for a specific OAuth provider on a per-instance basis.
+   */
+  captchaOauthBypass: OAuthStrategy[];
   homeUrl: string;
   instanceEnvironmentType: string;
   logoImageUrl: string;