āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/getting-started/quickstart.tanstack-react-start ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
[!WARNING] The TanStack React Start SDK is currently in beta. It is not yet recommended for production use.
<TutorialHero exampleRepo={[ { title: "TanStack React Start Quickstart Repo", link: "https://github.com/clerk/clerk-tanstack-react-start-quickstart"
}
]} beforeYouStart={[ { title: "Set up a Clerk application", link: "/docs/getting-started/quickstart/setup-clerk", icon: "clerk", }, { title: "Create a TanStack React Start application", link: "https://tanstack.com/start/latest/docs/framework/react/getting-started", icon: "tanstack", } ]} />
<Steps> ## Install `@clerk/tanstack-react-start`The Clerk TanStack React Start SDK gives you access to prebuilt components, React hooks, and helpers to make user authentication easier.
Run the following command to install the SDK:
npm install @clerk/tanstack-react-start
The final result should resemble the following:
VITE_CLERK_PUBLISHABLE_KEY={{pub_key}}
CLERK_SECRET_KEY={{secret}}
clerkMiddleware() to your appclerkMiddleware() grants you access to user authentication state throughout your app, on any server function or route.
Create a src/start.ts file with the following code:
import { clerkMiddleware } from '@clerk/tanstack-react-start/server'
import { createStart } from '@tanstack/react-start'
export const startInstance = createStart(() => {
return {
requestMiddleware: [clerkMiddleware()],
}
})
<ClerkProvider> to your appAdd the <ClerkProvider> component to your app's root route, as shown in the following example:
import { ClerkProvider } from '@clerk/tanstack-react-start'
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import { TanStackDevtools } from '@tanstack/react-devtools'
import Header from '../components/Header'
import appCss from '../styles.css?url'
export const Route = createRootRoute({
head: () => ({
meta: [
{
charSet: 'utf-8',
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1',
},
{
title: 'TanStack Start Starter',
},
],
links: [
{
rel: 'stylesheet',
href: appCss,
},
],
}),
shellComponent: RootDocument,
})
function RootDocument({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider>
<html lang="en">
<head>
<HeadContent />
</head>
<body>
<Header />
{children}
<TanStackDevtools
config={{
position: 'bottom-right',
}}
plugins={[
{
name: 'Tanstack Router',
render: <TanStackRouterDevtoolsPanel />,
},
]}
/>
<Scripts />
</body>
</html>
</ClerkProvider>
)
}
To protect your pages on the client-side, you can use Clerk's prebuilt control components that control the visibility of content based on the user's authentication state.
The following example uses the following components:
<SignedIn>: Children of this component can only be seen while signed in.<SignedOut>: Children of this component can only be seen while signed out.<UserButton />: Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.<SignInButton />: An unstyled component that links to the sign-in page. In this example, since no props or environment variables are set for the sign-in URL, this component links to the Account Portal sign-in page.import { SignedIn, UserButton, SignedOut, SignInButton } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/')({
component: Home,
})
function Home() {
return (
<div>
<h1>Index Route</h1>
<SignedIn>
<p>You are signed in</p>
<UserButton />
</SignedIn>
<SignedOut>
<p>You are signed out</p>
<SignInButton />
</SignedOut>
</div>
)
}
To protect your routes, create a server function that checks the user's authentication state via the auth() method. If the user is not authenticated, they are redirected to a sign-in page. If authenticated, the user's userId is passed to the route, allowing access to the <Home /> component, which welcomes the user and displays their userId. The beforeLoad() method ensures authentication is checked before loading the page, and the loader() method returns the user data for use in the component.
[!TIP] Ensure that your app has the TanStack Start server handler configured in order for your server routes to work.
import { createFileRoute, redirect } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
import { auth } from '@clerk/tanstack-react-start/server'
const authStateFn = createServerFn({ method: 'GET' }).handler(async () => {
const { isAuthenticated, userId } = await auth()
if (!isAuthenticated) {
// This will error because you're redirecting to a path that doesn't exist yet
// You can create a sign-in route to handle this
// See https://clerk.com/docs/tanstack-react-start/guides/development/custom-sign-in-or-up-page
throw redirect({
to: '/sign-in',
})
}
return { userId }
})
export const Route = createFileRoute('/')({
component: Home,
beforeLoad: async () => await authStateFn(),
loader: async ({ context }) => {
return { userId: context.userId }
},
})
function Home() {
const state = Route.useLoaderData()
return <h1>Welcome! Your ID is {state.userId}!</h1>
}
Run your project with the following command:
<CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>
bash {{ filename: 'terminal' }} npm run dev
```bash {{ filename: 'terminal' }}
yarn dev
```
```bash {{ filename: 'terminal' }}
pnpm dev
```
```bash {{ filename: 'terminal' }}
bun dev
```
Visit your app's homepage at http://localhost:3000. Sign up to create your first user. </Steps>
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā