fix(clerk-js): Navigate to /choose when signing out during multi se…

…ssion (#4203)

.changeset/three-nails-fetch.md

@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Navigate to `/choose` when signing out during multi session.

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

@@ -969,7 +969,16 @@ export class Clerk implements ClerkInterface {
 
   public buildAfterMultiSessionSingleSignOutUrl(): string {
     if (!this.#options.afterMultiSessionSingleSignOutUrl) {
-      return this.buildAfterSignOutUrl();
+      return this.buildUrlWithAuth(
+        buildURL(
+          {
+            base: this.#options.signInUrl
+              ? `${this.#options.signInUrl}/choose`
+              : this.environment?.displayConfig.afterSignOutOneUrl,
+          },
+          { stringify: true },
+        ),
+      );
     }
 
     return this.buildUrlWithAuth(this.#options.afterMultiSessionSingleSignOutUrl);

packages/clerk-js/src/ui/components/UserButton/__tests__/UserButton.test.tsx

@@ -1,6 +1,6 @@
 import { describe } from '@jest/globals';
 
-import { render } from '../../../../testUtils';
+import { render, waitFor } from '../../../../testUtils';
 import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { UserButton } from '../UserButton';
 
@@ -139,11 +139,30 @@ describe('UserButton', () => {
 
     it('signs out of the currently active session when clicking "Sign out"', async () => {
       const { wrapper, fixtures } = await createFixtures(initConfig);
-      fixtures.clerk.signOut.mockReturnValueOnce(Promise.resolve());
+      fixtures.clerk.signOut.mockImplementationOnce(callback => {
+        return Promise.resolve(callback());
+      });
       const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
       await userEvent.click(getByRole('button', { name: 'Open user button' }));
       await userEvent.click(getByText('Sign out'));
-      expect(fixtures.clerk.signOut).toHaveBeenCalledWith(expect.any(Function), { sessionId: '0' });
+      await waitFor(() => {
+        expect(fixtures.clerk.signOut).toHaveBeenCalledWith(expect.any(Function), { sessionId: '0' });
+        expect(fixtures.clerk.redirectWithAuth).toHaveBeenCalledWith('https://accounts.clerk.com/sign-in/choose');
+      });
+    });
+
+    it('signs out of all currently active session when clicking "Sign out of all accounts"', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+      fixtures.clerk.signOut.mockImplementationOnce(callback => {
+        return Promise.resolve(callback());
+      });
+      const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
+      await userEvent.click(getByRole('button', { name: 'Open user button' }));
+      await userEvent.click(getByText('Sign out of all accounts'));
+      await waitFor(() => {
+        expect(fixtures.clerk.signOut).toHaveBeenCalledWith(expect.any(Function));
+        expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
+      });
     });
   });
 

packages/clerk-js/src/ui/utils/test/mockHelpers.ts

@@ -65,6 +65,7 @@ export const mockClerkMethods = (clerk: LoadedClerk): DeepJestMocked<LoadedClerk
   });
   mockProp(clerk, 'navigate');
   mockProp(clerk, 'setActive');
+  mockProp(clerk, 'redirectWithAuth');
   mockProp(clerk, '__internal_navigateWithError');
   return clerk as any as DeepJestMocked<LoadedClerk>;
 };