fix(clerk): upgrade add-on to @clerk/tanstack-react-start with server middleware#408
fix(clerk): upgrade add-on to @clerk/tanstack-react-start with server middleware#408Meet-08 wants to merge 4 commits intoTanStack:mainfrom
Conversation
Changes: - Replaced @clerk/clerk-react with @clerk/tanstack-react-start in package.json & info.json - Updated provider.tsx, header-user.tsx, and demo/clerk.tsx imports to new package - Replaced non-existent SignedIn/SignedOut components with <Show when='...'> in header-user.tsx - Added src/start.ts integrating clerkMiddleware() into createStart() - Registered CLERK_SECRET_KEY as required/secret in info.json and scaffolded .env.local
|
📝 WalkthroughWalkthroughThis PR migrates Clerk usage to the TanStack React Start integration: updates imports and dependency, replaces SignedIn/SignedOut patterns with Show predicates, adds a start.ts wiring clerkMiddleware into Start, and adds CLERK_SECRET_KEY to env metadata and template. ChangesClerk TanStack Start migration
Sequence DiagramsequenceDiagram
participant Browser as Browser (UI)
participant Start as TanStack React Start
participant Clerk as Clerk Middleware/Service
Browser->>Start: HTTP request / user action
Start->>Clerk: clerkMiddleware() verifies session (uses CLERK_SECRET_KEY)
Clerk-->>Start: auth result (session/user)
Start-->>Browser: renders components (HeaderUser uses Show when="signed-in"/"signed-out")
Browser->>Clerk: client-side calls (SignIn/SignOut/UserButton) via TanStack client bindings
Clerk-->>Browser: client auth state updates
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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. Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.Comment |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/create/src/frameworks/react/add-ons/clerk/assets/src/routes/demo/clerk.tsx (1)
1-8:⚠️ Potential issue | 🔴 Critical | ⚡ Quick win
useUseris imported twice — this is a compile-breaking duplicate identifier, and@clerk/clerk-reactwas never fully removed.Line 1 adds the new
useUserimport from@clerk/tanstack-react-start, but the old@clerk/clerk-reactimport block (lines 3–8) was never removed. This leavesuseUserdeclared twice, which TypeScript will reject as a duplicate identifier.SignIn,SignedIn, andSignedOutare also still sourced from the old package, keeping the dependency that the PR intends to remove.
@clerk/tanstack-react-startre-exportsSignedIn,SignedOut,SignIn, anduseUser, so the entire old import block can be replaced.Additionally,
@clerk/tanstack-react-startis currently in beta — worth noting for production scaffolding decisions.🐛 Proposed fix — consolidate into a single import from the new package
-import { useUser } from '@clerk/tanstack-react-start' -import { createFileRoute } from '@tanstack/react-router' -import { - SignIn, - SignedIn, - SignedOut, - useUser, -} from '@clerk/clerk-react' +import { + SignIn, + SignedIn, + SignedOut, + useUser, +} from '@clerk/tanstack-react-start' +import { createFileRoute } from '@tanstack/react-router'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/create/src/frameworks/react/add-ons/clerk/assets/src/routes/demo/clerk.tsx` around lines 1 - 8, You have a duplicate import of useUser and leftover imports from `@clerk/clerk-react`; remove the entire import block that pulls SignIn, SignedIn, SignedOut, and useUser from '@clerk/clerk-react' and consolidate them into the single new import from '@clerk/tanstack-react-start' (so import useUser, SignIn, SignedIn, SignedOut together alongside any existing imports like createFileRoute), ensuring only one useUser symbol is imported and the old package reference is deleted.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In
`@packages/create/src/frameworks/react/add-ons/clerk/assets/src/routes/demo/clerk.tsx`:
- Around line 1-8: You have a duplicate import of useUser and leftover imports
from `@clerk/clerk-react`; remove the entire import block that pulls SignIn,
SignedIn, SignedOut, and useUser from '@clerk/clerk-react' and consolidate them
into the single new import from '@clerk/tanstack-react-start' (so import
useUser, SignIn, SignedIn, SignedOut together alongside any existing imports
like createFileRoute), ensuring only one useUser symbol is imported and the old
package reference is deleted.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: eb3ff097-3151-4815-b1e0-80ed77ff12a4
📒 Files selected for processing (2)
packages/create/src/frameworks/react/add-ons/clerk/assets/src/routes/demo/clerk.tsxpackages/create/src/frameworks/react/add-ons/clerk/info.json
✅ Files skipped from review due to trivial changes (1)
- packages/create/src/frameworks/react/add-ons/clerk/info.json
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@clerk/clerk-reactwith@clerk/tanstack-react-startin bothdependenciesandpackageAdditionsCLERK_SECRET_KEYtoenvVarswithsecret: true— required byclerkMiddleware()for backend token verificationAsset files (
provider.tsx,header-user.tsx,demo/clerk.tsx)@clerk/tanstack-react-start<SignedIn>/<SignedOut>with<Show when="signed-in">/<Show when="signed-out">, which is the correct control component API in the new SDKsrc/start.ts(new file)createStart()withclerkMiddleware()registered as request middleware, making auth context available to all server functions and enabling route-level protection_dot_env.local.appendCLERK_SECRET_KEY=to the generated.env.localtemplate alongside the existingVITE_CLERK_PUBLISHABLE_KEYNotes
@clerk/tanstack-react-startre-exports all client-side hooks and components, so there are no breaking changes for client-side usagecreateStartis imported from@tanstack/react-start, which is already a base dependency — no additional packages introducedtanstackStart()Vite plugin auto-discoverssrc/start.tsby convention; no changes tovite.config.tsare requiredSummary by CodeRabbit
New Features
Chores