README.md

Setting up Clerk

1. Create an application in the Clerk dashboard.

2. Copy its publishable and secret keys into .env.local:

   VITE_CLERK_PUBLISHABLE_KEY=pk_test_...
   CLERK_SECRET_KEY=sk_test_...

3. Start the app and visit /demo/clerk.

What's wired up

• clerkMiddleware() authenticates each server request from src/start.ts.
• <ClerkProvider> supplies auth state throughout the app.
• <SignInButton> and <UserButton> in the header respond to the session.
• /demo/clerk shows Clerk's prebuilt sign-in UI and signed-in user data.

Protecting a route

Use auth() in a loader or server function when authorization must happen on the server:

import { createFileRoute, redirect } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
import { auth } from '@clerk/tanstack-react-start/server'

const getAuth = createServerFn({ method: 'GET' }).handler(async () => {
  const { userId } = await auth()
  return { userId }
})

export const Route = createFileRoute('/dashboard')({
  beforeLoad: async () => {
    const { userId } = await getAuth()
    if (!userId) throw redirect({ to: '/' })
  },
})

<Show when="signed-in"> remains useful for presentation, but server-side checks are the security boundary. See Clerk's TanStack Start docs.

Production checklist

• Set both keys in the production environment; never expose CLERK_SECRET_KEY.
• Use production keys from a dedicated production Clerk instance.
• Configure the production domain and any social connections in the Clerk dashboard.