chore(examples): Use updated Clerk SDK

[wobsoriano]

Summary by CodeRabbit

• Chores

  • Updated TanStack and Clerk dependencies to stable versions
  • Added srvx runtime dependency

• Refactor

  • Restructured Clerk authentication integration with improved middleware handling

[coderabbitai]

Walkthrough

This PR refactors Clerk authentication integration in the TanStack React Start example from a server-handler approach to a middleware-based approach. It removes the default server export, adds a start.ts middleware configuration, updates route handling to use the auth() function, and bumps dependencies including the new srvx runtime package.

Changes

Cohort / File(s)	Summary
Clerk middleware and server configuration examples/react/start-clerk-basic/src/server.ts, examples/react/start-clerk-basic/src/start.ts	Removed server handler integration with clerkHandler and defaultStreamHandler from server.ts; added new start.ts exporting startInstance with requestMiddleware configured for clerkMiddleware.
Route and authentication updates examples/react/start-clerk-basic/src/routes/__root.tsx, examples/react/start-clerk-basic/src/routes/_authed.tsx	Updated __root.tsx to use auth() function instead of getAuth(getRequest()), and reordered imports in _authed.tsx.
Dependency management examples/react/start-clerk-basic/package.json	Bumped @clerk/tanstack-react-start, @tanstack/react-router, @tanstack/react-router-devtools, and @tanstack/react-start to non-alpha versions; added srvx 0.8.15 as new runtime dependency.

Sequence Diagram

sequenceDiagram
    participant Client
    participant Start as TanStack Start
    participant Middleware as requestMiddleware
    participant ClerkMW as clerkMiddleware()
    participant Auth as auth()
    participant Server as Route Handler

    Client->>Start: HTTP Request
    Start->>Middleware: Process request
    Middleware->>ClerkMW: Execute clerk middleware
    ClerkMW->>ClerkMW: Initialize Clerk context
    ClerkMW-->>Middleware: Context ready
    Middleware->>Server: Route to handler
    Server->>Auth: Fetch auth context
    Auth-->>Server: Return auth data
    Server-->>Client: Response

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Changes involve structural refactoring of authentication integration pattern (server handler → middleware approach), dependency version bumping, and import reorganization across multiple files. While individual changes are straightforward, the architectural shift requires understanding both the old and new patterns.

Possibly related PRs

• chore(examples): Update Clerk server handler usage #5026: Modifies the same Clerk/TanStack Start server integration in src/server.ts, specifically the server handler wiring logic.
• fix: various fixes #5215: Replaces default start exports with named startInstance export and adjusts start-entry configuration, mirroring the architectural change in this PR.

Suggested labels

package: react-start

Suggested reviewers

• schiller-manuel

Poem

🐰 Hopping through the code, what a clever refactor today,
From handlers to middleware, we're showing the way!
Clerk's auth takes the stage, now middleware-bound,
With srvx and updates, the example is sound! 🚀

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "chore(examples): Use updated Clerk SDK" directly and accurately describes the main objective of the changeset. The changes comprehensively update the Clerk integration in the example application, including bumping Clerk-related dependencies to newer non-alpha versions in package.json and refactoring the authentication integration pattern to align with the updated SDK's API (replacing the old clerkHandler approach with the new auth() function and clerkMiddleware). The title is concise, clear, and specific enough that a reviewer scanning the history would immediately understand this is about modernizing the Clerk SDK usage in the example project.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b3ea474 and cfa8b3d.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (2)

• examples/react/start-clerk-basic/package.json (1 hunks)
• examples/react/start-clerk-basic/src/start.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• examples/react/start-clerk-basic/src/start.ts

🧰 Additional context used

📓 Path-based instructions (2)

**/package.json

📄 CodeRabbit inference engine (AGENTS.md)

Use workspace:* protocol for internal dependencies in package.json files

Files:

• examples/react/start-clerk-basic/package.json

examples/{react,solid}/**

📄 CodeRabbit inference engine (AGENTS.md)

Keep example applications under examples/react/ and examples/solid/

Files:

• examples/react/start-clerk-basic/package.json

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Preview
• GitHub Check: Test

🔇 Additional comments (2)

examples/react/start-clerk-basic/package.json (2)

21-21: Verify srvx version pinning strategy.

The new srvx runtime dependency is pinned to an exact version (0.8.15) rather than using a semver range. Confirm this is intentional for the middleware setup and that the version is compatible with the other updated dependencies and the TanStack React Start runtime requirements.

---

12-15: Update TanStack dependencies to use workspace:* protocol.

Per the coding guidelines, internal monorepo dependencies should use the workspace:* protocol in package.json files. This ensures version consistency across the monorepo and enables local development without npm registry lookups.

Apply this diff:

  "dependencies": {
-   "@clerk/tanstack-react-start": "^0.26.3",
-   "@tanstack/react-router": "^1.133.8",
-   "@tanstack/react-router-devtools": "^1.133.8",
-   "@tanstack/react-start": "^1.133.8",
+   "@clerk/tanstack-react-start": "^0.26.3",
+   "@tanstack/react-router": "workspace:*",
+   "@tanstack/react-router-devtools": "workspace:*",
+   "@tanstack/react-start": "workspace:*",

Likely an incorrect or invalid review comment.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit cfa8b3d

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:unit,tes...	✅ Succeeded	5m 52s	View ↗
nx run-many --target=build --exclude=examples/*...	✅ Succeeded	1m 35s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-10-17 22:54:49 UTC

[pkg-pr-new]

More templates

• tanstack-router-solid-example-basic
• tanstack-router-solid-example-basic-devtools-panel
• tanstack-router-solid-example-basic-file-based
• tanstack-router-solid-example-basic-non-nested-devtools
• tanstack-router-solid-example-basic-solid-query
• tanstack-router-solid-example-basic-solid-query-file-based
• tanstack-router-solid-example-basic-ssr-streaming-file-based
• tanstack-router-solid-example-kitchen-sink-file-based
• tanstack-router-solid-example-quickstart-file-based
• tanstack-solid-start-example-bare
• tanstack-solid-start-example-basic
• tanstack-solid-start-example-basic-static
• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-authenticated-routes-firebase
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-devtools-panel
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-non-nested-devtools
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-i18n-paraglide
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-esbuild-file-based
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• router-monorepo-react-query
• router-mono-simple
• router-mono-simple-lazy
• tanstack-router-react-example-scroll-restoration
• tanstack-search-validator-adapters
• tanstack-start-example-bare
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-start-example-basic-cloudflare
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-static
• tanstack-start-bun-hosting
• tanstack-start-example-clerk-basic
• tanstack-start-example-convex-trellaux
• tanstack-start-example-counter
• tanstack-start-i18n-paraglide
• tanstack-start-example-large
• tanstack-start-example-material-ui
• tanstack-start-streaming-data-from-server-functions
• tanstack-start-example-supabase-basic
• tanstack-start-tailwind-v4
• tanstack-start-example-trellaux
• tanstack-start-example-workos
• tanstack-router-react-example-view-transitions
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5514

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5514

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@5514

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5514

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@5514

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@5514

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@5514

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@5514

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5514

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5514

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5514

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@5514

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@5514

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@5514

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@5514

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@5514

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@5514

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@5514

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@5514

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@5514

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5514

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@5514

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@5514

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5514

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5514

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5514

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5514

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5514

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5514

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@5514

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5514

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5514

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5514

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5514

commit: cfa8b3d