fix(clerk): upgrade add-on to @clerk/tanstack-react-start with server middleware

[Meet-08]

Problem

The Clerk add-on currently scaffolds @clerk/clerk-react, a client-side-only SDK with no server exports. This makes it incompatible with TanStack Start's primary value proposition — server functions — since any call to Clerk auth on the server fails at runtime with a missing export error.

Solution

Upgrade the add-on to @clerk/tanstack-react-start, Clerk's official TanStack Start SDK, which provides both client-side components/hooks and server-side exports (auth(), clerkMiddleware()) from a single package. This brings the scaffolded output in line with Clerk's official TanStack Start quickstart.

Changes

package.json / info.json

• Replaced @clerk/clerk-react with @clerk/tanstack-react-start in both dependencies and packageAdditions
• Added CLERK_SECRET_KEY to envVars with secret: true — required by clerkMiddleware() for backend token verification

Asset files (provider.tsx, header-user.tsx, demo/clerk.tsx)

• Updated all imports to point to @clerk/tanstack-react-start
• Replaced <SignedIn> / <SignedOut> with <Show when="signed-in"> / <Show when="signed-out">, which is the correct control component API in the new SDK

src/start.ts (new file)

• Scaffolds createStart() with clerkMiddleware() registered as request middleware, making auth context available to all server functions and enabling route-level protection

_dot_env.local.append

• Appended CLERK_SECRET_KEY= to the generated .env.local template alongside the existing VITE_CLERK_PUBLISHABLE_KEY

Notes

• @clerk/tanstack-react-start re-exports all client-side hooks and components, so there are no breaking changes for client-side usage
• createStart is imported from @tanstack/react-start, which is already a base dependency — no additional packages introduced
• The tanstackStart() Vite plugin auto-discovers src/start.ts by convention; no changes to vite.config.ts are required

Summary by CodeRabbit

• New Features

  • Added support for TanStack React Start framework integration with Clerk authentication.
  • Authentication components updated to use the TanStack-compatible variant.

• Chores

  • Updated Clerk dependency to compatible version for TanStack React Start.
  • Added required CLERK_SECRET_KEY environment variable configuration.

[changeset-bot]

⚠️ No Changeset found

Latest commit: d9b7f09

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 33b47dd9-bd03-4489-9848-e1fc0abb7662

📥 Commits

Reviewing files that changed from the base of the PR and between b8f4e63 and d9b7f09.

📒 Files selected for processing (7)

• packages/create/src/frameworks/react/add-ons/clerk/assets/_dot_env.local.append
• packages/create/src/frameworks/react/add-ons/clerk/assets/src/integrations/clerk/header-user.tsx
• packages/create/src/frameworks/react/add-ons/clerk/assets/src/integrations/clerk/provider.tsx
• packages/create/src/frameworks/react/add-ons/clerk/assets/src/routes/demo/clerk.tsx
• packages/create/src/frameworks/react/add-ons/clerk/assets/src/start.ts
• packages/create/src/frameworks/react/add-ons/clerk/info.json
• packages/create/src/frameworks/react/add-ons/clerk/package.json

---

📝 Walkthrough

Walkthrough

This pull request migrates the Clerk authentication integration from @clerk/clerk-react to @clerk/tanstack-react-start, updating imports across multiple files, replacing authentication component patterns, adding Clerk middleware wiring, and updating environment variable configuration.

Changes

Cohort / File(s)	Summary
Dependency & Import Updates package.json, provider.tsx, clerk.tsx	Replaced @clerk/clerk-react with @clerk/tanstack-react-start across dependency declaration and component imports.
Component Pattern Migration header-user.tsx	Migrated from SignedIn/SignedOut wrapper components to Show components with when="signed-in"/"signed-out" predicates for conditional rendering.
Middleware Integration start.ts	New file establishing Clerk middleware integration by creating a startInstance with clerkMiddleware as request middleware in TanStack React Start workflow.
Configuration & Environment info.json, _dot_env.local.append	Added CLERK_SECRET_KEY to environment variables (both in metadata and local environment template) to support server-side authentication.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 Hop along with Clerk so new,
From react to TanStack's brew,
Show when signed, Show when out,
Middleware hopping all about!
Secrets safe in env so bright,
Authentication feels just right. 🔐

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: upgrading the Clerk add-on from @clerk/clerk-react to @clerk/tanstack-react-start with server middleware integration, which aligns with the substantial changes across package dependencies, component imports, and new middleware setup.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

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

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

Tip

You can disable sequence diagrams in the walkthrough.

Disable the reviews.sequence_diagrams setting to disable sequence diagrams in the walkthrough.