feat(clerk-js,clerk-react,types): Expose fapi version

.changeset/hip-ideas-cheat.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+Expose the frontend api version the clerk instance is using via `Clerk.apiVersion`.

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

@@ -126,7 +126,13 @@ import { memoizeListenerCallback } from '../utils/memoizeStateListenerCallback';
 import { RedirectUrls } from '../utils/redirectUrls';
 import { AuthCookieService } from './auth/AuthCookieService';
 import { CaptchaHeartbeat } from './auth/CaptchaHeartbeat';
-import { CLERK_SATELLITE_URL, CLERK_SUFFIXED_COOKIES, CLERK_SYNCED, ERROR_CODES } from './constants';
+import {
+  CLERK_SATELLITE_URL,
+  CLERK_SUFFIXED_COOKIES,
+  CLERK_SYNCED,
+  ERROR_CODES,
+  SUPPORTED_FAPI_VERSION,
+} from './constants';
 import {
   clerkErrorInitFailed,
   clerkInvalidSignInUrlFormat,
@@ -275,6 +281,19 @@ export class Clerk implements ClerkInterface {
     return Clerk.sdkMetadata;
   }
 
+  debug() {
+    return {
+      info: Object.freeze({
+        version: this.version,
+        frontendApi: Object.freeze({
+          version: SUPPORTED_FAPI_VERSION,
+          host: this.frontendApi,
+        }),
+        loadedOptions: { ...this.#options },
+      }),
+    };
+  }
+
   get loaded(): boolean {
     return this.status === 'degraded' || this.status === 'ready';
   }

packages/react/src/isomorphicClerk.ts

@@ -104,13 +104,15 @@ type IsomorphicLoadedClerk = Without<
   | '__internal_reloadInitialResources'
   | 'billing'
   | 'apiKeys'
+  | 'debug'
   | '__internal_setComponentNavigationContext'
   | '__internal_setActiveInProgress'
   | '__internal_hasAfterAuthFlows'
 > & {
   client: ClientResource | undefined;
   billing: CommerceBillingNamespace | undefined;
   apiKeys: APIKeysNamespace | undefined;
+  debug: ReturnType<LoadedClerk['debug']>;
 };
 
 export class IsomorphicClerk implements IsomorphicLoadedClerk {
@@ -652,6 +654,10 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     return this.clerkjs?.version;
   }
 
+  get debug() {
+    return this.clerkjs?.debug?.() as ReturnType<LoadedClerk['debug']>;
+  }
+
   get client(): ClientResource | undefined {
     if (this.clerkjs) {
       return this.clerkjs.client;

packages/types/src/clerk.ts

@@ -171,6 +171,20 @@
    */
   sdkMetadata: SDKMetadata | undefined;
 
+  /**
+   * Returns a snapshot of data through the `info` property. It can be used during debugging sessions.
+   */
+  debug: () => {
+    info: {
+      version: string;
+      frontendApi: {
+        version: string;
+        host: string;
+      };
+      loadedOptions?: ClerkOptions;
+    };
+  };
+
   /**
    * If true the bootstrapping of Clerk.load() has completed successfully.
    */
@@ -1138,7 +1152,7 @@
      */
     windowNavigate: (to: URL | string) => void;
   },
 ) => Promise<unknown> | unknown;
 
 export type WithoutRouting<T> = Omit<T, 'path' | 'routing'>;