diff --git a/.changeset/fix-legacy-clerkuictor-compat.md b/.changeset/fix-legacy-clerkuictor-compat.md new file mode 100644 index 00000000000..097893d55e0 --- /dev/null +++ b/.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 diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json index 272648511b7..c694488eb56 100644 --- a/packages/clerk-js/bundlewatch.config.json +++ b/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" }, diff --git a/packages/clerk-js/src/core/__tests__/clerk.test.ts b/packages/clerk-js/src/core/__tests__/clerk.test.ts index fdbad637d16..b467a476cad 100644 --- a/packages/clerk-js/src/core/__tests__/clerk.test.ts +++ b/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(); + }); }); }); diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index b024c7c2a72..0ddb68921bf 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/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 | undefined; + const legacyCtor = legacy?.clerkUICtor ?? legacy?.clerkUiCtor; + const ui = legacyCtor + ? { ...options?.ui, ClerkUI: legacyCtor as NonNullable['ClerkUI'] } + : options?.ui; + return { ...defaultOptions, ...options, + ui, allowedRedirectOrigins: createAllowedRedirectOrigins( options?.allowedRedirectOrigins, this.frontendApi,