fix(clerk-js): Collect captcha on first tokens call

.changeset/long-rabbits-ring.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Collect captcha token on load

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

@@ -1,10 +1,12 @@
 import { setDevBrowserJWTInURL } from '@clerk/shared/devBrowser';
 import { is4xxError, isClerkAPIResponseError, isNetworkError } from '@clerk/shared/error';
-import type { Clerk, EnvironmentResource } from '@clerk/types';
+import type { EnvironmentResource } from '@clerk/types';
 
 import { clerkCoreErrorTokenRefreshFailed, clerkMissingDevBrowserJwt } from '../errors';
 import { eventBus, events } from '../events';
 import type { FapiClient } from '../fapiClient';
+import type { Clerk } from '../resources/internal';
+import { SessionTokenCache } from '../tokenCache';
 import type { ClientUatCookieHandler } from './cookies/clientUat';
 import { createClientUatCookie } from './cookies/clientUat';
 import type { SessionCookieHandler } from './cookies/session';
@@ -103,6 +105,19 @@ export class AuthCookieService {
     return setDevBrowserJWTInURL(url, devBrowserJwt);
   }
 
+  /**
+   * Will refresh the session token immediately once
+   * if the captcha heartbeat flag is enabled.
+   * We want to do this to ensure that we collect at least one token
+   * even for short-lived sessions.
+   */
+  public forceRefreshSessionToken() {
+    if (this.clerk.__unstable__environment?.displayConfig.captchaHeartbeat) {
+      SessionTokenCache.clear();
+      void this.refreshSessionToken();
+    }
+  }
+
   private startPollingForToken() {
     if (!this.poller) {
       this.poller = new SessionCookiePoller();

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

@@ -1828,8 +1828,8 @@ export class Clerk implements ClerkInterface {
       }
     }
 
+    this.#authService?.forceRefreshSessionToken();
     this.#clearClerkQueryParams();
-
     this.#handleImpersonationFab();
     return true;
   };