feat(repo): Remove deprecated props

Author: jacekradko

.changeset/remove-deprecated-props.md

@@ -0,0 +1,11 @@
+---
+"@clerk/nextjs": major
+"@clerk/clerk-react": major
+"@clerk/clerk-js": major
+"@clerk/shared": major
+"@clerk/ui": major
+"@clerk/react-router": major
+"@clerk/tanstack-react-start": major
+---
+
+Remove all previously deprecated UI props across the Next.js, React and clerk-js SDKs. The legacy `afterSign(In|Up)Url`/`redirectUrl` props, `UserButton` sign-out overrides, organization `hideSlug` flags, `OrganizationSwitcher`'s `afterSwitchOrganizationUrl`, `Client.activeSessions`, `setActive({ beforeEmit })`, and the `ClerkMiddlewareAuthObject` type alias are no longer exported. Components now rely solely on the new redirect options and server-side configuration.

integration/templates/astro-node/src/components/CustomUserButton.astro

@@ -2,7 +2,7 @@
 import { UserButton } from '@clerk/astro/components';
 ---
 
-<UserButton afterSignOutUrl='/'>
+<UserButton>
   <UserButton.MenuItems>
     <UserButton.Action label='signOut' />
     <UserButton.Action label='manageAccount' />

integration/templates/astro-node/src/layouts/react/Layout.astro

@@ -80,10 +80,7 @@ import { LanguagePicker } from '../../components/LanguagePicker';
             <LanguagePicker client:idle />
 
             <SignedIn client:load>
-              <UserButton
-                client:load
-                afterSignOutUrl='/'
-              />
+              <UserButton client:load />
             </SignedIn>
 
             <SignedOut client:load>

integration/templates/react-cra/src/App.tsx

@@ -10,7 +10,7 @@ function App() {
         <SignIn />
       </SignedOut>
       <SignedIn>Signed In</SignedIn>
-      <UserButton afterSignOutUrl={'/'} />
+      <UserButton />
     </main>
   );
 }

integration/templates/react-vite/src/App.tsx

@@ -6,7 +6,7 @@ import { ClientId } from './client-id';
 function App() {
   return (
     <main>
-      <UserButton afterSignOutUrl={'/'} />
+      <UserButton />
       <OrganizationSwitcher fallback={<>Loading organization switcher</>} />
       <ClientId />
       <SignedOut>SignedOut</SignedOut>

packages/astro/src/stores/external.ts

@@ -70,7 +70,7 @@ export const $organizationStore = computed([$authStore], auth => auth.organizati
  * It is a nanostore, for instructions on how to use nanostores please review the [documentation](https://github.com/nanostores/nanostores)
  *
  * @example
- * $clientStore.subscribe((client) => console.log(client.activeSessions))
+ * $clientStore.subscribe((client) => console.log(client?.signedInSessions?.length))
  */
 export const $clientStore = computed([$csrState], csr => csr.client);
 

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

@@ -246,100 +246,6 @@ describe('Clerk singleton', () => {
         await sut.setActive({ session: mockSession as any as ActiveSessionResource });
       });
 
-      it('calls __unstable__onAfterSetActive after beforeEmit and session.touch', async () => {
-        const beforeEmitMock = vi.fn();
-        mockSession.touch.mockReturnValueOnce(Promise.resolve());
-        mockClientFetch.mockReturnValue(Promise.resolve({ signedInSessions: [mockSession] }));
-
-        (window as any).__unstable__onAfterSetActive = () => {
-          expect(mockSession.touch).toHaveBeenCalled();
-          expect(beforeEmitMock).toHaveBeenCalled();
-        };
-
-        const sut = new Clerk(productionPublishableKey);
-        await sut.load();
-        await sut.setActive({ session: mockSession as any as ActiveSessionResource, beforeEmit: beforeEmitMock });
-      });
-
-      // TODO: @dimkl include set transitive state
-      it('calls session.touch -> set cookie -> before emit with touched session on session switch', async () => {
-        const mockSession2 = {
-          id: '2',
-          remove: vi.fn(),
-          status: 'active',
-          user: {},
-          touch: vi.fn(),
-          getToken: vi.fn(),
-        };
-        mockClientFetch.mockReturnValue(
-          Promise.resolve({
-            signedInSessions: [mockSession, mockSession2],
-          }),
-        );
-
-        const sut = new Clerk(productionPublishableKey);
-        await sut.load();
-
-        const executionOrder: string[] = [];
-        mockSession2.touch.mockImplementationOnce(() => {
-          sut.session = mockSession2 as any;
-          executionOrder.push('session.touch');
-          return Promise.resolve();
-        });
-        mockSession2.getToken.mockImplementation(() => {
-          executionOrder.push('set cookie');
-          return 'mocked-token-2';
-        });
-        const beforeEmitMock = vi.fn().mockImplementationOnce(() => {
-          executionOrder.push('before emit');
-          return Promise.resolve();
-        });
-
-        await sut.setActive({ session: mockSession2 as any as ActiveSessionResource, beforeEmit: beforeEmitMock });
-
-        await waitFor(() => {
-          expect(executionOrder).toEqual(['session.touch', 'set cookie', 'before emit']);
-          expect(mockSession2.touch).toHaveBeenCalled();
-          expect(mockSession2.getToken).toHaveBeenCalled();
-          expect(beforeEmitMock).toHaveBeenCalledWith(mockSession2);
-          expect(sut.session).toMatchObject(mockSession2);
-        });
-      });
-
-      // TODO: @dimkl include set transitive state
-      it('calls with lastActiveOrganizationId session.touch -> set cookie -> before emit -> set accessors with touched session on organization switch', async () => {
-        mockClientFetch.mockReturnValue(Promise.resolve({ signedInSessions: [mockSession] }));
-        const sut = new Clerk(productionPublishableKey);
-        await sut.load();
-
-        const executionOrder: string[] = [];
-        mockSession.touch.mockImplementationOnce(() => {
-          sut.session = mockSession as any;
-          executionOrder.push('session.touch');
-          return Promise.resolve();
-        });
-        mockSession.getToken.mockImplementation(() => {
-          executionOrder.push('set cookie');
-          return 'mocked-token';
-        });
-
-        const beforeEmitMock = vi.fn().mockImplementationOnce(() => {
-          executionOrder.push('before emit');
-          return Promise.resolve();
-        });
-
-        await sut.setActive({ organization: { id: 'org_id' } as Organization, beforeEmit: beforeEmitMock });
-
-        await waitFor(() => {
-          expect(executionOrder).toEqual(['session.touch', 'set cookie', 'before emit']);
-          expect(mockSession.touch).toHaveBeenCalled();
-          expect(mockSession.getToken).toHaveBeenCalled();
-          expect((mockSession as any as ActiveSessionResource)?.lastActiveOrganizationId).toEqual('org_id');
-          expect(beforeEmitMock).toHaveBeenCalledWith(mockSession);
-          expect(sut.session).toMatchObject(mockSession);
-        });
-      });
-
       it('sets active organization by slug', async () => {
         const mockSession2 = {
           id: '1',
@@ -465,24 +371,16 @@ describe('Clerk singleton', () => {
           const sut = new Clerk(productionPublishableKey);
           await sut.load({ standardBrowser: false });
 
-          const executionOrder: string[] = [];
           mockSession.touch.mockImplementationOnce(() => {
             sut.session = mockSession as any;
-            executionOrder.push('session.touch');
-            return Promise.resolve();
-          });
-          const beforeEmitMock = vi.fn().mockImplementationOnce(() => {
-            executionOrder.push('before emit');
             return Promise.resolve();
           });
 
-          await sut.setActive({ organization: { id: 'org_id' } as Organization, beforeEmit: beforeEmitMock });
+          await sut.setActive({ organization: { id: 'org_id' } as Organization });
 
-          expect(executionOrder).toEqual(['session.touch', 'before emit']);
           expect(mockSession.touch).toHaveBeenCalled();
           expect((mockSession as any as ActiveSessionResource)?.lastActiveOrganizationId).toEqual('org_id');
           expect(mockSession.getToken).toHaveBeenCalled();
-          expect(beforeEmitMock).toHaveBeenCalledWith(mockSession);
           expect(sut.session).toMatchObject(mockSession);
         });
       });

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

@@ -1,6 +1,5 @@
 import { inBrowser as inClientSide, isValidBrowserOnline } from '@clerk/shared/browser';
 import { clerkEvents, createClerkEventBus } from '@clerk/shared/clerkEventBus';
-import { deprecated } from '@clerk/shared/deprecated';
 import {
   ClerkRuntimeError,
   EmailLinkError,
@@ -9,7 +8,6 @@ import {
   isClerkAPIResponseError,
   isClerkRuntimeError,
 } from '@clerk/shared/error';
-import { assertNoLegacyProp } from '@clerk/shared/internal/clerk-js/assertNoLegacyProp';
 import {
   disabledAllAPIKeysFeatures,
   disabledAllBillingFeatures,
@@ -496,8 +494,6 @@ export class Clerk implements ClerkInterface {
       this.#emit();
     });
 
-    assertNoLegacyProp(this.#options);
-
     if (this.#options.sdkMetadata) {
       Clerk.sdkMetadata = this.#options.sdkMetadata;
     }
@@ -1300,7 +1296,7 @@ export class Clerk implements ClerkInterface {
    * `setActive` can be used to set the active session and/or organization.
    */
   public setActive = async (params: SetActiveParams): Promise<void> => {
-    const { organization, beforeEmit, redirectUrl, navigate: setActiveNavigate } = params;
+    const { organization, redirectUrl, navigate: setActiveNavigate } = params;
     let { session } = params;
     this.__internal_setActiveInProgress = true;
     debugLogger.debug(
@@ -1405,29 +1401,18 @@ export class Clerk implements ClerkInterface {
         eventBus.emit(events.TokenUpdate, { token: null });
       }
 
-      //2. If there's a beforeEmit, typically we're navigating.  Emit the session as
-      //   undefined, then wait for beforeEmit to complete before emitting the new session.
+      //2. When navigation is required we emit the session as undefined,
+      //   then wait for navigation to finish before emitting the new session.
       //   When undefined, neither SignedIn nor SignedOut renders, which avoids flickers or
       //   automatic reloading when reloading shouldn't be happening.
       const tracker = createBeforeUnloadTracker(this.#options.standardBrowser);
 
-      if (beforeEmit) {
-        deprecated(
-          'Clerk.setActive({beforeEmit})',
-          'Use the `redirectUrl` property instead. Example `Clerk.setActive({redirectUrl:"/"})`',
-        );
-        await tracker.track(async () => {
-          this.#setTransitiveState();
-          await beforeEmit(newSession);
-        });
-      }
-
       const taskUrl =
         newSession?.status === 'pending' &&
         newSession?.currentTask &&
         this.#options.taskUrls?.[newSession?.currentTask.key];
 
-      if (!beforeEmit && (redirectUrl || taskUrl || setActiveNavigate)) {
+      if (redirectUrl || taskUrl || setActiveNavigate) {
         await tracker.track(async () => {
           if (!this.client) {
             // Typescript is not happy because since thinks this.client might have changed to undefined because the function is asynchronous.

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

@@ -1,5 +1,4 @@
 import type {
-  ActiveSessionResource,
   ClientJSON,
   ClientJSONSnapshot,
   ClientResource,
@@ -57,13 +56,6 @@ export class Client extends BaseResource implements ClientResource {
     return this.signIn;
   }
 
-  /**
-   * @deprecated Use `signedInSessions()` instead.
-   */
-  get activeSessions(): ActiveSessionResource[] {
-    return this.sessions.filter(s => s.status === 'active') as ActiveSessionResource[];
-  }
-
   get signedInSessions(): SignedInSessionResource[] {
     return this.sessions.filter(s => s.status === 'active' || s.status === 'pending') as SignedInSessionResource[];
   }

packages/localizations/README.md

@@ -66,6 +66,7 @@ We're open to all community contributions! If you'd like to contribute in any wa
 1. Open the [`localizations/src/en-US.ts`](https://github.com/clerk/javascript/blob/main/packages/localizations/src/en-US.ts) file and add your new key to the object. `en-US` is the default language. If you feel comfortable adding your message in another language than English, feel free to also edit other files.
 
 1. Use the new localization key inside the component. There are two ways:
+
    - The string is inside a component like `<Text>`:
 
      ```diff