fix(clerk-js): Restore backwards compat for legacy clerkUICtor option (#7802)

Co-authored-by: Nikos Douvlis <nikosdouvlis@gmail.com>

Author: jacekradko

.changeset/fix-legacy-clerkuictor-compat.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix backwards compatibility for legacy `clerkUICtor` option removed in the `ui` prop PR

packages/clerk-js/bundlewatch.config.json

@@ -1,6 +1,6 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "538KB" },
+    { "path": "./dist/clerk.js", "maxSize": "539KB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "66KB" },
     { "path": "./dist/clerk.chips.browser.js", "maxSize": "66KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "106KB" },

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

@@ -2830,5 +2830,31 @@ describe('Clerk singleton', () => {
 
       expect(mockClerkUICtor).toHaveBeenCalled();
     });
+
+    it('supports legacy clerkUICtor option for backwards compatibility', async () => {
+      const mockClerkUIInstance = { mount: vi.fn() };
+      const mockClerkUICtor = vi.fn(() => mockClerkUIInstance);
+
+      const sut = new Clerk(productionPublishableKey);
+      await sut.load({
+        ...mockedLoadOptions,
+        clerkUICtor: mockClerkUICtor,
+      } as any);
+
+      expect(mockClerkUICtor).toHaveBeenCalled();
+    });
+
+    it('supports legacy clerkUiCtor option for backwards compatibility', async () => {
+      const mockClerkUIInstance = { mount: vi.fn() };
+      const mockClerkUICtor = vi.fn(() => mockClerkUIInstance);
+
+      const sut = new Clerk(productionPublishableKey);
+      await sut.load({
+        ...mockedLoadOptions,
+        clerkUiCtor: mockClerkUICtor,
+      } as any);
+
+      expect(mockClerkUICtor).toHaveBeenCalled();
+    });
   });
 });

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

@@ -3277,9 +3277,18 @@ export class Clerk implements ClerkInterface {
   };
 
   #initOptions = (options?: ClerkOptions): ClerkOptions => {
+    // Support legacy clerkUICtor / clerkUiCtor options from older SDK versions.
+    // Convert to the new ui.ClerkUI format so the rest of the codebase only checks one path.
+    const legacy = options as Record<string, unknown> | undefined;
+    const legacyCtor = legacy?.clerkUICtor ?? legacy?.clerkUiCtor;
+    const ui = legacyCtor
+      ? { ...options?.ui, ClerkUI: legacyCtor as NonNullable<ClerkOptions['ui']>['ClerkUI'] }
+      : options?.ui;
+
     return {
       ...defaultOptions,
       ...options,
+      ui,
       allowedRedirectOrigins: createAllowedRedirectOrigins(
         options?.allowedRedirectOrigins,
         this.frontendApi,