diff --git a/.changeset/oauth-consent-mount-after-set-active.md b/.changeset/oauth-consent-mount-after-set-active.md new file mode 100644 index 00000000000..3ff86da44ec --- /dev/null +++ b/.changeset/oauth-consent-mount-after-set-active.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Fix `` rendering a blank page when reached through the redirect after completing `` or ``. diff --git a/packages/clerk-js/src/core/__tests__/clerk.test.ts b/packages/clerk-js/src/core/__tests__/clerk.test.ts index 1daf950ac80..18451d7bc03 100644 --- a/packages/clerk-js/src/core/__tests__/clerk.test.ts +++ b/packages/clerk-js/src/core/__tests__/clerk.test.ts @@ -253,6 +253,32 @@ describe('Clerk singleton', () => { expect(mockSession.touch).toHaveBeenCalledWith({ intent: 'select_session' }); }); + it('mounts OAuthConsent when mounted while navigating to redirectUrl', async () => { + mockClientFetch.mockReturnValue( + Promise.resolve({ signedInSessions: [mockSession], isEligibleForTouch: () => false }), + ); + const mountComponent = vi.fn(); + const mockClerkUICtor = vi.fn(function () { + return { ensureMounted: () => Promise.resolve({ mountComponent }) }; + }); + + const sut = new Clerk(productionPublishableKey); + await sut.load({ ui: { ClerkUI: mockClerkUICtor } }); + const node = document.createElement('div'); + sut.navigate = vi.fn(async () => { + sut.mountOAuthConsent(node); + }); + + await sut.setActive({ + session: mockSession as any as ActiveSessionResource, + redirectUrl: '/oauth-consent', + }); + + await waitFor(() => { + expect(mountComponent).toHaveBeenCalledWith(expect.objectContaining({ name: 'OAuthConsent', node })); + }); + }); + describe('with `touchSession` set to false', () => { it('calls session.touch by default outside of focus window event', async () => { mockSession.touch.mockReturnValue(Promise.resolve()); diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 6b719fefaf6..aa2cb555cd7 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -1512,7 +1512,7 @@ export class Clerk implements ClerkInterface { }; public mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => { - if (noUserExists(this)) { + if (this.user === null) { if (this.#instanceType === 'development') { throw new ClerkRuntimeError(warnings.cannotRenderOAuthConsentComponentWhenUserDoesNotExist, { code: CANNOT_RENDER_USER_MISSING_ERROR_CODE,