feat(clerk-js): Allow token refresh when Client failed to resolve

.changeset/good-penguins-agree.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Allow token refresh when Client failed to resolve.

integration/testUtils/index.ts

@@ -55,6 +55,11 @@ const createExpectPageObject = ({ page }: TestArgs) => {
 
 const createClerkUtils = ({ page }: TestArgs) => {
  return {
+ toBeLoaded: async () => {
+ return page.waitForFunction(() => {
+ return !!window.Clerk?.loaded;
+ });
+ },
  getClientSideUser: () => {
  return page.evaluate(() => {
  return window.Clerk?.user;

integration/tests/resiliency.test.ts

@@ -0,0 +1,78 @@
+import { test } from '@playwright/test';
+
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../testUtils';
+
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('resiliency @generic', ({ app }) => {
+ test.describe.configure({ mode: 'serial' });
+
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ const u = createTestUtils({ app });
+ fakeUser = u.services.users.createFakeUser();
+ await u.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('signed in users can get a fresh session token when Client fails to load', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ await u.po.signIn.goTo();
+
+ let waitForClientImmediately = page.waitForResponse(response => response.url().includes('/sign_ins'), {
+ timeout: 3_000,
+ });
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+
+ const clientReponse = await waitForClientImmediately;
+ const d = await clientReponse.json();
+
+ await u.po.expect.toBeSignedIn();
+
+ // Simulate developer coming back and client fails to load.
+ await page.route('**/v1/client?**', route => {
+ return route.fulfill({
+ status: 500,
+ body: JSON.stringify({
+ errors: [
+ {
+ message: 'Oops, an unexpected error occurred',
+ long_message:
+ "There was an internal error on our servers. We've been notified and are working on fixing it.",
+ code: 'internal_clerk_error',
+ },
+ ],
+ clerk_trace_id: 'some-trace-id',
+ }),
+ });
+ });
+ await page.reload();
+
+ waitForClientImmediately = page.waitForResponse(
+ response => response.url().includes('/client?') && response.status() === 500,
+ { timeout: 3_000 },
+ );
+
+ const waitForTokenImmediately = page.waitForResponse(
+ response =>
+ response.url().includes('/tokens?') && response.status() === 200 && response.request().method() === 'POST',
+ { timeout: 3_000 },
+ );
+
+ await page.waitForLoadState('domcontentloaded');
+
+ await waitForClientImmediately;
+ await waitForTokenImmediately;
+
+ // Wait for the client to be loaded. and the internal `getToken({skipCache: true})` to have been completed.
+ await u.po.clerk.toBeLoaded();
+
+ await u.po.expect.toBeSignedIn();
+ });
+});

integration/tests/reverification.test.ts

@@ -153,7 +153,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withReverification] })(
  await expect(u.page.locator('.cl-profileSectionItem__emailAddresses')).not.toContainText(newFakeEmail);
  });
 
- test('reverification propmt when deleting account', async ({ page, context }) => {
+ test('reverification prompt when deleting account', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  const delFakeUser = u.services.users.createFakeUser({
  withUsername: true,

packages/clerk-js/bundlewatch.config.json

@@ -1,8 +1,8 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "576kB" },
+ { "path": "./dist/clerk.js", "maxSize": "577kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "78kB" },
- { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
+ { "path": "./dist/clerk.headless.js", "maxSize": "51KB" },
  { "path": "./dist/ui-common*.js", "maxSize": "94KB" },
  { "path": "./dist/vendors*.js", "maxSize": "30KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },

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

@@ -1,6 +1,6 @@
 import { createCookieHandler } from '@clerk/shared/cookie';
 import { setDevBrowserJWTInURL } from '@clerk/shared/devBrowser';
-import { is4xxError, isClerkAPIResponseError, isNetworkError } from '@clerk/shared/error';
+import { is4xxError, isClerkAPIResponseError } from '@clerk/shared/error';
 import type { Clerk, InstanceType } from '@clerk/types';
 
 import { clerkCoreErrorTokenRefreshFailed, clerkMissingDevBrowserJwt } from '../errors';
@@ -183,12 +183,6 @@ export class AuthCookieService {
  void this.clerk.handleUnauthenticated();
  return;
  }
-
- if (isNetworkError(e)) {
- return;
- }
-
- clerkCoreErrorTokenRefreshFailed(e.toString());
  }
 
  /**
@@ -216,4 +210,8 @@ export class AuthCookieService {
 
  return this.clerk.organization?.id === activeOrganizationId;
  }
+
+ public getSessionCookie() {
+ return this.sessionCookie.get();
+ }
 }

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

@@ -3,7 +3,7 @@ import { createWorkerTimers } from '@clerk/shared/workerTimers';
 import { SafeLock } from './safeLock';
 
 const REFRESH_SESSION_TOKEN_LOCK_KEY = 'clerk.lock.refreshSessionToken';
-const INTERVAL_IN_MS = 5 * 1000;
+const INTERVAL_IN_MS = 5 * 1_000;
 
 export class SessionCookiePoller {
  private lock = SafeLock(REFRESH_SESSION_TOKEN_LOCK_KEY);

packages/clerk-js/src/core/auth/cookies/session.ts

@@ -10,6 +10,7 @@ const SESSION_COOKIE_NAME = '__session';
 export type SessionCookieHandler = {
  set: (token: string) => void;
  remove: () => void;
+ get: () => string | undefined;
 };
 
 /**
@@ -35,8 +36,11 @@ export const createSessionCookie = (cookieSuffix: string): SessionCookieHandler
  sessionCookie.set(token, { expires, sameSite, secure });
  };
 
+ const get = () => suffixedSessionCookie.get() || sessionCookie.get();
+
  return {
  set,
  remove,
+ get,
  };
 };

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

@@ -121,6 +121,7 @@ import {
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
+import { createClientFromJwt } from './jwt-client';
 import { __experimental_Commerce } from './modules/commerce';
 import {
  BaseResource,
@@ -2052,10 +2053,26 @@ export class Clerk implements ClerkInterface {
  this.updateEnvironment(res);
  });
 
- const initClient = () => {
+ const initClient = async () => {
  return Client.getOrCreateInstance()
  .fetch()
- .then(res => this.updateClient(res));
+ .then(res => this.updateClient(res))
+ .catch(async e => {
+ if (isClerkAPIResponseError(e) && e.errors[0].code === 'requires_captcha') {
+ throw e;
+ }
+
+ const jwtInCookie = this.#authService?.getSessionCookie();
+ const localClient = createClientFromJwt(jwtInCookie);
+
+ this.updateClient(localClient);
+
+ // Always grab a fresh token
+ await this.session?.getToken({ skipCache: true });
+
+ // Allows for Clerk to be marked as loaded with the client and session created from the JWT.
+ return null;
+ });
  };
 
  const initComponents = () => {

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

@@ -0,0 +1,97 @@
+import type {
+ ClientJSON,
+ OrganizationMembershipJSON,
+ PartialWithClerkResource,
+ PublicUserDataJSON,
+ SessionJSON,
+ TokenJSON,
+ UserJSON,
+} from '@clerk/types';
+
+import { Token } from './resources';
+import { Client } from './resources/Client';
+
+/**
+ * Create a new client instance from a jwt.
+ * The caller is responsible for reading the jwt from the `__session` cookie.
+ */
+export function createClientFromJwt(jwt: string | undefined | null): Client {
+ // Use `Token` class to parse the JWT token
+ let token: Token | null;
+
+ try {
+ token = new Token({
+ jwt: jwt || '',
+ object: 'token',
+ // @ts-expect-error - ts is not happy about it, but this is allowed
+ id: undefined,
+ });
+ } catch {
+ // If the token is invalid, return null
+ token = null;
+ }
+
+ // Clean up singleton instance
+ Client.clearInstance();
+
+ if (!token?.jwt) {
+ return Client.getOrCreateInstance({
+ object: 'client',
+ last_active_session_id: null,
+ id: 'client_init',
+ sessions: [],
+ } as unknown as ClientJSON);
+ }
+
+ const { sid, sub, org_id, org_role, org_permissions, org_slug, fva } = token.jwt.claims;
+
+ const defaultClient = {
+ object: 'client',
+ last_active_session_id: sid,
+ id: 'client_init',
+ sessions: [
+ {
+ object: 'session',
+ id: sid,
+ status: 'active',
+ last_active_organization_id: org_id || null,
+ // @ts-expect-error - ts is not happy about `id:undefined`, but this is allowed and expected
+ last_active_token: {
+ id: undefined,
+ object: 'token',
+ jwt,
+ } as TokenJSON,
+ factor_verification_age: fva || null,
+ public_user_data: {
+ user_id: sub,
+ } as PublicUserDataJSON,
+ user: {
+ object: 'user',
+ id: sub,
+ organization_memberships:
+ org_id && org_slug && org_role
+ ? [
+ {
+ object: 'organization_membership',
+ id: org_id,
+ role: org_role,
+ permissions: org_permissions || [],
+ organization: {
+ object: 'organization',
+ id: org_id,
+ // Use slug as name for the organization, since name is not available in the token.
+ name: org_slug,
+ slug: org_slug,
+ members_count: 1,
+ max_allowed_memberships: 1,
+ },
+ } as PartialWithClerkResource<OrganizationMembershipJSON>,
+ ]
+ : [],
+ } as PartialWithClerkResource<UserJSON>,
+ } as PartialWithClerkResource<SessionJSON>,
+ ],
+ } as ClientJSON;
+
+ return Client.getOrCreateInstance(defaultClient);
+}

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

@@ -1,11 +1,11 @@
-import {
-type ActiveSessionResource,
-type ClientJSON,
-type ClientJSONSnapshot,
-type ClientResource,
-type SignedInSessionResource,
-type SignInResource,
-type SignUpResource,
+import type {
+ ActiveSessionResource,
+ ClientJSON,
+ ClientJSONSnapshot,
+ ClientResource,
+ SignedInSessionResource,
+ SignInResource,
+ SignUpResource,
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
@@ -140,7 +140,6 @@ export class Client extends BaseResource implements ClientResource {
  public __internal_toSnapshot(): ClientJSONSnapshot {
  return {
  object: 'client',
- status: null,
  id: this.id || '',
  sessions: this.sessions.map(s => s.__internal_toSnapshot()),
  sign_up: this.signUp.__internal_toSnapshot(),

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

@@ -269,13 +269,13 @@ export class Organization extends BaseResource implements OrganizationResource {
  this.id = data.id;
  this.name = data.name;
  this.slug = data.slug;
- this.imageUrl = data.image_url;
- this.hasImage = data.has_image;
- this.publicMetadata = data.public_metadata;
- this.membersCount = data.members_count;
- this.pendingInvitationsCount = data.pending_invitations_count;
- this.maxAllowedMemberships = data.max_allowed_memberships;
- this.adminDeleteEnabled = data.admin_delete_enabled;
+ this.imageUrl = data.image_url || '';
+ this.hasImage = data.has_image || false;
+ this.publicMetadata = data.public_metadata || {};
+ this.membersCount = data.members_count || 0;
+ this.pendingInvitationsCount = data.pending_invitations_count || 0;
+ this.maxAllowedMemberships = data.max_allowed_memberships || 0;
+ this.adminDeleteEnabled = data.admin_delete_enabled || false;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);
  return this;

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

@@ -69,7 +69,7 @@ export class OrganizationMembership extends BaseResource implements Organization
 
  this.id = data.id;
  this.organization = new Organization(data.organization);
- this.publicMetadata = data.public_metadata;
+ this.publicMetadata = data.public_metadata || {};
  if (data.public_user_data) {
  this.publicUserData = new PublicUserData(data.public_user_data);
  }

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

@@ -14,11 +14,11 @@ export class PublicUserData implements IPublicUserData {
 
  protected fromJSON(data: PublicUserDataJSON | PublicUserDataJSONSnapshot | null): this {
  if (data) {
- this.firstName = data.first_name;
- this.lastName = data.last_name;
- this.imageUrl = data.image_url;
- this.hasImage = data.has_image;
- this.identifier = data.identifier;
+ this.firstName = data.first_name || null;
+ this.lastName = data.last_name || null;
+ this.imageUrl = data.image_url || '';
+ this.hasImage = data.has_image || false;
+ this.identifier = data.identifier || '';
  this.userId = data.user_id;
  }
 
@@ -27,8 +27,6 @@ export class PublicUserData implements IPublicUserData {
 
  public __internal_toSnapshot(): PublicUserDataJSONSnapshot {
  return {
- object: 'public_user_data',
- id: this.userId || '',
  first_name: this.firstName,
  last_name: this.lastName,
  image_url: this.imageUrl,

.changeset/good-penguins-agree.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Allow token refresh when Client failed to resolve.

integration/testUtils/index.ts

@@ -55,6 +55,11 @@ const createExpectPageObject = ({ page }: TestArgs) => {
 
 const createClerkUtils = ({ page }: TestArgs) => {
  return {
+ toBeLoaded: async () => {
+ return page.waitForFunction(() => {
+ return !!window.Clerk?.loaded;
+ });
+ },
  getClientSideUser: () => {
  return page.evaluate(() => {
  return window.Clerk?.user;

integration/tests/resiliency.test.ts

@@ -0,0 +1,78 @@
+import { test } from '@playwright/test';
+
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../testUtils';
+
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('resiliency @generic', ({ app }) => {
+ test.describe.configure({ mode: 'serial' });
+
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ const u = createTestUtils({ app });
+ fakeUser = u.services.users.createFakeUser();
+ await u.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('signed in users can get a fresh session token when Client fails to load', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ await u.po.signIn.goTo();
+
+ let waitForClientImmediately = page.waitForResponse(response => response.url().includes('/sign_ins'), {
+ timeout: 3_000,
+ });
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+
+ const clientReponse = await waitForClientImmediately;
+ const d = await clientReponse.json();
+
+ await u.po.expect.toBeSignedIn();
+
+ // Simulate developer coming back and client fails to load.
+ await page.route('**/v1/client?**', route => {
+ return route.fulfill({
+ status: 500,
+ body: JSON.stringify({
+ errors: [
+ {
+ message: 'Oops, an unexpected error occurred',
+ long_message:
+ "There was an internal error on our servers. We've been notified and are working on fixing it.",
+ code: 'internal_clerk_error',
+ },
+ ],
+ clerk_trace_id: 'some-trace-id',
+ }),
+ });
+ });
+ await page.reload();
+
+ waitForClientImmediately = page.waitForResponse(
+ response => response.url().includes('/client?') && response.status() === 500,
+ { timeout: 3_000 },
+ );
+
+ const waitForTokenImmediately = page.waitForResponse(
+ response =>
+ response.url().includes('/tokens?') && response.status() === 200 && response.request().method() === 'POST',
+ { timeout: 3_000 },
+ );
+
+ await page.waitForLoadState('domcontentloaded');
+
+ await waitForClientImmediately;
+ await waitForTokenImmediately;
+
+ // Wait for the client to be loaded. and the internal `getToken({skipCache: true})` to have been completed.
+ await u.po.clerk.toBeLoaded();
+
+ await u.po.expect.toBeSignedIn();
+ });
+});

integration/tests/reverification.test.ts

@@ -153,7 +153,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withReverification] })(
  await expect(u.page.locator('.cl-profileSectionItem__emailAddresses')).not.toContainText(newFakeEmail);
  });
 
- test('reverification propmt when deleting account', async ({ page, context }) => {
+ test('reverification prompt when deleting account', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  const delFakeUser = u.services.users.createFakeUser({
  withUsername: true,

packages/clerk-js/bundlewatch.config.json

@@ -1,8 +1,8 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "576kB" },
+ { "path": "./dist/clerk.js", "maxSize": "577kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "78kB" },
- { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
+ { "path": "./dist/clerk.headless.js", "maxSize": "51KB" },
  { "path": "./dist/ui-common*.js", "maxSize": "94KB" },
  { "path": "./dist/vendors*.js", "maxSize": "30KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },

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

@@ -1,6 +1,6 @@
 import { createCookieHandler } from '@clerk/shared/cookie';
 import { setDevBrowserJWTInURL } from '@clerk/shared/devBrowser';
-import { is4xxError, isClerkAPIResponseError, isNetworkError } from '@clerk/shared/error';
+import { is4xxError, isClerkAPIResponseError } from '@clerk/shared/error';
 import type { Clerk, InstanceType } from '@clerk/types';
 
 import { clerkCoreErrorTokenRefreshFailed, clerkMissingDevBrowserJwt } from '../errors';
@@ -183,12 +183,6 @@ export class AuthCookieService {
  void this.clerk.handleUnauthenticated();
  return;
  }
-
- if (isNetworkError(e)) {
- return;
- }
-
- clerkCoreErrorTokenRefreshFailed(e.toString());
  }
 
  /**
@@ -216,4 +210,8 @@ export class AuthCookieService {
 
  return this.clerk.organization?.id === activeOrganizationId;
  }
+
+ public getSessionCookie() {
+ return this.sessionCookie.get();
+ }
 }

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

@@ -3,7 +3,7 @@ import { createWorkerTimers } from '@clerk/shared/workerTimers';
 import { SafeLock } from './safeLock';
 
 const REFRESH_SESSION_TOKEN_LOCK_KEY = 'clerk.lock.refreshSessionToken';
-const INTERVAL_IN_MS = 5 * 1000;
+const INTERVAL_IN_MS = 5 * 1_000;
 
 export class SessionCookiePoller {
  private lock = SafeLock(REFRESH_SESSION_TOKEN_LOCK_KEY);

packages/clerk-js/src/core/auth/cookies/session.ts

@@ -10,6 +10,7 @@ const SESSION_COOKIE_NAME = '__session';
 export type SessionCookieHandler = {
  set: (token: string) => void;
  remove: () => void;
+ get: () => string | undefined;
 };
 
 /**
@@ -35,8 +36,11 @@ export const createSessionCookie = (cookieSuffix: string): SessionCookieHandler
  sessionCookie.set(token, { expires, sameSite, secure });
  };
 
+ const get = () => suffixedSessionCookie.get() || sessionCookie.get();
+
  return {
  set,
  remove,
+ get,
  };
 };

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

@@ -121,6 +121,7 @@ import {
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
+import { createClientFromJwt } from './jwt-client';
 import { __experimental_Commerce } from './modules/commerce';
 import {
  BaseResource,
@@ -2052,10 +2053,26 @@ export class Clerk implements ClerkInterface {
  this.updateEnvironment(res);
  });
 
- const initClient = () => {
+ const initClient = async () => {
  return Client.getOrCreateInstance()
  .fetch()
- .then(res => this.updateClient(res));
+ .then(res => this.updateClient(res))
+ .catch(async e => {
+ if (isClerkAPIResponseError(e) && e.errors[0].code === 'requires_captcha') {
+ throw e;
+ }
+
+ const jwtInCookie = this.#authService?.getSessionCookie();
+ const localClient = createClientFromJwt(jwtInCookie);
+
+ this.updateClient(localClient);
+
+ // Always grab a fresh token
+ await this.session?.getToken({ skipCache: true });
+
+ // Allows for Clerk to be marked as loaded with the client and session created from the JWT.
+ return null;
+ });
  };
 
  const initComponents = () => {

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

@@ -0,0 +1,97 @@
+import type {
+ ClientJSON,
+ OrganizationMembershipJSON,
+ PartialWithClerkResource,
+ PublicUserDataJSON,
+ SessionJSON,
+ TokenJSON,
+ UserJSON,
+} from '@clerk/types';
+
+import { Token } from './resources';
+import { Client } from './resources/Client';
+
+/**
+ * Create a new client instance from a jwt.
+ * The caller is responsible for reading the jwt from the `__session` cookie.
+ */
+export function createClientFromJwt(jwt: string | undefined | null): Client {
+ // Use `Token` class to parse the JWT token
+ let token: Token | null;
+
+ try {
+ token = new Token({
+ jwt: jwt || '',
+ object: 'token',
+ // @ts-expect-error - ts is not happy about it, but this is allowed
+ id: undefined,
+ });
+ } catch {
+ // If the token is invalid, return null
+ token = null;
+ }
+
+ // Clean up singleton instance
+ Client.clearInstance();
+
+ if (!token?.jwt) {
+ return Client.getOrCreateInstance({
+ object: 'client',
+ last_active_session_id: null,
+ id: 'client_init',
+ sessions: [],
+ } as unknown as ClientJSON);
+ }
+
+ const { sid, sub, org_id, org_role, org_permissions, org_slug, fva } = token.jwt.claims;
+
+ const defaultClient = {
+ object: 'client',
+ last_active_session_id: sid,
+ id: 'client_init',
+ sessions: [
+ {
+ object: 'session',
+ id: sid,
+ status: 'active',
+ last_active_organization_id: org_id || null,
+ // @ts-expect-error - ts is not happy about `id:undefined`, but this is allowed and expected
+ last_active_token: {
+ id: undefined,
+ object: 'token',
+ jwt,
+ } as TokenJSON,
+ factor_verification_age: fva || null,
+ public_user_data: {
+ user_id: sub,
+ } as PublicUserDataJSON,
+ user: {
+ object: 'user',
+ id: sub,
+ organization_memberships:
+ org_id && org_slug && org_role
+ ? [
+ {
+ object: 'organization_membership',
+ id: org_id,
+ role: org_role,
+ permissions: org_permissions || [],
+ organization: {
+ object: 'organization',
+ id: org_id,
+ // Use slug as name for the organization, since name is not available in the token.
+ name: org_slug,
+ slug: org_slug,
+ members_count: 1,
+ max_allowed_memberships: 1,
+ },
+ } as PartialWithClerkResource<OrganizationMembershipJSON>,
+ ]
+ : [],
+ } as PartialWithClerkResource<UserJSON>,
+ } as PartialWithClerkResource<SessionJSON>,
+ ],
+ } as ClientJSON;
+
+ return Client.getOrCreateInstance(defaultClient);
+}

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

@@ -1,11 +1,11 @@
-import {
-type ActiveSessionResource,
-type ClientJSON,
-type ClientJSONSnapshot,
-type ClientResource,
-type SignedInSessionResource,
-type SignInResource,
-type SignUpResource,
+import type {
+ ActiveSessionResource,
+ ClientJSON,
+ ClientJSONSnapshot,
+ ClientResource,
+ SignedInSessionResource,
+ SignInResource,
+ SignUpResource,
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
@@ -140,7 +140,6 @@ export class Client extends BaseResource implements ClientResource {
  public __internal_toSnapshot(): ClientJSONSnapshot {
  return {
  object: 'client',
- status: null,
  id: this.id || '',
  sessions: this.sessions.map(s => s.__internal_toSnapshot()),
  sign_up: this.signUp.__internal_toSnapshot(),

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

@@ -269,13 +269,13 @@ export class Organization extends BaseResource implements OrganizationResource {
  this.id = data.id;
  this.name = data.name;
  this.slug = data.slug;
- this.imageUrl = data.image_url;
- this.hasImage = data.has_image;
- this.publicMetadata = data.public_metadata;
- this.membersCount = data.members_count;
- this.pendingInvitationsCount = data.pending_invitations_count;
- this.maxAllowedMemberships = data.max_allowed_memberships;
- this.adminDeleteEnabled = data.admin_delete_enabled;
+ this.imageUrl = data.image_url || '';
+ this.hasImage = data.has_image || false;
+ this.publicMetadata = data.public_metadata || {};
+ this.membersCount = data.members_count || 0;
+ this.pendingInvitationsCount = data.pending_invitations_count || 0;
+ this.maxAllowedMemberships = data.max_allowed_memberships || 0;
+ this.adminDeleteEnabled = data.admin_delete_enabled || false;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);
  return this;

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

@@ -69,7 +69,7 @@ export class OrganizationMembership extends BaseResource implements Organization
 
  this.id = data.id;
  this.organization = new Organization(data.organization);
- this.publicMetadata = data.public_metadata;
+ this.publicMetadata = data.public_metadata || {};
  if (data.public_user_data) {
  this.publicUserData = new PublicUserData(data.public_user_data);
  }

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

@@ -14,11 +14,11 @@ export class PublicUserData implements IPublicUserData {
 
  protected fromJSON(data: PublicUserDataJSON | PublicUserDataJSONSnapshot | null): this {
  if (data) {
- this.firstName = data.first_name;
- this.lastName = data.last_name;
- this.imageUrl = data.image_url;
- this.hasImage = data.has_image;
- this.identifier = data.identifier;
+ this.firstName = data.first_name || null;
+ this.lastName = data.last_name || null;
+ this.imageUrl = data.image_url || '';
+ this.hasImage = data.has_image || false;
+ this.identifier = data.identifier || '';
  this.userId = data.user_id;
  }
 
@@ -27,8 +27,6 @@ export class PublicUserData implements IPublicUserData {
 
  public __internal_toSnapshot(): PublicUserDataJSONSnapshot {
  return {
- object: 'public_user_data',
- id: this.userId || '',
  first_name: this.firstName,
  last_name: this.lastName,
  image_url: this.imageUrl,

.changeset/good-penguins-agree.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Allow token refresh when Client failed to resolve.

integration/testUtils/index.ts

@@ -55,6 +55,11 @@ const createExpectPageObject = ({ page }: TestArgs) => {
 
 const createClerkUtils = ({ page }: TestArgs) => {
  return {
+ toBeLoaded: async () => {
+ return page.waitForFunction(() => {
+ return !!window.Clerk?.loaded;
+ });
+ },
  getClientSideUser: () => {
  return page.evaluate(() => {
  return window.Clerk?.user;

integration/tests/resiliency.test.ts

@@ -0,0 +1,78 @@
+import { test } from '@playwright/test';
+
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../testUtils';
+
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('resiliency @generic', ({ app }) => {
+ test.describe.configure({ mode: 'serial' });
+
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ const u = createTestUtils({ app });
+ fakeUser = u.services.users.createFakeUser();
+ await u.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('signed in users can get a fresh session token when Client fails to load', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ await u.po.signIn.goTo();
+
+ let waitForClientImmediately = page.waitForResponse(response => response.url().includes('/sign_ins'), {
+ timeout: 3_000,
+ });
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+
+ const clientReponse = await waitForClientImmediately;
+ const d = await clientReponse.json();
+
+ await u.po.expect.toBeSignedIn();
+
+ // Simulate developer coming back and client fails to load.
+ await page.route('**/v1/client?**', route => {
+ return route.fulfill({
+ status: 500,
+ body: JSON.stringify({
+ errors: [
+ {
+ message: 'Oops, an unexpected error occurred',
+ long_message:
+ "There was an internal error on our servers. We've been notified and are working on fixing it.",
+ code: 'internal_clerk_error',
+ },
+ ],
+ clerk_trace_id: 'some-trace-id',
+ }),
+ });
+ });
+ await page.reload();
+
+ waitForClientImmediately = page.waitForResponse(
+ response => response.url().includes('/client?') && response.status() === 500,
+ { timeout: 3_000 },
+ );
+
+ const waitForTokenImmediately = page.waitForResponse(
+ response =>
+ response.url().includes('/tokens?') && response.status() === 200 && response.request().method() === 'POST',
+ { timeout: 3_000 },
+ );
+
+ await page.waitForLoadState('domcontentloaded');
+
+ await waitForClientImmediately;
+ await waitForTokenImmediately;
+
+ // Wait for the client to be loaded. and the internal `getToken({skipCache: true})` to have been completed.
+ await u.po.clerk.toBeLoaded();
+
+ await u.po.expect.toBeSignedIn();
+ });
+});

integration/tests/reverification.test.ts

@@ -153,7 +153,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withReverification] })(
  await expect(u.page.locator('.cl-profileSectionItem__emailAddresses')).not.toContainText(newFakeEmail);
  });
 
- test('reverification propmt when deleting account', async ({ page, context }) => {
+ test('reverification prompt when deleting account', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  const delFakeUser = u.services.users.createFakeUser({
  withUsername: true,

packages/clerk-js/bundlewatch.config.json

@@ -1,8 +1,8 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "576kB" },
+ { "path": "./dist/clerk.js", "maxSize": "577kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "78kB" },
- { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
+ { "path": "./dist/clerk.headless.js", "maxSize": "51KB" },
  { "path": "./dist/ui-common*.js", "maxSize": "94KB" },
  { "path": "./dist/vendors*.js", "maxSize": "30KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },

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

@@ -1,6 +1,6 @@
 import { createCookieHandler } from '@clerk/shared/cookie';
 import { setDevBrowserJWTInURL } from '@clerk/shared/devBrowser';
-import { is4xxError, isClerkAPIResponseError, isNetworkError } from '@clerk/shared/error';
+import { is4xxError, isClerkAPIResponseError } from '@clerk/shared/error';
 import type { Clerk, InstanceType } from '@clerk/types';
 
 import { clerkCoreErrorTokenRefreshFailed, clerkMissingDevBrowserJwt } from '../errors';
@@ -183,12 +183,6 @@ export class AuthCookieService {
  void this.clerk.handleUnauthenticated();
  return;
  }
-
- if (isNetworkError(e)) {
- return;
- }
-
- clerkCoreErrorTokenRefreshFailed(e.toString());
  }
 
  /**
@@ -216,4 +210,8 @@ export class AuthCookieService {
 
  return this.clerk.organization?.id === activeOrganizationId;
  }
+
+ public getSessionCookie() {
+ return this.sessionCookie.get();
+ }
 }

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

@@ -3,7 +3,7 @@ import { createWorkerTimers } from '@clerk/shared/workerTimers';
 import { SafeLock } from './safeLock';
 
 const REFRESH_SESSION_TOKEN_LOCK_KEY = 'clerk.lock.refreshSessionToken';
-const INTERVAL_IN_MS = 5 * 1000;
+const INTERVAL_IN_MS = 5 * 1_000;
 
 export class SessionCookiePoller {
  private lock = SafeLock(REFRESH_SESSION_TOKEN_LOCK_KEY);

packages/clerk-js/src/core/auth/cookies/session.ts

@@ -10,6 +10,7 @@ const SESSION_COOKIE_NAME = '__session';
 export type SessionCookieHandler = {
  set: (token: string) => void;
  remove: () => void;
+ get: () => string | undefined;
 };
 
 /**
@@ -35,8 +36,11 @@ export const createSessionCookie = (cookieSuffix: string): SessionCookieHandler
  sessionCookie.set(token, { expires, sameSite, secure });
  };
 
+ const get = () => suffixedSessionCookie.get() || sessionCookie.get();
+
  return {
  set,
  remove,
+ get,
  };
 };

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

@@ -121,6 +121,7 @@ import {
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
+import { createClientFromJwt } from './jwt-client';
 import { __experimental_Commerce } from './modules/commerce';
 import {
  BaseResource,
@@ -2052,10 +2053,26 @@ export class Clerk implements ClerkInterface {
  this.updateEnvironment(res);
  });
 
- const initClient = () => {
+ const initClient = async () => {
  return Client.getOrCreateInstance()
  .fetch()
- .then(res => this.updateClient(res));
+ .then(res => this.updateClient(res))
+ .catch(async e => {
+ if (isClerkAPIResponseError(e) && e.errors[0].code === 'requires_captcha') {
+ throw e;
+ }
+
+ const jwtInCookie = this.#authService?.getSessionCookie();
+ const localClient = createClientFromJwt(jwtInCookie);
+
+ this.updateClient(localClient);
+
+ // Always grab a fresh token
+ await this.session?.getToken({ skipCache: true });
+
+ // Allows for Clerk to be marked as loaded with the client and session created from the JWT.
+ return null;
+ });
  };
 
  const initComponents = () => {

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

@@ -0,0 +1,97 @@
+import type {
+ ClientJSON,
+ OrganizationMembershipJSON,
+ PartialWithClerkResource,
+ PublicUserDataJSON,
+ SessionJSON,
+ TokenJSON,
+ UserJSON,
+} from '@clerk/types';
+
+import { Token } from './resources';
+import { Client } from './resources/Client';
+
+/**
+ * Create a new client instance from a jwt.
+ * The caller is responsible for reading the jwt from the `__session` cookie.
+ */
+export function createClientFromJwt(jwt: string | undefined | null): Client {
+ // Use `Token` class to parse the JWT token
+ let token: Token | null;
+
+ try {
+ token = new Token({
+ jwt: jwt || '',
+ object: 'token',
+ // @ts-expect-error - ts is not happy about it, but this is allowed
+ id: undefined,
+ });
+ } catch {
+ // If the token is invalid, return null
+ token = null;
+ }
+
+ // Clean up singleton instance
+ Client.clearInstance();
+
+ if (!token?.jwt) {
+ return Client.getOrCreateInstance({
+ object: 'client',
+ last_active_session_id: null,
+ id: 'client_init',
+ sessions: [],
+ } as unknown as ClientJSON);
+ }
+
+ const { sid, sub, org_id, org_role, org_permissions, org_slug, fva } = token.jwt.claims;
+
+ const defaultClient = {
+ object: 'client',
+ last_active_session_id: sid,
+ id: 'client_init',
+ sessions: [
+ {
+ object: 'session',
+ id: sid,
+ status: 'active',
+ last_active_organization_id: org_id || null,
+ // @ts-expect-error - ts is not happy about `id:undefined`, but this is allowed and expected
+ last_active_token: {
+ id: undefined,
+ object: 'token',
+ jwt,
+ } as TokenJSON,
+ factor_verification_age: fva || null,
+ public_user_data: {
+ user_id: sub,
+ } as PublicUserDataJSON,
+ user: {
+ object: 'user',
+ id: sub,
+ organization_memberships:
+ org_id && org_slug && org_role
+ ? [
+ {
+ object: 'organization_membership',
+ id: org_id,
+ role: org_role,
+ permissions: org_permissions || [],
+ organization: {
+ object: 'organization',
+ id: org_id,
+ // Use slug as name for the organization, since name is not available in the token.
+ name: org_slug,
+ slug: org_slug,
+ members_count: 1,
+ max_allowed_memberships: 1,
+ },
+ } as PartialWithClerkResource<OrganizationMembershipJSON>,
+ ]
+ : [],
+ } as PartialWithClerkResource<UserJSON>,
+ } as PartialWithClerkResource<SessionJSON>,
+ ],
+ } as ClientJSON;
+
+ return Client.getOrCreateInstance(defaultClient);
+}

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

@@ -1,11 +1,11 @@
-import {
-type ActiveSessionResource,
-type ClientJSON,
-type ClientJSONSnapshot,
-type ClientResource,
-type SignedInSessionResource,
-type SignInResource,
-type SignUpResource,
+import type {
+ ActiveSessionResource,
+ ClientJSON,
+ ClientJSONSnapshot,
+ ClientResource,
+ SignedInSessionResource,
+ SignInResource,
+ SignUpResource,
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
@@ -140,7 +140,6 @@ export class Client extends BaseResource implements ClientResource {
  public __internal_toSnapshot(): ClientJSONSnapshot {
  return {
  object: 'client',
- status: null,
  id: this.id || '',
  sessions: this.sessions.map(s => s.__internal_toSnapshot()),
  sign_up: this.signUp.__internal_toSnapshot(),

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

@@ -269,13 +269,13 @@ export class Organization extends BaseResource implements OrganizationResource {
  this.id = data.id;
  this.name = data.name;
  this.slug = data.slug;
- this.imageUrl = data.image_url;
- this.hasImage = data.has_image;
- this.publicMetadata = data.public_metadata;
- this.membersCount = data.members_count;
- this.pendingInvitationsCount = data.pending_invitations_count;
- this.maxAllowedMemberships = data.max_allowed_memberships;
- this.adminDeleteEnabled = data.admin_delete_enabled;
+ this.imageUrl = data.image_url || '';
+ this.hasImage = data.has_image || false;
+ this.publicMetadata = data.public_metadata || {};
+ this.membersCount = data.members_count || 0;
+ this.pendingInvitationsCount = data.pending_invitations_count || 0;
+ this.maxAllowedMemberships = data.max_allowed_memberships || 0;
+ this.adminDeleteEnabled = data.admin_delete_enabled || false;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);
  return this;

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

@@ -69,7 +69,7 @@ export class OrganizationMembership extends BaseResource implements Organization
 
  this.id = data.id;
  this.organization = new Organization(data.organization);
- this.publicMetadata = data.public_metadata;
+ this.publicMetadata = data.public_metadata || {};
  if (data.public_user_data) {
  this.publicUserData = new PublicUserData(data.public_user_data);
  }

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

@@ -14,11 +14,11 @@ export class PublicUserData implements IPublicUserData {
 
  protected fromJSON(data: PublicUserDataJSON | PublicUserDataJSONSnapshot | null): this {
  if (data) {
- this.firstName = data.first_name;
- this.lastName = data.last_name;
- this.imageUrl = data.image_url;
- this.hasImage = data.has_image;
- this.identifier = data.identifier;
+ this.firstName = data.first_name || null;
+ this.lastName = data.last_name || null;
+ this.imageUrl = data.image_url || '';
+ this.hasImage = data.has_image || false;
+ this.identifier = data.identifier || '';
  this.userId = data.user_id;
  }
 
@@ -27,8 +27,6 @@ export class PublicUserData implements IPublicUserData {
 
  public __internal_toSnapshot(): PublicUserDataJSONSnapshot {
  return {
- object: 'public_user_data',
- id: this.userId || '',
  first_name: this.firstName,
  last_name: this.lastName,
  image_url: this.imageUrl,

.changeset/good-penguins-agree.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Allow token refresh when Client failed to resolve.

integration/testUtils/index.ts

@@ -55,6 +55,11 @@ const createExpectPageObject = ({ page }: TestArgs) => {
 
 const createClerkUtils = ({ page }: TestArgs) => {
  return {
+ toBeLoaded: async () => {
+ return page.waitForFunction(() => {
+ return !!window.Clerk?.loaded;
+ });
+ },
  getClientSideUser: () => {
  return page.evaluate(() => {
  return window.Clerk?.user;

integration/tests/resiliency.test.ts

@@ -0,0 +1,78 @@
+import { test } from '@playwright/test';
+
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../testUtils';
+
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('resiliency @generic', ({ app }) => {
+ test.describe.configure({ mode: 'serial' });
+
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ const u = createTestUtils({ app });
+ fakeUser = u.services.users.createFakeUser();
+ await u.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('signed in users can get a fresh session token when Client fails to load', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ await u.po.signIn.goTo();
+
+ let waitForClientImmediately = page.waitForResponse(response => response.url().includes('/sign_ins'), {
+ timeout: 3_000,
+ });
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+
+ const clientReponse = await waitForClientImmediately;
+ const d = await clientReponse.json();
+
+ await u.po.expect.toBeSignedIn();
+
+ // Simulate developer coming back and client fails to load.
+ await page.route('**/v1/client?**', route => {
+ return route.fulfill({
+ status: 500,
+ body: JSON.stringify({
+ errors: [
+ {
+ message: 'Oops, an unexpected error occurred',
+ long_message:
+ "There was an internal error on our servers. We've been notified and are working on fixing it.",
+ code: 'internal_clerk_error',
+ },
+ ],
+ clerk_trace_id: 'some-trace-id',
+ }),
+ });
+ });
+ await page.reload();
+
+ waitForClientImmediately = page.waitForResponse(
+ response => response.url().includes('/client?') && response.status() === 500,
+ { timeout: 3_000 },
+ );
+
+ const waitForTokenImmediately = page.waitForResponse(
+ response =>
+ response.url().includes('/tokens?') && response.status() === 200 && response.request().method() === 'POST',
+ { timeout: 3_000 },
+ );
+
+ await page.waitForLoadState('domcontentloaded');
+
+ await waitForClientImmediately;
+ await waitForTokenImmediately;
+
+ // Wait for the client to be loaded. and the internal `getToken({skipCache: true})` to have been completed.
+ await u.po.clerk.toBeLoaded();
+
+ await u.po.expect.toBeSignedIn();
+ });
+});

integration/tests/reverification.test.ts

@@ -153,7 +153,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withReverification] })(
  await expect(u.page.locator('.cl-profileSectionItem__emailAddresses')).not.toContainText(newFakeEmail);
  });
 
- test('reverification propmt when deleting account', async ({ page, context }) => {
+ test('reverification prompt when deleting account', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  const delFakeUser = u.services.users.createFakeUser({
  withUsername: true,

packages/clerk-js/bundlewatch.config.json

@@ -1,8 +1,8 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "576kB" },
+ { "path": "./dist/clerk.js", "maxSize": "577kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "78kB" },
- { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
+ { "path": "./dist/clerk.headless.js", "maxSize": "51KB" },
  { "path": "./dist/ui-common*.js", "maxSize": "94KB" },
  { "path": "./dist/vendors*.js", "maxSize": "30KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },

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

@@ -1,6 +1,6 @@
 import { createCookieHandler } from '@clerk/shared/cookie';
 import { setDevBrowserJWTInURL } from '@clerk/shared/devBrowser';
-import { is4xxError, isClerkAPIResponseError, isNetworkError } from '@clerk/shared/error';
+import { is4xxError, isClerkAPIResponseError } from '@clerk/shared/error';
 import type { Clerk, InstanceType } from '@clerk/types';
 
 import { clerkCoreErrorTokenRefreshFailed, clerkMissingDevBrowserJwt } from '../errors';
@@ -183,12 +183,6 @@ export class AuthCookieService {
  void this.clerk.handleUnauthenticated();
  return;
  }
-
- if (isNetworkError(e)) {
- return;
- }
-
- clerkCoreErrorTokenRefreshFailed(e.toString());
  }
 
  /**
@@ -216,4 +210,8 @@ export class AuthCookieService {
 
  return this.clerk.organization?.id === activeOrganizationId;
  }
+
+ public getSessionCookie() {
+ return this.sessionCookie.get();
+ }
 }

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

@@ -3,7 +3,7 @@ import { createWorkerTimers } from '@clerk/shared/workerTimers';
 import { SafeLock } from './safeLock';
 
 const REFRESH_SESSION_TOKEN_LOCK_KEY = 'clerk.lock.refreshSessionToken';
-const INTERVAL_IN_MS = 5 * 1000;
+const INTERVAL_IN_MS = 5 * 1_000;
 
 export class SessionCookiePoller {
  private lock = SafeLock(REFRESH_SESSION_TOKEN_LOCK_KEY);

packages/clerk-js/src/core/auth/cookies/session.ts

@@ -10,6 +10,7 @@ const SESSION_COOKIE_NAME = '__session';
 export type SessionCookieHandler = {
  set: (token: string) => void;
  remove: () => void;
+ get: () => string | undefined;
 };
 
 /**
@@ -35,8 +36,11 @@ export const createSessionCookie = (cookieSuffix: string): SessionCookieHandler
  sessionCookie.set(token, { expires, sameSite, secure });
  };
 
+ const get = () => suffixedSessionCookie.get() || sessionCookie.get();
+
  return {
  set,
  remove,
+ get,
  };
 };

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

@@ -121,6 +121,7 @@ import {
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
+import { createClientFromJwt } from './jwt-client';
 import { __experimental_Commerce } from './modules/commerce';
 import {
  BaseResource,
@@ -2052,10 +2053,26 @@ export class Clerk implements ClerkInterface {
  this.updateEnvironment(res);
  });
 
- const initClient = () => {
+ const initClient = async () => {
  return Client.getOrCreateInstance()
  .fetch()
- .then(res => this.updateClient(res));
+ .then(res => this.updateClient(res))
+ .catch(async e => {
+ if (isClerkAPIResponseError(e) && e.errors[0].code === 'requires_captcha') {
+ throw e;
+ }
+
+ const jwtInCookie = this.#authService?.getSessionCookie();
+ const localClient = createClientFromJwt(jwtInCookie);
+
+ this.updateClient(localClient);
+
+ // Always grab a fresh token
+ await this.session?.getToken({ skipCache: true });
+
+ // Allows for Clerk to be marked as loaded with the client and session created from the JWT.
+ return null;
+ });
  };
 
  const initComponents = () => {

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

@@ -0,0 +1,97 @@
+import type {
+ ClientJSON,
+ OrganizationMembershipJSON,
+ PartialWithClerkResource,
+ PublicUserDataJSON,
+ SessionJSON,
+ TokenJSON,
+ UserJSON,
+} from '@clerk/types';
+
+import { Token } from './resources';
+import { Client } from './resources/Client';
+
+/**
+ * Create a new client instance from a jwt.
+ * The caller is responsible for reading the jwt from the `__session` cookie.
+ */
+export function createClientFromJwt(jwt: string | undefined | null): Client {
+ // Use `Token` class to parse the JWT token
+ let token: Token | null;
+
+ try {
+ token = new Token({
+ jwt: jwt || '',
+ object: 'token',
+ // @ts-expect-error - ts is not happy about it, but this is allowed
+ id: undefined,
+ });
+ } catch {
+ // If the token is invalid, return null
+ token = null;
+ }
+
+ // Clean up singleton instance
+ Client.clearInstance();
+
+ if (!token?.jwt) {
+ return Client.getOrCreateInstance({
+ object: 'client',
+ last_active_session_id: null,
+ id: 'client_init',
+ sessions: [],
+ } as unknown as ClientJSON);
+ }
+
+ const { sid, sub, org_id, org_role, org_permissions, org_slug, fva } = token.jwt.claims;
+
+ const defaultClient = {
+ object: 'client',
+ last_active_session_id: sid,
+ id: 'client_init',
+ sessions: [
+ {
+ object: 'session',
+ id: sid,
+ status: 'active',
+ last_active_organization_id: org_id || null,
+ // @ts-expect-error - ts is not happy about `id:undefined`, but this is allowed and expected
+ last_active_token: {
+ id: undefined,
+ object: 'token',
+ jwt,
+ } as TokenJSON,
+ factor_verification_age: fva || null,
+ public_user_data: {
+ user_id: sub,
+ } as PublicUserDataJSON,
+ user: {
+ object: 'user',
+ id: sub,
+ organization_memberships:
+ org_id && org_slug && org_role
+ ? [
+ {
+ object: 'organization_membership',
+ id: org_id,
+ role: org_role,
+ permissions: org_permissions || [],
+ organization: {
+ object: 'organization',
+ id: org_id,
+ // Use slug as name for the organization, since name is not available in the token.
+ name: org_slug,
+ slug: org_slug,
+ members_count: 1,
+ max_allowed_memberships: 1,
+ },
+ } as PartialWithClerkResource<OrganizationMembershipJSON>,
+ ]
+ : [],
+ } as PartialWithClerkResource<UserJSON>,
+ } as PartialWithClerkResource<SessionJSON>,
+ ],
+ } as ClientJSON;
+
+ return Client.getOrCreateInstance(defaultClient);
+}

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

@@ -1,11 +1,11 @@
-import {
-type ActiveSessionResource,
-type ClientJSON,
-type ClientJSONSnapshot,
-type ClientResource,
-type SignedInSessionResource,
-type SignInResource,
-type SignUpResource,
+import type {
+ ActiveSessionResource,
+ ClientJSON,
+ ClientJSONSnapshot,
+ ClientResource,
+ SignedInSessionResource,
+ SignInResource,
+ SignUpResource,
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
@@ -140,7 +140,6 @@ export class Client extends BaseResource implements ClientResource {
  public __internal_toSnapshot(): ClientJSONSnapshot {
  return {
  object: 'client',
- status: null,
  id: this.id || '',
  sessions: this.sessions.map(s => s.__internal_toSnapshot()),
  sign_up: this.signUp.__internal_toSnapshot(),

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

@@ -269,13 +269,13 @@ export class Organization extends BaseResource implements OrganizationResource {
  this.id = data.id;
  this.name = data.name;
  this.slug = data.slug;
- this.imageUrl = data.image_url;
- this.hasImage = data.has_image;
- this.publicMetadata = data.public_metadata;
- this.membersCount = data.members_count;
- this.pendingInvitationsCount = data.pending_invitations_count;
- this.maxAllowedMemberships = data.max_allowed_memberships;
- this.adminDeleteEnabled = data.admin_delete_enabled;
+ this.imageUrl = data.image_url || '';
+ this.hasImage = data.has_image || false;
+ this.publicMetadata = data.public_metadata || {};
+ this.membersCount = data.members_count || 0;
+ this.pendingInvitationsCount = data.pending_invitations_count || 0;
+ this.maxAllowedMemberships = data.max_allowed_memberships || 0;
+ this.adminDeleteEnabled = data.admin_delete_enabled || false;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);
  return this;

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

@@ -69,7 +69,7 @@ export class OrganizationMembership extends BaseResource implements Organization
 
  this.id = data.id;
  this.organization = new Organization(data.organization);
- this.publicMetadata = data.public_metadata;
+ this.publicMetadata = data.public_metadata || {};
  if (data.public_user_data) {
  this.publicUserData = new PublicUserData(data.public_user_data);
  }

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

@@ -14,11 +14,11 @@ export class PublicUserData implements IPublicUserData {
 
  protected fromJSON(data: PublicUserDataJSON | PublicUserDataJSONSnapshot | null): this {
  if (data) {
- this.firstName = data.first_name;
- this.lastName = data.last_name;
- this.imageUrl = data.image_url;
- this.hasImage = data.has_image;
- this.identifier = data.identifier;
+ this.firstName = data.first_name || null;
+ this.lastName = data.last_name || null;
+ this.imageUrl = data.image_url || '';
+ this.hasImage = data.has_image || false;
+ this.identifier = data.identifier || '';
  this.userId = data.user_id;
  }
 
@@ -27,8 +27,6 @@ export class PublicUserData implements IPublicUserData {
 
  public __internal_toSnapshot(): PublicUserDataJSONSnapshot {
  return {
- object: 'public_user_data',
- id: this.userId || '',
  first_name: this.firstName,
  last_name: this.lastName,
  image_url: this.imageUrl,

.changeset/good-penguins-agree.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Allow token refresh when Client failed to resolve.

integration/testUtils/index.ts

@@ -55,6 +55,11 @@ const createExpectPageObject = ({ page }: TestArgs) => {
 
 const createClerkUtils = ({ page }: TestArgs) => {
  return {
+ toBeLoaded: async () => {
+ return page.waitForFunction(() => {
+ return !!window.Clerk?.loaded;
+ });
+ },
  getClientSideUser: () => {
  return page.evaluate(() => {
  return window.Clerk?.user;

integration/tests/resiliency.test.ts

@@ -0,0 +1,78 @@
+import { test } from '@playwright/test';
+
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../testUtils';
+
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('resiliency @generic', ({ app }) => {
+ test.describe.configure({ mode: 'serial' });
+
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ const u = createTestUtils({ app });
+ fakeUser = u.services.users.createFakeUser();
+ await u.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('signed in users can get a fresh session token when Client fails to load', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ await u.po.signIn.goTo();
+
+ let waitForClientImmediately = page.waitForResponse(response => response.url().includes('/sign_ins'), {
+ timeout: 3_000,
+ });
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+
+ const clientReponse = await waitForClientImmediately;
+ const d = await clientReponse.json();
+
+ await u.po.expect.toBeSignedIn();
+
+ // Simulate developer coming back and client fails to load.
+ await page.route('**/v1/client?**', route => {
+ return route.fulfill({
+ status: 500,
+ body: JSON.stringify({
+ errors: [
+ {
+ message: 'Oops, an unexpected error occurred',
+ long_message:
+ "There was an internal error on our servers. We've been notified and are working on fixing it.",
+ code: 'internal_clerk_error',
+ },
+ ],
+ clerk_trace_id: 'some-trace-id',
+ }),
+ });
+ });
+ await page.reload();
+
+ waitForClientImmediately = page.waitForResponse(
+ response => response.url().includes('/client?') && response.status() === 500,
+ { timeout: 3_000 },
+ );
+
+ const waitForTokenImmediately = page.waitForResponse(
+ response =>
+ response.url().includes('/tokens?') && response.status() === 200 && response.request().method() === 'POST',
+ { timeout: 3_000 },
+ );
+
+ await page.waitForLoadState('domcontentloaded');
+
+ await waitForClientImmediately;
+ await waitForTokenImmediately;
+
+ // Wait for the client to be loaded. and the internal `getToken({skipCache: true})` to have been completed.
+ await u.po.clerk.toBeLoaded();
+
+ await u.po.expect.toBeSignedIn();
+ });
+});

integration/tests/reverification.test.ts

@@ -153,7 +153,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withReverification] })(
  await expect(u.page.locator('.cl-profileSectionItem__emailAddresses')).not.toContainText(newFakeEmail);
  });
 
- test('reverification propmt when deleting account', async ({ page, context }) => {
+ test('reverification prompt when deleting account', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  const delFakeUser = u.services.users.createFakeUser({
  withUsername: true,

packages/clerk-js/bundlewatch.config.json

@@ -1,8 +1,8 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "576kB" },
+ { "path": "./dist/clerk.js", "maxSize": "577kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "78kB" },
- { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
+ { "path": "./dist/clerk.headless.js", "maxSize": "51KB" },
  { "path": "./dist/ui-common*.js", "maxSize": "94KB" },
  { "path": "./dist/vendors*.js", "maxSize": "30KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },

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

@@ -1,6 +1,6 @@
 import { createCookieHandler } from '@clerk/shared/cookie';
 import { setDevBrowserJWTInURL } from '@clerk/shared/devBrowser';
-import { is4xxError, isClerkAPIResponseError, isNetworkError } from '@clerk/shared/error';
+import { is4xxError, isClerkAPIResponseError } from '@clerk/shared/error';
 import type { Clerk, InstanceType } from '@clerk/types';
 
 import { clerkCoreErrorTokenRefreshFailed, clerkMissingDevBrowserJwt } from '../errors';
@@ -183,12 +183,6 @@ export class AuthCookieService {
  void this.clerk.handleUnauthenticated();
  return;
  }
-
- if (isNetworkError(e)) {
- return;
- }
-
- clerkCoreErrorTokenRefreshFailed(e.toString());
  }
 
  /**
@@ -216,4 +210,8 @@ export class AuthCookieService {
 
  return this.clerk.organization?.id === activeOrganizationId;
  }
+
+ public getSessionCookie() {
+ return this.sessionCookie.get();
+ }
 }

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

@@ -3,7 +3,7 @@ import { createWorkerTimers } from '@clerk/shared/workerTimers';
 import { SafeLock } from './safeLock';
 
 const REFRESH_SESSION_TOKEN_LOCK_KEY = 'clerk.lock.refreshSessionToken';
-const INTERVAL_IN_MS = 5 * 1000;
+const INTERVAL_IN_MS = 5 * 1_000;
 
 export class SessionCookiePoller {
  private lock = SafeLock(REFRESH_SESSION_TOKEN_LOCK_KEY);

packages/clerk-js/src/core/auth/cookies/session.ts

@@ -10,6 +10,7 @@ const SESSION_COOKIE_NAME = '__session';
 export type SessionCookieHandler = {
  set: (token: string) => void;
  remove: () => void;
+ get: () => string | undefined;
 };
 
 /**
@@ -35,8 +36,11 @@ export const createSessionCookie = (cookieSuffix: string): SessionCookieHandler
  sessionCookie.set(token, { expires, sameSite, secure });
  };
 
+ const get = () => suffixedSessionCookie.get() || sessionCookie.get();
+
  return {
  set,
  remove,
+ get,
  };
 };

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

@@ -121,6 +121,7 @@ import {
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
+import { createClientFromJwt } from './jwt-client';
 import { __experimental_Commerce } from './modules/commerce';
 import {
  BaseResource,
@@ -2052,10 +2053,26 @@ export class Clerk implements ClerkInterface {
  this.updateEnvironment(res);
  });
 
- const initClient = () => {
+ const initClient = async () => {
  return Client.getOrCreateInstance()
  .fetch()
- .then(res => this.updateClient(res));
+ .then(res => this.updateClient(res))
+ .catch(async e => {
+ if (isClerkAPIResponseError(e) && e.errors[0].code === 'requires_captcha') {
+ throw e;
+ }
+
+ const jwtInCookie = this.#authService?.getSessionCookie();
+ const localClient = createClientFromJwt(jwtInCookie);
+
+ this.updateClient(localClient);
+
+ // Always grab a fresh token
+ await this.session?.getToken({ skipCache: true });
+
+ // Allows for Clerk to be marked as loaded with the client and session created from the JWT.
+ return null;
+ });
  };
 
  const initComponents = () => {

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

@@ -0,0 +1,97 @@
+import type {
+ ClientJSON,
+ OrganizationMembershipJSON,
+ PartialWithClerkResource,
+ PublicUserDataJSON,
+ SessionJSON,
+ TokenJSON,
+ UserJSON,
+} from '@clerk/types';
+
+import { Token } from './resources';
+import { Client } from './resources/Client';
+
+/**
+ * Create a new client instance from a jwt.
+ * The caller is responsible for reading the jwt from the `__session` cookie.
+ */
+export function createClientFromJwt(jwt: string | undefined | null): Client {
+ // Use `Token` class to parse the JWT token
+ let token: Token | null;
+
+ try {
+ token = new Token({
+ jwt: jwt || '',
+ object: 'token',
+ // @ts-expect-error - ts is not happy about it, but this is allowed
+ id: undefined,
+ });
+ } catch {
+ // If the token is invalid, return null
+ token = null;
+ }
+
+ // Clean up singleton instance
+ Client.clearInstance();
+
+ if (!token?.jwt) {
+ return Client.getOrCreateInstance({
+ object: 'client',
+ last_active_session_id: null,
+ id: 'client_init',
+ sessions: [],
+ } as unknown as ClientJSON);
+ }
+
+ const { sid, sub, org_id, org_role, org_permissions, org_slug, fva } = token.jwt.claims;
+
+ const defaultClient = {
+ object: 'client',
+ last_active_session_id: sid,
+ id: 'client_init',
+ sessions: [
+ {
+ object: 'session',
+ id: sid,
+ status: 'active',
+ last_active_organization_id: org_id || null,
+ // @ts-expect-error - ts is not happy about `id:undefined`, but this is allowed and expected
+ last_active_token: {
+ id: undefined,
+ object: 'token',
+ jwt,
+ } as TokenJSON,
+ factor_verification_age: fva || null,
+ public_user_data: {
+ user_id: sub,
+ } as PublicUserDataJSON,
+ user: {
+ object: 'user',
+ id: sub,
+ organization_memberships:
+ org_id && org_slug && org_role
+ ? [
+ {
+ object: 'organization_membership',
+ id: org_id,
+ role: org_role,
+ permissions: org_permissions || [],
+ organization: {
+ object: 'organization',
+ id: org_id,
+ // Use slug as name for the organization, since name is not available in the token.
+ name: org_slug,
+ slug: org_slug,
+ members_count: 1,
+ max_allowed_memberships: 1,
+ },
+ } as PartialWithClerkResource<OrganizationMembershipJSON>,
+ ]
+ : [],
+ } as PartialWithClerkResource<UserJSON>,
+ } as PartialWithClerkResource<SessionJSON>,
+ ],
+ } as ClientJSON;
+
+ return Client.getOrCreateInstance(defaultClient);
+}

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

@@ -1,11 +1,11 @@
-import {
-type ActiveSessionResource,
-type ClientJSON,
-type ClientJSONSnapshot,
-type ClientResource,
-type SignedInSessionResource,
-type SignInResource,
-type SignUpResource,
+import type {
+ ActiveSessionResource,
+ ClientJSON,
+ ClientJSONSnapshot,
+ ClientResource,
+ SignedInSessionResource,
+ SignInResource,
+ SignUpResource,
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
@@ -140,7 +140,6 @@ export class Client extends BaseResource implements ClientResource {
  public __internal_toSnapshot(): ClientJSONSnapshot {
  return {
  object: 'client',
- status: null,
  id: this.id || '',
  sessions: this.sessions.map(s => s.__internal_toSnapshot()),
  sign_up: this.signUp.__internal_toSnapshot(),

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

@@ -269,13 +269,13 @@ export class Organization extends BaseResource implements OrganizationResource {
  this.id = data.id;
  this.name = data.name;
  this.slug = data.slug;
- this.imageUrl = data.image_url;
- this.hasImage = data.has_image;
- this.publicMetadata = data.public_metadata;
- this.membersCount = data.members_count;
- this.pendingInvitationsCount = data.pending_invitations_count;
- this.maxAllowedMemberships = data.max_allowed_memberships;
- this.adminDeleteEnabled = data.admin_delete_enabled;
+ this.imageUrl = data.image_url || '';
+ this.hasImage = data.has_image || false;
+ this.publicMetadata = data.public_metadata || {};
+ this.membersCount = data.members_count || 0;
+ this.pendingInvitationsCount = data.pending_invitations_count || 0;
+ this.maxAllowedMemberships = data.max_allowed_memberships || 0;
+ this.adminDeleteEnabled = data.admin_delete_enabled || false;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);
  return this;

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

@@ -69,7 +69,7 @@ export class OrganizationMembership extends BaseResource implements Organization
 
  this.id = data.id;
  this.organization = new Organization(data.organization);
- this.publicMetadata = data.public_metadata;
+ this.publicMetadata = data.public_metadata || {};
  if (data.public_user_data) {
  this.publicUserData = new PublicUserData(data.public_user_data);
  }

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

@@ -14,11 +14,11 @@ export class PublicUserData implements IPublicUserData {
 
  protected fromJSON(data: PublicUserDataJSON | PublicUserDataJSONSnapshot | null): this {
  if (data) {
- this.firstName = data.first_name;
- this.lastName = data.last_name;
- this.imageUrl = data.image_url;
- this.hasImage = data.has_image;
- this.identifier = data.identifier;
+ this.firstName = data.first_name || null;
+ this.lastName = data.last_name || null;
+ this.imageUrl = data.image_url || '';
+ this.hasImage = data.has_image || false;
+ this.identifier = data.identifier || '';
  this.userId = data.user_id;
  }
 
@@ -27,8 +27,6 @@ export class PublicUserData implements IPublicUserData {
 
  public __internal_toSnapshot(): PublicUserDataJSONSnapshot {
  return {
- object: 'public_user_data',
- id: this.userId || '',
  first_name: this.firstName,
  last_name: this.lastName,
  image_url: this.imageUrl,

.changeset/good-penguins-agree.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Allow token refresh when Client failed to resolve.

integration/testUtils/index.ts

@@ -55,6 +55,11 @@ const createExpectPageObject = ({ page }: TestArgs) => {
 
 const createClerkUtils = ({ page }: TestArgs) => {
  return {
+ toBeLoaded: async () => {
+ return page.waitForFunction(() => {
+ return !!window.Clerk?.loaded;
+ });
+ },
  getClientSideUser: () => {
  return page.evaluate(() => {
  return window.Clerk?.user;

integration/tests/resiliency.test.ts

@@ -0,0 +1,78 @@
+import { test } from '@playwright/test';
+
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../testUtils';
+
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('resiliency @generic', ({ app }) => {
+ test.describe.configure({ mode: 'serial' });
+
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ const u = createTestUtils({ app });
+ fakeUser = u.services.users.createFakeUser();
+ await u.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('signed in users can get a fresh session token when Client fails to load', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ await u.po.signIn.goTo();
+
+ let waitForClientImmediately = page.waitForResponse(response => response.url().includes('/sign_ins'), {
+ timeout: 3_000,
+ });
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+
+ const clientReponse = await waitForClientImmediately;
+ const d = await clientReponse.json();
+
+ await u.po.expect.toBeSignedIn();
+
+ // Simulate developer coming back and client fails to load.
+ await page.route('**/v1/client?**', route => {
+ return route.fulfill({
+ status: 500,
+ body: JSON.stringify({
+ errors: [
+ {
+ message: 'Oops, an unexpected error occurred',
+ long_message:
+ "There was an internal error on our servers. We've been notified and are working on fixing it.",
+ code: 'internal_clerk_error',
+ },
+ ],
+ clerk_trace_id: 'some-trace-id',
+ }),
+ });
+ });
+ await page.reload();
+
+ waitForClientImmediately = page.waitForResponse(
+ response => response.url().includes('/client?') && response.status() === 500,
+ { timeout: 3_000 },
+ );
+
+ const waitForTokenImmediately = page.waitForResponse(
+ response =>
+ response.url().includes('/tokens?') && response.status() === 200 && response.request().method() === 'POST',
+ { timeout: 3_000 },
+ );
+
+ await page.waitForLoadState('domcontentloaded');
+
+ await waitForClientImmediately;
+ await waitForTokenImmediately;
+
+ // Wait for the client to be loaded. and the internal `getToken({skipCache: true})` to have been completed.
+ await u.po.clerk.toBeLoaded();
+
+ await u.po.expect.toBeSignedIn();
+ });
+});

integration/tests/reverification.test.ts

@@ -153,7 +153,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withReverification] })(
  await expect(u.page.locator('.cl-profileSectionItem__emailAddresses')).not.toContainText(newFakeEmail);
  });
 
- test('reverification propmt when deleting account', async ({ page, context }) => {
+ test('reverification prompt when deleting account', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  const delFakeUser = u.services.users.createFakeUser({
  withUsername: true,

packages/clerk-js/bundlewatch.config.json

@@ -1,8 +1,8 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "576kB" },
+ { "path": "./dist/clerk.js", "maxSize": "577kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "78kB" },
- { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
+ { "path": "./dist/clerk.headless.js", "maxSize": "51KB" },
  { "path": "./dist/ui-common*.js", "maxSize": "94KB" },
  { "path": "./dist/vendors*.js", "maxSize": "30KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },

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

@@ -1,6 +1,6 @@
 import { createCookieHandler } from '@clerk/shared/cookie';
 import { setDevBrowserJWTInURL } from '@clerk/shared/devBrowser';
-import { is4xxError, isClerkAPIResponseError, isNetworkError } from '@clerk/shared/error';
+import { is4xxError, isClerkAPIResponseError } from '@clerk/shared/error';
 import type { Clerk, InstanceType } from '@clerk/types';
 
 import { clerkCoreErrorTokenRefreshFailed, clerkMissingDevBrowserJwt } from '../errors';
@@ -183,12 +183,6 @@ export class AuthCookieService {
  void this.clerk.handleUnauthenticated();
  return;
  }
-
- if (isNetworkError(e)) {
- return;
- }
-
- clerkCoreErrorTokenRefreshFailed(e.toString());
  }
 
  /**
@@ -216,4 +210,8 @@ export class AuthCookieService {
 
  return this.clerk.organization?.id === activeOrganizationId;
  }
+
+ public getSessionCookie() {
+ return this.sessionCookie.get();
+ }
 }

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

@@ -3,7 +3,7 @@ import { createWorkerTimers } from '@clerk/shared/workerTimers';
 import { SafeLock } from './safeLock';
 
 const REFRESH_SESSION_TOKEN_LOCK_KEY = 'clerk.lock.refreshSessionToken';
-const INTERVAL_IN_MS = 5 * 1000;
+const INTERVAL_IN_MS = 5 * 1_000;
 
 export class SessionCookiePoller {
  private lock = SafeLock(REFRESH_SESSION_TOKEN_LOCK_KEY);

packages/clerk-js/src/core/auth/cookies/session.ts

@@ -10,6 +10,7 @@ const SESSION_COOKIE_NAME = '__session';
 export type SessionCookieHandler = {
  set: (token: string) => void;
  remove: () => void;
+ get: () => string | undefined;
 };
 
 /**
@@ -35,8 +36,11 @@ export const createSessionCookie = (cookieSuffix: string): SessionCookieHandler
  sessionCookie.set(token, { expires, sameSite, secure });
  };
 
+ const get = () => suffixedSessionCookie.get() || sessionCookie.get();
+
  return {
  set,
  remove,
+ get,
  };
 };

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

@@ -121,6 +121,7 @@ import {
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
+import { createClientFromJwt } from './jwt-client';
 import { __experimental_Commerce } from './modules/commerce';
 import {
  BaseResource,
@@ -2052,10 +2053,26 @@ export class Clerk implements ClerkInterface {
  this.updateEnvironment(res);
  });
 
- const initClient = () => {
+ const initClient = async () => {
  return Client.getOrCreateInstance()
  .fetch()
- .then(res => this.updateClient(res));
+ .then(res => this.updateClient(res))
+ .catch(async e => {
+ if (isClerkAPIResponseError(e) && e.errors[0].code === 'requires_captcha') {
+ throw e;
+ }
+
+ const jwtInCookie = this.#authService?.getSessionCookie();
+ const localClient = createClientFromJwt(jwtInCookie);
+
+ this.updateClient(localClient);
+
+ // Always grab a fresh token
+ await this.session?.getToken({ skipCache: true });
+
+ // Allows for Clerk to be marked as loaded with the client and session created from the JWT.
+ return null;
+ });
  };
 
  const initComponents = () => {

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

@@ -0,0 +1,97 @@
+import type {
+ ClientJSON,
+ OrganizationMembershipJSON,
+ PartialWithClerkResource,
+ PublicUserDataJSON,
+ SessionJSON,
+ TokenJSON,
+ UserJSON,
+} from '@clerk/types';
+
+import { Token } from './resources';
+import { Client } from './resources/Client';
+
+/**
+ * Create a new client instance from a jwt.
+ * The caller is responsible for reading the jwt from the `__session` cookie.
+ */
+export function createClientFromJwt(jwt: string | undefined | null): Client {
+ // Use `Token` class to parse the JWT token
+ let token: Token | null;
+
+ try {
+ token = new Token({
+ jwt: jwt || '',
+ object: 'token',
+ // @ts-expect-error - ts is not happy about it, but this is allowed
+ id: undefined,
+ });
+ } catch {
+ // If the token is invalid, return null
+ token = null;
+ }
+
+ // Clean up singleton instance
+ Client.clearInstance();
+
+ if (!token?.jwt) {
+ return Client.getOrCreateInstance({
+ object: 'client',
+ last_active_session_id: null,
+ id: 'client_init',
+ sessions: [],
+ } as unknown as ClientJSON);
+ }
+
+ const { sid, sub, org_id, org_role, org_permissions, org_slug, fva } = token.jwt.claims;
+
+ const defaultClient = {
+ object: 'client',
+ last_active_session_id: sid,
+ id: 'client_init',
+ sessions: [
+ {
+ object: 'session',
+ id: sid,
+ status: 'active',
+ last_active_organization_id: org_id || null,
+ // @ts-expect-error - ts is not happy about `id:undefined`, but this is allowed and expected
+ last_active_token: {
+ id: undefined,
+ object: 'token',
+ jwt,
+ } as TokenJSON,
+ factor_verification_age: fva || null,
+ public_user_data: {
+ user_id: sub,
+ } as PublicUserDataJSON,
+ user: {
+ object: 'user',
+ id: sub,
+ organization_memberships:
+ org_id && org_slug && org_role
+ ? [
+ {
+ object: 'organization_membership',
+ id: org_id,
+ role: org_role,
+ permissions: org_permissions || [],
+ organization: {
+ object: 'organization',
+ id: org_id,
+ // Use slug as name for the organization, since name is not available in the token.
+ name: org_slug,
+ slug: org_slug,
+ members_count: 1,
+ max_allowed_memberships: 1,
+ },
+ } as PartialWithClerkResource<OrganizationMembershipJSON>,
+ ]
+ : [],
+ } as PartialWithClerkResource<UserJSON>,
+ } as PartialWithClerkResource<SessionJSON>,
+ ],
+ } as ClientJSON;
+
+ return Client.getOrCreateInstance(defaultClient);
+}

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

@@ -1,11 +1,11 @@
-import {
-type ActiveSessionResource,
-type ClientJSON,
-type ClientJSONSnapshot,
-type ClientResource,
-type SignedInSessionResource,
-type SignInResource,
-type SignUpResource,
+import type {
+ ActiveSessionResource,
+ ClientJSON,
+ ClientJSONSnapshot,
+ ClientResource,
+ SignedInSessionResource,
+ SignInResource,
+ SignUpResource,
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
@@ -140,7 +140,6 @@ export class Client extends BaseResource implements ClientResource {
  public __internal_toSnapshot(): ClientJSONSnapshot {
  return {
  object: 'client',
- status: null,
  id: this.id || '',
  sessions: this.sessions.map(s => s.__internal_toSnapshot()),
  sign_up: this.signUp.__internal_toSnapshot(),

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

@@ -269,13 +269,13 @@ export class Organization extends BaseResource implements OrganizationResource {
  this.id = data.id;
  this.name = data.name;
  this.slug = data.slug;
- this.imageUrl = data.image_url;
- this.hasImage = data.has_image;
- this.publicMetadata = data.public_metadata;
- this.membersCount = data.members_count;
- this.pendingInvitationsCount = data.pending_invitations_count;
- this.maxAllowedMemberships = data.max_allowed_memberships;
- this.adminDeleteEnabled = data.admin_delete_enabled;
+ this.imageUrl = data.image_url || '';
+ this.hasImage = data.has_image || false;
+ this.publicMetadata = data.public_metadata || {};
+ this.membersCount = data.members_count || 0;
+ this.pendingInvitationsCount = data.pending_invitations_count || 0;
+ this.maxAllowedMemberships = data.max_allowed_memberships || 0;
+ this.adminDeleteEnabled = data.admin_delete_enabled || false;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);
  return this;

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

@@ -69,7 +69,7 @@ export class OrganizationMembership extends BaseResource implements Organization
 
  this.id = data.id;
  this.organization = new Organization(data.organization);
- this.publicMetadata = data.public_metadata;
+ this.publicMetadata = data.public_metadata || {};
  if (data.public_user_data) {
  this.publicUserData = new PublicUserData(data.public_user_data);
  }

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

@@ -14,11 +14,11 @@ export class PublicUserData implements IPublicUserData {
 
  protected fromJSON(data: PublicUserDataJSON | PublicUserDataJSONSnapshot | null): this {
  if (data) {
- this.firstName = data.first_name;
- this.lastName = data.last_name;
- this.imageUrl = data.image_url;
- this.hasImage = data.has_image;
- this.identifier = data.identifier;
+ this.firstName = data.first_name || null;
+ this.lastName = data.last_name || null;
+ this.imageUrl = data.image_url || '';
+ this.hasImage = data.has_image || false;
+ this.identifier = data.identifier || '';
  this.userId = data.user_id;
  }
 
@@ -27,8 +27,6 @@ export class PublicUserData implements IPublicUserData {
 
  public __internal_toSnapshot(): PublicUserDataJSONSnapshot {
  return {
- object: 'public_user_data',
- id: this.userId || '',
  first_name: this.firstName,
  last_name: this.lastName,
  image_url: this.imageUrl,

.changeset/good-penguins-agree.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Allow token refresh when Client failed to resolve.

integration/testUtils/index.ts

@@ -55,6 +55,11 @@ const createExpectPageObject = ({ page }: TestArgs) => {
 
 const createClerkUtils = ({ page }: TestArgs) => {
  return {
+ toBeLoaded: async () => {
+ return page.waitForFunction(() => {
+ return !!window.Clerk?.loaded;
+ });
+ },
  getClientSideUser: () => {
  return page.evaluate(() => {
  return window.Clerk?.user;

integration/tests/resiliency.test.ts

@@ -0,0 +1,78 @@
+import { test } from '@playwright/test';
+
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../testUtils';
+
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('resiliency @generic', ({ app }) => {
+ test.describe.configure({ mode: 'serial' });
+
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ const u = createTestUtils({ app });
+ fakeUser = u.services.users.createFakeUser();
+ await u.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('signed in users can get a fresh session token when Client fails to load', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ await u.po.signIn.goTo();
+
+ let waitForClientImmediately = page.waitForResponse(response => response.url().includes('/sign_ins'), {
+ timeout: 3_000,
+ });
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+
+ const clientReponse = await waitForClientImmediately;
+ const d = await clientReponse.json();
+
+ await u.po.expect.toBeSignedIn();
+
+ // Simulate developer coming back and client fails to load.
+ await page.route('**/v1/client?**', route => {
+ return route.fulfill({
+ status: 500,
+ body: JSON.stringify({
+ errors: [
+ {
+ message: 'Oops, an unexpected error occurred',
+ long_message:
+ "There was an internal error on our servers. We've been notified and are working on fixing it.",
+ code: 'internal_clerk_error',
+ },
+ ],
+ clerk_trace_id: 'some-trace-id',
+ }),
+ });
+ });
+ await page.reload();
+
+ waitForClientImmediately = page.waitForResponse(
+ response => response.url().includes('/client?') && response.status() === 500,
+ { timeout: 3_000 },
+ );
+
+ const waitForTokenImmediately = page.waitForResponse(
+ response =>
+ response.url().includes('/tokens?') && response.status() === 200 && response.request().method() === 'POST',
+ { timeout: 3_000 },
+ );
+
+ await page.waitForLoadState('domcontentloaded');
+
+ await waitForClientImmediately;
+ await waitForTokenImmediately;
+
+ // Wait for the client to be loaded. and the internal `getToken({skipCache: true})` to have been completed.
+ await u.po.clerk.toBeLoaded();
+
+ await u.po.expect.toBeSignedIn();
+ });
+});

integration/tests/reverification.test.ts

@@ -153,7 +153,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withReverification] })(
  await expect(u.page.locator('.cl-profileSectionItem__emailAddresses')).not.toContainText(newFakeEmail);
  });
 
- test('reverification propmt when deleting account', async ({ page, context }) => {
+ test('reverification prompt when deleting account', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  const delFakeUser = u.services.users.createFakeUser({
  withUsername: true,

packages/clerk-js/bundlewatch.config.json

@@ -1,8 +1,8 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "576kB" },
+ { "path": "./dist/clerk.js", "maxSize": "577kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "78kB" },
- { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
+ { "path": "./dist/clerk.headless.js", "maxSize": "51KB" },
  { "path": "./dist/ui-common*.js", "maxSize": "94KB" },
  { "path": "./dist/vendors*.js", "maxSize": "30KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },

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

@@ -1,6 +1,6 @@
 import { createCookieHandler } from '@clerk/shared/cookie';
 import { setDevBrowserJWTInURL } from '@clerk/shared/devBrowser';
-import { is4xxError, isClerkAPIResponseError, isNetworkError } from '@clerk/shared/error';
+import { is4xxError, isClerkAPIResponseError } from '@clerk/shared/error';
 import type { Clerk, InstanceType } from '@clerk/types';
 
 import { clerkCoreErrorTokenRefreshFailed, clerkMissingDevBrowserJwt } from '../errors';
@@ -183,12 +183,6 @@ export class AuthCookieService {
  void this.clerk.handleUnauthenticated();
  return;
  }
-
- if (isNetworkError(e)) {
- return;
- }
-
- clerkCoreErrorTokenRefreshFailed(e.toString());
  }
 
  /**
@@ -216,4 +210,8 @@ export class AuthCookieService {
 
  return this.clerk.organization?.id === activeOrganizationId;
  }
+
+ public getSessionCookie() {
+ return this.sessionCookie.get();
+ }
 }

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

@@ -3,7 +3,7 @@ import { createWorkerTimers } from '@clerk/shared/workerTimers';
 import { SafeLock } from './safeLock';
 
 const REFRESH_SESSION_TOKEN_LOCK_KEY = 'clerk.lock.refreshSessionToken';
-const INTERVAL_IN_MS = 5 * 1000;
+const INTERVAL_IN_MS = 5 * 1_000;
 
 export class SessionCookiePoller {
  private lock = SafeLock(REFRESH_SESSION_TOKEN_LOCK_KEY);

packages/clerk-js/src/core/auth/cookies/session.ts

@@ -10,6 +10,7 @@ const SESSION_COOKIE_NAME = '__session';
 export type SessionCookieHandler = {
  set: (token: string) => void;
  remove: () => void;
+ get: () => string | undefined;
 };
 
 /**
@@ -35,8 +36,11 @@ export const createSessionCookie = (cookieSuffix: string): SessionCookieHandler
  sessionCookie.set(token, { expires, sameSite, secure });
  };
 
+ const get = () => suffixedSessionCookie.get() || sessionCookie.get();
+
  return {
  set,
  remove,
+ get,
  };
 };

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

@@ -121,6 +121,7 @@ import {
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
+import { createClientFromJwt } from './jwt-client';
 import { __experimental_Commerce } from './modules/commerce';
 import {
  BaseResource,
@@ -2052,10 +2053,26 @@ export class Clerk implements ClerkInterface {
  this.updateEnvironment(res);
  });
 
- const initClient = () => {
+ const initClient = async () => {
  return Client.getOrCreateInstance()
  .fetch()
- .then(res => this.updateClient(res));
+ .then(res => this.updateClient(res))
+ .catch(async e => {
+ if (isClerkAPIResponseError(e) && e.errors[0].code === 'requires_captcha') {
+ throw e;
+ }
+
+ const jwtInCookie = this.#authService?.getSessionCookie();
+ const localClient = createClientFromJwt(jwtInCookie);
+
+ this.updateClient(localClient);
+
+ // Always grab a fresh token
+ await this.session?.getToken({ skipCache: true });
+
+ // Allows for Clerk to be marked as loaded with the client and session created from the JWT.
+ return null;
+ });
  };
 
  const initComponents = () => {

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

@@ -0,0 +1,97 @@
+import type {
+ ClientJSON,
+ OrganizationMembershipJSON,
+ PartialWithClerkResource,
+ PublicUserDataJSON,
+ SessionJSON,
+ TokenJSON,
+ UserJSON,
+} from '@clerk/types';
+
+import { Token } from './resources';
+import { Client } from './resources/Client';
+
+/**
+ * Create a new client instance from a jwt.
+ * The caller is responsible for reading the jwt from the `__session` cookie.
+ */
+export function createClientFromJwt(jwt: string | undefined | null): Client {
+ // Use `Token` class to parse the JWT token
+ let token: Token | null;
+
+ try {
+ token = new Token({
+ jwt: jwt || '',
+ object: 'token',
+ // @ts-expect-error - ts is not happy about it, but this is allowed
+ id: undefined,
+ });
+ } catch {
+ // If the token is invalid, return null
+ token = null;
+ }
+
+ // Clean up singleton instance
+ Client.clearInstance();
+
+ if (!token?.jwt) {
+ return Client.getOrCreateInstance({
+ object: 'client',
+ last_active_session_id: null,
+ id: 'client_init',
+ sessions: [],
+ } as unknown as ClientJSON);
+ }
+
+ const { sid, sub, org_id, org_role, org_permissions, org_slug, fva } = token.jwt.claims;
+
+ const defaultClient = {
+ object: 'client',
+ last_active_session_id: sid,
+ id: 'client_init',
+ sessions: [
+ {
+ object: 'session',
+ id: sid,
+ status: 'active',
+ last_active_organization_id: org_id || null,
+ // @ts-expect-error - ts is not happy about `id:undefined`, but this is allowed and expected
+ last_active_token: {
+ id: undefined,
+ object: 'token',
+ jwt,
+ } as TokenJSON,
+ factor_verification_age: fva || null,
+ public_user_data: {
+ user_id: sub,
+ } as PublicUserDataJSON,
+ user: {
+ object: 'user',
+ id: sub,
+ organization_memberships:
+ org_id && org_slug && org_role
+ ? [
+ {
+ object: 'organization_membership',
+ id: org_id,
+ role: org_role,
+ permissions: org_permissions || [],
+ organization: {
+ object: 'organization',
+ id: org_id,
+ // Use slug as name for the organization, since name is not available in the token.
+ name: org_slug,
+ slug: org_slug,
+ members_count: 1,
+ max_allowed_memberships: 1,
+ },
+ } as PartialWithClerkResource<OrganizationMembershipJSON>,
+ ]
+ : [],
+ } as PartialWithClerkResource<UserJSON>,
+ } as PartialWithClerkResource<SessionJSON>,
+ ],
+ } as ClientJSON;
+
+ return Client.getOrCreateInstance(defaultClient);
+}

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

@@ -1,11 +1,11 @@
-import {
-type ActiveSessionResource,
-type ClientJSON,
-type ClientJSONSnapshot,
-type ClientResource,
-type SignedInSessionResource,
-type SignInResource,
-type SignUpResource,
+import type {
+ ActiveSessionResource,
+ ClientJSON,
+ ClientJSONSnapshot,
+ ClientResource,
+ SignedInSessionResource,
+ SignInResource,
+ SignUpResource,
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
@@ -140,7 +140,6 @@ export class Client extends BaseResource implements ClientResource {
  public __internal_toSnapshot(): ClientJSONSnapshot {
  return {
  object: 'client',
- status: null,
  id: this.id || '',
  sessions: this.sessions.map(s => s.__internal_toSnapshot()),
  sign_up: this.signUp.__internal_toSnapshot(),

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

@@ -269,13 +269,13 @@ export class Organization extends BaseResource implements OrganizationResource {
  this.id = data.id;
  this.name = data.name;
  this.slug = data.slug;
- this.imageUrl = data.image_url;
- this.hasImage = data.has_image;
- this.publicMetadata = data.public_metadata;
- this.membersCount = data.members_count;
- this.pendingInvitationsCount = data.pending_invitations_count;
- this.maxAllowedMemberships = data.max_allowed_memberships;
- this.adminDeleteEnabled = data.admin_delete_enabled;
+ this.imageUrl = data.image_url || '';
+ this.hasImage = data.has_image || false;
+ this.publicMetadata = data.public_metadata || {};
+ this.membersCount = data.members_count || 0;
+ this.pendingInvitationsCount = data.pending_invitations_count || 0;
+ this.maxAllowedMemberships = data.max_allowed_memberships || 0;
+ this.adminDeleteEnabled = data.admin_delete_enabled || false;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);
  return this;

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

@@ -69,7 +69,7 @@ export class OrganizationMembership extends BaseResource implements Organization
 
  this.id = data.id;
  this.organization = new Organization(data.organization);
- this.publicMetadata = data.public_metadata;
+ this.publicMetadata = data.public_metadata || {};
  if (data.public_user_data) {
  this.publicUserData = new PublicUserData(data.public_user_data);
  }

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

@@ -14,11 +14,11 @@ export class PublicUserData implements IPublicUserData {
 
  protected fromJSON(data: PublicUserDataJSON | PublicUserDataJSONSnapshot | null): this {
  if (data) {
- this.firstName = data.first_name;
- this.lastName = data.last_name;
- this.imageUrl = data.image_url;
- this.hasImage = data.has_image;
- this.identifier = data.identifier;
+ this.firstName = data.first_name || null;
+ this.lastName = data.last_name || null;
+ this.imageUrl = data.image_url || '';
+ this.hasImage = data.has_image || false;
+ this.identifier = data.identifier || '';
  this.userId = data.user_id;
  }
 
@@ -27,8 +27,6 @@ export class PublicUserData implements IPublicUserData {
 
  public __internal_toSnapshot(): PublicUserDataJSONSnapshot {
  return {
- object: 'public_user_data',
- id: this.userId || '',
  first_name: this.firstName,
  last_name: this.lastName,
  image_url: this.imageUrl,

.changeset/good-penguins-agree.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Allow token refresh when Client failed to resolve.

integration/testUtils/index.ts

@@ -55,6 +55,11 @@ const createExpectPageObject = ({ page }: TestArgs) => {
 
 const createClerkUtils = ({ page }: TestArgs) => {
  return {
+ toBeLoaded: async () => {
+ return page.waitForFunction(() => {
+ return !!window.Clerk?.loaded;
+ });
+ },
  getClientSideUser: () => {
  return page.evaluate(() => {
  return window.Clerk?.user;

integration/tests/resiliency.test.ts

@@ -0,0 +1,78 @@
+import { test } from '@playwright/test';
+
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../testUtils';
+
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('resiliency @generic', ({ app }) => {
+ test.describe.configure({ mode: 'serial' });
+
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ const u = createTestUtils({ app });
+ fakeUser = u.services.users.createFakeUser();
+ await u.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('signed in users can get a fresh session token when Client fails to load', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ await u.po.signIn.goTo();
+
+ let waitForClientImmediately = page.waitForResponse(response => response.url().includes('/sign_ins'), {
+ timeout: 3_000,
+ });
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+
+ const clientReponse = await waitForClientImmediately;
+ const d = await clientReponse.json();
+
+ await u.po.expect.toBeSignedIn();
+
+ // Simulate developer coming back and client fails to load.
+ await page.route('**/v1/client?**', route => {
+ return route.fulfill({
+ status: 500,
+ body: JSON.stringify({
+ errors: [
+ {
+ message: 'Oops, an unexpected error occurred',
+ long_message:
+ "There was an internal error on our servers. We've been notified and are working on fixing it.",
+ code: 'internal_clerk_error',
+ },
+ ],
+ clerk_trace_id: 'some-trace-id',
+ }),
+ });
+ });
+ await page.reload();
+
+ waitForClientImmediately = page.waitForResponse(
+ response => response.url().includes('/client?') && response.status() === 500,
+ { timeout: 3_000 },
+ );
+
+ const waitForTokenImmediately = page.waitForResponse(
+ response =>
+ response.url().includes('/tokens?') && response.status() === 200 && response.request().method() === 'POST',
+ { timeout: 3_000 },
+ );
+
+ await page.waitForLoadState('domcontentloaded');
+
+ await waitForClientImmediately;
+ await waitForTokenImmediately;
+
+ // Wait for the client to be loaded. and the internal `getToken({skipCache: true})` to have been completed.
+ await u.po.clerk.toBeLoaded();
+
+ await u.po.expect.toBeSignedIn();
+ });
+});

integration/tests/reverification.test.ts

@@ -153,7 +153,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withReverification] })(
  await expect(u.page.locator('.cl-profileSectionItem__emailAddresses')).not.toContainText(newFakeEmail);
  });
 
- test('reverification propmt when deleting account', async ({ page, context }) => {
+ test('reverification prompt when deleting account', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  const delFakeUser = u.services.users.createFakeUser({
  withUsername: true,

packages/clerk-js/bundlewatch.config.json

@@ -1,8 +1,8 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "576kB" },
+ { "path": "./dist/clerk.js", "maxSize": "577kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "78kB" },
- { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
+ { "path": "./dist/clerk.headless.js", "maxSize": "51KB" },
  { "path": "./dist/ui-common*.js", "maxSize": "94KB" },
  { "path": "./dist/vendors*.js", "maxSize": "30KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },

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

@@ -1,6 +1,6 @@
 import { createCookieHandler } from '@clerk/shared/cookie';
 import { setDevBrowserJWTInURL } from '@clerk/shared/devBrowser';
-import { is4xxError, isClerkAPIResponseError, isNetworkError } from '@clerk/shared/error';
+import { is4xxError, isClerkAPIResponseError } from '@clerk/shared/error';
 import type { Clerk, InstanceType } from '@clerk/types';
 
 import { clerkCoreErrorTokenRefreshFailed, clerkMissingDevBrowserJwt } from '../errors';
@@ -183,12 +183,6 @@ export class AuthCookieService {
  void this.clerk.handleUnauthenticated();
  return;
  }
-
- if (isNetworkError(e)) {
- return;
- }
-
- clerkCoreErrorTokenRefreshFailed(e.toString());
  }
 
  /**
@@ -216,4 +210,8 @@ export class AuthCookieService {
 
  return this.clerk.organization?.id === activeOrganizationId;
  }
+
+ public getSessionCookie() {
+ return this.sessionCookie.get();
+ }
 }

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

@@ -3,7 +3,7 @@ import { createWorkerTimers } from '@clerk/shared/workerTimers';
 import { SafeLock } from './safeLock';
 
 const REFRESH_SESSION_TOKEN_LOCK_KEY = 'clerk.lock.refreshSessionToken';
-const INTERVAL_IN_MS = 5 * 1000;
+const INTERVAL_IN_MS = 5 * 1_000;
 
 export class SessionCookiePoller {
  private lock = SafeLock(REFRESH_SESSION_TOKEN_LOCK_KEY);

packages/clerk-js/src/core/auth/cookies/session.ts

@@ -10,6 +10,7 @@ const SESSION_COOKIE_NAME = '__session';
 export type SessionCookieHandler = {
  set: (token: string) => void;
  remove: () => void;
+ get: () => string | undefined;
 };
 
 /**
@@ -35,8 +36,11 @@ export const createSessionCookie = (cookieSuffix: string): SessionCookieHandler
  sessionCookie.set(token, { expires, sameSite, secure });
  };
 
+ const get = () => suffixedSessionCookie.get() || sessionCookie.get();
+
  return {
  set,
  remove,
+ get,
  };
 };

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

@@ -121,6 +121,7 @@ import {
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
+import { createClientFromJwt } from './jwt-client';
 import { __experimental_Commerce } from './modules/commerce';
 import {
  BaseResource,
@@ -2052,10 +2053,26 @@ export class Clerk implements ClerkInterface {
  this.updateEnvironment(res);
  });
 
- const initClient = () => {
+ const initClient = async () => {
  return Client.getOrCreateInstance()
  .fetch()
- .then(res => this.updateClient(res));
+ .then(res => this.updateClient(res))
+ .catch(async e => {
+ if (isClerkAPIResponseError(e) && e.errors[0].code === 'requires_captcha') {
+ throw e;
+ }
+
+ const jwtInCookie = this.#authService?.getSessionCookie();
+ const localClient = createClientFromJwt(jwtInCookie);
+
+ this.updateClient(localClient);
+
+ // Always grab a fresh token
+ await this.session?.getToken({ skipCache: true });
+
+ // Allows for Clerk to be marked as loaded with the client and session created from the JWT.
+ return null;
+ });
  };
 
  const initComponents = () => {

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

@@ -0,0 +1,97 @@
+import type {
+ ClientJSON,
+ OrganizationMembershipJSON,
+ PartialWithClerkResource,
+ PublicUserDataJSON,
+ SessionJSON,
+ TokenJSON,
+ UserJSON,
+} from '@clerk/types';
+
+import { Token } from './resources';
+import { Client } from './resources/Client';
+
+/**
+ * Create a new client instance from a jwt.
+ * The caller is responsible for reading the jwt from the `__session` cookie.
+ */
+export function createClientFromJwt(jwt: string | undefined | null): Client {
+ // Use `Token` class to parse the JWT token
+ let token: Token | null;
+
+ try {
+ token = new Token({
+ jwt: jwt || '',
+ object: 'token',
+ // @ts-expect-error - ts is not happy about it, but this is allowed
+ id: undefined,
+ });
+ } catch {
+ // If the token is invalid, return null
+ token = null;
+ }
+
+ // Clean up singleton instance
+ Client.clearInstance();
+
+ if (!token?.jwt) {
+ return Client.getOrCreateInstance({
+ object: 'client',
+ last_active_session_id: null,
+ id: 'client_init',
+ sessions: [],
+ } as unknown as ClientJSON);
+ }
+
+ const { sid, sub, org_id, org_role, org_permissions, org_slug, fva } = token.jwt.claims;
+
+ const defaultClient = {
+ object: 'client',
+ last_active_session_id: sid,
+ id: 'client_init',
+ sessions: [
+ {
+ object: 'session',
+ id: sid,
+ status: 'active',
+ last_active_organization_id: org_id || null,
+ // @ts-expect-error - ts is not happy about `id:undefined`, but this is allowed and expected
+ last_active_token: {
+ id: undefined,
+ object: 'token',
+ jwt,
+ } as TokenJSON,
+ factor_verification_age: fva || null,
+ public_user_data: {
+ user_id: sub,
+ } as PublicUserDataJSON,
+ user: {
+ object: 'user',
+ id: sub,
+ organization_memberships:
+ org_id && org_slug && org_role
+ ? [
+ {
+ object: 'organization_membership',
+ id: org_id,
+ role: org_role,
+ permissions: org_permissions || [],
+ organization: {
+ object: 'organization',
+ id: org_id,
+ // Use slug as name for the organization, since name is not available in the token.
+ name: org_slug,
+ slug: org_slug,
+ members_count: 1,
+ max_allowed_memberships: 1,
+ },
+ } as PartialWithClerkResource<OrganizationMembershipJSON>,
+ ]
+ : [],
+ } as PartialWithClerkResource<UserJSON>,
+ } as PartialWithClerkResource<SessionJSON>,
+ ],
+ } as ClientJSON;
+
+ return Client.getOrCreateInstance(defaultClient);
+}

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

@@ -1,11 +1,11 @@
-import {
-type ActiveSessionResource,
-type ClientJSON,
-type ClientJSONSnapshot,
-type ClientResource,
-type SignedInSessionResource,
-type SignInResource,
-type SignUpResource,
+import type {
+ ActiveSessionResource,
+ ClientJSON,
+ ClientJSONSnapshot,
+ ClientResource,
+ SignedInSessionResource,
+ SignInResource,
+ SignUpResource,
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
@@ -140,7 +140,6 @@ export class Client extends BaseResource implements ClientResource {
  public __internal_toSnapshot(): ClientJSONSnapshot {
  return {
  object: 'client',
- status: null,
  id: this.id || '',
  sessions: this.sessions.map(s => s.__internal_toSnapshot()),
  sign_up: this.signUp.__internal_toSnapshot(),

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

@@ -269,13 +269,13 @@ export class Organization extends BaseResource implements OrganizationResource {
  this.id = data.id;
  this.name = data.name;
  this.slug = data.slug;
- this.imageUrl = data.image_url;
- this.hasImage = data.has_image;
- this.publicMetadata = data.public_metadata;
- this.membersCount = data.members_count;
- this.pendingInvitationsCount = data.pending_invitations_count;
- this.maxAllowedMemberships = data.max_allowed_memberships;
- this.adminDeleteEnabled = data.admin_delete_enabled;
+ this.imageUrl = data.image_url || '';
+ this.hasImage = data.has_image || false;
+ this.publicMetadata = data.public_metadata || {};
+ this.membersCount = data.members_count || 0;
+ this.pendingInvitationsCount = data.pending_invitations_count || 0;
+ this.maxAllowedMemberships = data.max_allowed_memberships || 0;
+ this.adminDeleteEnabled = data.admin_delete_enabled || false;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);
  return this;

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

@@ -69,7 +69,7 @@ export class OrganizationMembership extends BaseResource implements Organization
 
  this.id = data.id;
  this.organization = new Organization(data.organization);
- this.publicMetadata = data.public_metadata;
+ this.publicMetadata = data.public_metadata || {};
  if (data.public_user_data) {
  this.publicUserData = new PublicUserData(data.public_user_data);
  }

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

@@ -14,11 +14,11 @@ export class PublicUserData implements IPublicUserData {
 
  protected fromJSON(data: PublicUserDataJSON | PublicUserDataJSONSnapshot | null): this {
  if (data) {
- this.firstName = data.first_name;
- this.lastName = data.last_name;
- this.imageUrl = data.image_url;
- this.hasImage = data.has_image;
- this.identifier = data.identifier;
+ this.firstName = data.first_name || null;
+ this.lastName = data.last_name || null;
+ this.imageUrl = data.image_url || '';
+ this.hasImage = data.has_image || false;
+ this.identifier = data.identifier || '';
  this.userId = data.user_id;
  }
 
@@ -27,8 +27,6 @@ export class PublicUserData implements IPublicUserData {
 
  public __internal_toSnapshot(): PublicUserDataJSONSnapshot {
  return {
- object: 'public_user_data',
- id: this.userId || '',
  first_name: this.firstName,
  last_name: this.lastName,
  image_url: this.imageUrl,