Merge branch 'main' into iago/orgs-924

Author: jacekradko

.changeset/pretty-rings-compare.md

@@ -0,0 +1,5 @@
+---
+"@clerk/shared": patch
+---
+
+Increase sampling for high-signal auth components on mount.

.changeset/quiet-bats-protect.md

@@ -0,0 +1,54 @@
+---
+'@clerk/react-router': major
+---
+
+Introduce [React Router middleware](https://reactrouter.com/how-to/middleware) support with `clerkMiddleware()` for improved performance and streaming capabilities.
+
+Usage of `rootAuthLoader` without the `clerkMiddleware()` installed is now deprecated and will be removed in the next major version.
+
+**Before (Deprecated - will be removed):**
+
+```tsx
+import { rootAuthLoader } from '@clerk/react-router/ssr.server'
+
+export const loader = (args: Route.LoaderArgs) => rootAuthLoader(args)
+```
+
+**After (Recommended):**
+
+1. Enable the `v8_middleware` future flag:
+
+```ts
+// react-router.config.ts
+export default {
+  future: {
+    v8_middleware: true,
+  },
+} satisfies Config;
+```
+
+2. Use the middleware in your app:
+
+```tsx
+import { clerkMiddleware, rootAuthLoader } from '@clerk/react-router/server'
+
+export const middleware: Route.MiddlewareFunction[] = [clerkMiddleware()]
+
+export const loader = (args: Route.LoaderArgs) => rootAuthLoader(args)
+```
+
+**Streaming Support (with middleware):**
+
+```tsx
+export const middleware: Route.MiddlewareFunction[] = [clerkMiddleware()]
+
+export const loader = (args: Route.LoaderArgs) => {
+  const nonCriticalData = new Promise((res) =>
+    setTimeout(() => res('non-critical'), 5000),
+  )
+
+  return rootAuthLoader(args, () => ({
+    nonCriticalData
+  }))
+}
+```

.changeset/tangy-bees-follow.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': minor
+---
+
+Improve error handling when loading clerk-js.

integration/presets/utils.ts

@@ -2,7 +2,9 @@ import path from 'node:path';
 
 export function linkPackage(pkg: string) {
   // eslint-disable-next-line turbo/no-undeclared-env-vars
-  if (process.env.CI === 'true') return '*';
+  if (process.env.CI === 'true') {
+    return '*';
+  }
 
   return `link:${path.resolve(process.cwd(), `packages/${pkg}`)}`;
 }

integration/templates/react-router-library/package.json

@@ -9,15 +9,14 @@
     "preview": "vite preview --port $PORT"
   },
   "dependencies": {
-    "@clerk/react-router": "^0.1.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^7.1.2"
+    "react-router": "^7.9.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^5.0.3",
     "globals": "^15.12.0",
     "typescript": "~5.7.3",
     "vite": "^6.0.1"

integration/templates/react-router-node/app/root.tsx

@@ -1,9 +1,11 @@
 import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';
 import { rootAuthLoader } from '@clerk/react-router/ssr.server';
 import { ClerkProvider } from '@clerk/react-router';
-
 import type { Route } from './+types/root';
 
+// TODO: Uncomment when published
+// export const middleware: Route.MiddlewareFunction[] = [clerkMiddleware()];
+
 export async function loader(args: Route.LoaderArgs) {
   return rootAuthLoader(args);
 }

integration/templates/react-router-node/app/routes/protected.tsx

@@ -14,7 +14,8 @@ export async function loader(args: Route.LoaderArgs) {
   const user = await createClerkClient({ secretKey: process.env.CLERK_SECRET_KEY }).users.getUser(userId);
 
   return {
-    user,
+    firstName: user.firstName,
+    emailAddress: user.emailAddresses[0].emailAddress,
   };
 }
 
@@ -24,8 +25,8 @@ export default function Profile({ loaderData }: Route.ComponentProps) {
       <h1>Protected</h1>
       <UserProfile />
       <ul>
-        <li>First name: {loaderData.user.firstName}</li>
-        <li>Email: {loaderData.user.emailAddresses[0].emailAddress}</li>
+        <li>First name: {loaderData.firstName}</li>
+        <li>Email: {loaderData.emailAddress}</li>
       </ul>
     </div>
   );

integration/templates/react-router-node/package.json

@@ -9,21 +9,20 @@
     "typecheck": "react-router typegen && tsc --build --noEmit"
   },
   "dependencies": {
-    "@clerk/react-router": "latest",
-    "@react-router/node": "^7.1.2",
-    "@react-router/serve": "^7.1.2",
+    "@react-router/node": "^7.9.1",
+    "@react-router/serve": "^7.9.1",
     "isbot": "^5.1.17",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router": "^7.1.2"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router": "^7.9.1"
   },
   "devDependencies": {
-    "@react-router/dev": "^7.1.2",
+    "@react-router/dev": "^7.9.1",
     "@types/node": "^20",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "typescript": "^5.7.3",
-    "vite": "^5.4.11",
-    "vite-tsconfig-paths": "^5.1.2"
+    "vite": "^7.1.5",
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }

integration/templates/react-router-node/react-router.config.ts

@@ -4,4 +4,8 @@ export default {
   // Config options...
   // Server-side render by default, to enable SPA mode set this to `false`
   ssr: true,
+  future: {
+    v8_middleware: true,
+    unstable_optimizeDeps: true,
+  },
 } satisfies Config;

integration/tests/react-router/basic.test.ts

@@ -5,7 +5,7 @@ import type { FakeUser } from '../../testUtils';
 import { createTestUtils, testAgainstRunningApps } from '../../testUtils';
 
 testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes], withPattern: ['react-router.node'] })(
-  'basic tests for @react-router',
+  'basic tests for @react-router with middleware',
   ({ app }) => {
     test.describe.configure({ mode: 'parallel' });