docs: React Router middleware introduction

docs/manifest.json

@@ -3648,6 +3648,11 @@
                           "title": "Overview",
                           "href": "/docs/references/react-router/overview"
                         },
+                        {
+                          "title": "`clerkMiddleware()`",
+                          "wrap": false,
+                          "href": "/docs/references/react-router/clerk-middleware"
+                        },
                         {
                           "title": "`rootAuthLoader()`",
                           "wrap": false,

docs/quickstarts/react-router.mdx

@@ -74,23 +74,36 @@ This tutorial assumes that you're using React Router **v7.1.2 or later** in fram
   CLERK_SECRET_KEY={{secret}}
   ```
 
-  ## Configure `rootAuthLoader()`
+  ## Add `clerkMiddleware()` and `rootAuthLoader()` to your app
 
-  The `rootAuthLoader()` function provides access to authentication state in any React Router route.
+  `clerkMiddleware()` grants you access to user authentication state throughout your app.
 
-  The following code shows how to add this function to your `root.tsx` file. If you're using [Clerk's React Router quickstart](https://github.com/clerk/clerk-react-router-quickstart) or the [React Router template](https://reactrouter.com/start/framework/installation), most of this code will already be present.
+  React Router middleware requires opting in via a future flag. Add the following to your `react-router.config.ts` file:
 
-  To load additional data or configure options, see the [`rootAuthLoader()`](/docs/references/react-router/root-auth-loader) reference.
+  ```ts {{ filename: 'react-router.config.ts' }}
+  import type { Config } from "@react-router/dev/config";
+
+  export default {
+    // ...
+    future: {
+      v8_middleware: true,
+    },
+  } satisfies Config;
+  ```
+
+  The following code shows how to configure both functions in your `root.tsx` file. If you're using [Clerk's React Router quickstart](https://github.com/clerk/clerk-react-router-quickstart) or the [React Router template](https://reactrouter.com/start/framework/installation), most of this code will already be present.
+
+  To load additional data or configure options, see the [`clerkMiddleware()`](/docs/references/react-router/clerk-middleware) reference.
 
   ```tsx {{ filename: 'app/root.tsx', mark: [1, [6, 8]], collapsible: true }}
-  import { rootAuthLoader } from '@clerk/react-router/ssr.server'
+  import { clerkMiddleware, rootAuthLoader } from '@clerk/react-router/server'
   import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router'
   import type { Route } from './+types/root'
   import stylesheet from './app.css?url'
 
-  export async function loader(args: Route.LoaderArgs) {
-    return rootAuthLoader(args)
-  }
+  export const middleware: Route.MiddlewareFunction[] = [clerkMiddleware()]
+
+  export const loader = (args: Route.LoaderArgs) => rootAuthLoader(args)
 
   export const links: Route.LinksFunction = () => [
     { rel: 'preconnect', href: 'https://fonts.googleapis.com' },

docs/references/react-router/clerk-middleware.mdx

@@ -0,0 +1,21 @@
+---
+title: '`clerkMiddleware()` | React Router'
+description: The `clerkMiddleware()` function allows you to protect your Astro application using Middleware.
+sdk: react-router
+---
+
+The `clerkMiddleware()` helper integrates Clerk authentication into your Astro application through middleware.
+
+## Configure `clerkMiddleware()`
+
+Create a `middleware.ts` file inside your `src/` directory.
+
+```ts {{ filename: 'src/middleware.ts' }}
+import { clerkMiddleware } from '@clerk/astro/server'
+
+export const onRequest = clerkMiddleware()
+```
+
+## `clerkMiddleware()` options
+
+<Include src="_partials/clerk-middleware-options" />

docs/references/react-router/read-session-data.mdx

@@ -20,8 +20,7 @@ In the following example, the `userId` is passed to the Backend SDK's `getUser()
 
 ```tsx {{ filename: 'app/routes/profile.tsx' }}
 import { redirect } from 'react-router'
-import { getAuth } from '@clerk/react-router/ssr.server'
-import { createClerkClient } from '@clerk/react-router/api.server'
+import { clerkClient, getAuth } from '@clerk/react-router/server'
 import type { Route } from './+types/profile'
 
 export async function loader(args: Route.LoaderArgs) {
@@ -33,10 +32,8 @@ export async function loader(args: Route.LoaderArgs) {
     return redirect('/sign-in?redirect_url=' + args.request.url)
   }
 
-  // Instantiate the Backend SDK and get the user's full `Backend User` object
-  const user = await createClerkClient({ secretKey: process.env.CLERK_SECRET_KEY }).users.getUser(
-    userId,
-  )
+  // Get the user's full `Backend User` object
+  const user = await clerkClient(args).users.getUser(userId)
 
   return {
     user: JSON.stringify(user),
@@ -61,8 +58,7 @@ Unlike the previous example that loads data when the page loads, the following e
 
 ```tsx {{ filename: 'app/routes/profile-form.tsx' }}
 import { redirect, Form } from 'react-router'
-import { getAuth } from '@clerk/react-router/ssr.server'
-import { createClerkClient } from '@clerk/react-router/api.server'
+import { clerkClient, getAuth } from '@clerk/react-router/server'
 import type { Route } from './+types/profile-form'
 
 export async function action(args: Route.ActionArgs) {
@@ -78,10 +74,8 @@ export async function action(args: Route.ActionArgs) {
   const formData = await args.request.formData()
   const name = formData.get('name')?.toString()
 
-  // Instantiate the Backend SDK and get the user's full `Backend User` object
-  const user = await createClerkClient({
-    secretKey: process.env.CLERK_SECRET_KEY,
-  }).users.getUser(userId)
+  // Get the user's full `Backend User` object
+  const user = await clerkClient(args).users.getUser(userId)
 
   return {
     name,

docs/references/react-router/verifying-oauth-access-tokens.mdx

@@ -20,18 +20,18 @@ In the following example, the `acceptsToken` parameter is set to only accept `oa
 - If the token is valid, it returns the authenticated user's subject and their associated scopes for use in the application logic.
 
 ```tsx
-import { getAuth } from '@clerk/react-router/ssr.server'
+import { getAuth } from '@clerk/react-router/server'
 import type { Route } from './+types/profile'
 
 export async function loader(args: Route.LoaderArgs) {
-  const { subject, scopes } = await getAuth(args, { acceptsToken: 'oauth_token' })
+  const { userId, scopes } = await getAuth(args, { acceptsToken: 'oauth_token' })
 
   // If getAuth() returns null, the token is invalid
-  if (!subject) {
+  if (!userId) {
     throw new Response('OAuth access token is invalid', { status: 401 })
   }
 
-  return { subject, scopes }
+  return { userId, scopes }
 }
 ```
 
@@ -43,7 +43,7 @@ In the following example, the `acceptsToken` parameter is set to accept any toke
 - Otherwise, it logs that the request uses a machine token and specifies its type.
 
 ```tsx
-import { getAuth } from '@clerk/react-router/ssr.server'
+import { getAuth } from '@clerk/react-router/server'
 import type { Route } from './+types/profile'
 
 export async function loader(args: Route.LoaderArgs) {