fix clerk

Author: tannerlinsley

package.json

@@ -17,7 +17,7 @@
     "linkAll": "node scripts/link.js"
   },
   "dependencies": {
-    "@clerk/tanstack-start": "^0.11.5",
+    "@clerk/tanstack-react-start": "^0.21.5",
     "@convex-dev/react-query": "0.0.0-alpha.8",
     "@erquhart/convex-oss-stats": "^0.5.5",
     "@floating-ui/react": "^0.27.8",

pnpm-lock.yaml

@@ -7,6 +7,7 @@ import { DefaultCatchBoundary } from './components/DefaultCatchBoundary'
 import { NotFound } from './components/NotFound'
 import { QueryClient } from '@tanstack/react-query'
 import { GamOnPageChange } from './components/Gam'
+import { ClerkProvider } from '@clerk/tanstack-react-start'
 
 export function createRouter() {
   const CONVEX_URL =

src/router.tsx

@@ -11,7 +11,7 @@ import {
   Scripts,
 } from '@tanstack/react-router'
 import { QueryClient } from '@tanstack/react-query'
-import { ClerkProvider } from '@clerk/tanstack-start'
+import { ClerkProvider } from '@clerk/tanstack-react-start'
 import appCss from '~/styles/app.css?url'
 import carbonStyles from '~/styles/carbon.css?url'
 import { seo } from '~/utils/seo'
@@ -150,12 +150,15 @@ export const Route = createRootRouteWithContext<{
 })
 
 function RootComponent() {
+  // Import your Publishable Key
+  const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+  if (!PUBLISHABLE_KEY) {
+    throw new Error('Add your Clerk Publishable Key to the .env file')
+  }
+
   return (
-    <ClerkProvider
-      waitlistUrl="/login"
-      afterSignInUrl="/dashboard"
-      afterSignUpUrl="/dashboard"
-    >
+    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
       <SearchProvider>
         <RootDocument>
           <Outlet />

src/routes/__root.tsx

@@ -4,7 +4,7 @@ import {
   UserProfile,
   SignInButton,
   SignOutButton,
-} from '@clerk/tanstack-start'
+} from '@clerk/tanstack-react-start'
 import { FaSignOutAlt } from 'react-icons/fa'
 
 export const Route = createFileRoute({

src/routes/_libraries/account.$.tsx

@@ -4,7 +4,7 @@ import {
   UserButton,
   Waitlist,
   SignIn,
-} from '@clerk/tanstack-start'
+} from '@clerk/tanstack-react-start'
 import * as React from 'react'
 
 export const Route = createFileRoute({

src/routes/_libraries/login.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Link, Outlet, useLocation } from '@tanstack/react-router'
-import { SignedIn, SignedOut, UserButton } from '@clerk/tanstack-start'
+import { SignedIn, SignedOut, UserButton } from '@clerk/tanstack-react-start'
 import { CgClose, CgMenuLeft, CgMusicSpeaker } from 'react-icons/cg'
 import { MdLibraryBooks, MdLineAxis, MdSupport } from 'react-icons/md'
 import { twMerge } from 'tailwind-merge'

src/routes/_libraries/route.tsx

@@ -1,5 +1,5 @@
 import { createServerFn } from '@tanstack/react-start'
-import { getAuth } from '@clerk/tanstack-start/server'
+import { getAuth } from '@clerk/tanstack-react-start/server'
 import { getWebRequest } from '@tanstack/react-start/server'
 import { redirect } from '@tanstack/react-router'