From ea62ac3283adec853b36bb501c1d552e0813ebf8 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Wed, 30 Jul 2025 11:02:23 +0300 Subject: [PATCH 1/2] chore(clerk-js,react,types): Expose fapi version --- .changeset/hip-ideas-cheat.md | 7 +++++++ packages/clerk-js/src/core/clerk.ts | 12 +++++++++++- packages/react/src/isomorphicClerk.ts | 4 ++++ packages/types/src/clerk.ts | 5 +++++ 4 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 .changeset/hip-ideas-cheat.md diff --git a/.changeset/hip-ideas-cheat.md b/.changeset/hip-ideas-cheat.md new file mode 100644 index 00000000000..2e86b105013 --- /dev/null +++ b/.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`. diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 7bcc3910e05..42b34483924 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/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,10 @@ export class Clerk implements ClerkInterface { return Clerk.sdkMetadata; } + get apiVersion(): string { + return SUPPORTED_FAPI_VERSION; + } + get loaded(): boolean { return this.status === 'degraded' || this.status === 'ready'; } diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts index 8e7deb0ce02..c3911c8e4ca 100644 --- a/packages/react/src/isomorphicClerk.ts +++ b/packages/react/src/isomorphicClerk.ts @@ -652,6 +652,10 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { return this.clerkjs?.version; } + get apiVersion() { + return this.clerkjs?.apiVersion; + } + get client(): ClientResource | undefined { if (this.clerkjs) { return this.clerkjs.client; diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts index 290d0adaafb..49f857eca7b 100644 --- a/packages/types/src/clerk.ts +++ b/packages/types/src/clerk.ts @@ -165,6 +165,11 @@ export interface Clerk { */ version: string | undefined; + /** + * The version of the Clerk Frontend API that the SDK is using. + */ + apiVersion: string | undefined; + /** * If present, contains information about the SDK that the host application is using. * For example, if Clerk is loaded through `@clerk/nextjs`, this would be `{ name: '@clerk/nextjs', version: '1.0.0' }` From ee7bf97cb53b3bcd619934d7269f716f6ede85b2 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Thu, 31 Jul 2025 13:56:20 +0300 Subject: [PATCH 2/2] introduce a `Clerk.debug()` with the `info` property --- packages/clerk-js/src/core/clerk.ts | 13 +++++++++++-- packages/react/src/isomorphicClerk.ts | 6 ++++-- packages/types/src/clerk.ts | 19 ++++++++++++++----- 3 files changed, 29 insertions(+), 9 deletions(-) diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 42b34483924..d657127f3a4 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -281,8 +281,17 @@ export class Clerk implements ClerkInterface { return Clerk.sdkMetadata; } - get apiVersion(): string { - return SUPPORTED_FAPI_VERSION; + debug() { + return { + info: Object.freeze({ + version: this.version, + frontendApi: Object.freeze({ + version: SUPPORTED_FAPI_VERSION, + host: this.frontendApi, + }), + loadedOptions: { ...this.#options }, + }), + }; } get loaded(): boolean { diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts index c3911c8e4ca..1fe822117e7 100644 --- a/packages/react/src/isomorphicClerk.ts +++ b/packages/react/src/isomorphicClerk.ts @@ -104,6 +104,7 @@ type IsomorphicLoadedClerk = Without< | '__internal_reloadInitialResources' | 'billing' | 'apiKeys' + | 'debug' | '__internal_setComponentNavigationContext' | '__internal_setActiveInProgress' | '__internal_hasAfterAuthFlows' @@ -111,6 +112,7 @@ type IsomorphicLoadedClerk = Without< client: ClientResource | undefined; billing: CommerceBillingNamespace | undefined; apiKeys: APIKeysNamespace | undefined; + debug: ReturnType; }; export class IsomorphicClerk implements IsomorphicLoadedClerk { @@ -652,8 +654,8 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { return this.clerkjs?.version; } - get apiVersion() { - return this.clerkjs?.apiVersion; + get debug() { + return this.clerkjs?.debug?.() as ReturnType; } get client(): ClientResource | undefined { diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts index 49f857eca7b..54a7e918c46 100644 --- a/packages/types/src/clerk.ts +++ b/packages/types/src/clerk.ts @@ -165,17 +165,26 @@ export interface Clerk { */ version: string | undefined; - /** - * The version of the Clerk Frontend API that the SDK is using. - */ - apiVersion: string | undefined; - /** * If present, contains information about the SDK that the host application is using. * For example, if Clerk is loaded through `@clerk/nextjs`, this would be `{ name: '@clerk/nextjs', version: '1.0.0' }` */ 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. */