### Clone the Clerk TanStack Start Quickstart Repository Source: https://github.com/clerk/clerk-tanstack-react-start-quickstart/blob/main/README.md Use this command to clone the repository to your local machine. ```bash git clone https://github.com/clerk/clerk-tanstack-start-quickstart ``` -------------------------------- ### Complete Authentication Page Example Source: https://context7.com/clerk/clerk-tanstack-react-start-quickstart/llms.txt A full page implementation combining Show, UserButton, and SignInButton components with TanStack Router file-based routing. This example demonstrates a typical authenticated/unauthenticated view. ```tsx // src/routes/index.tsx import { Show, UserButton, SignInButton, } from '@clerk/tanstack-react-start' import { createFileRoute } from '@tanstack/react-router' export const Route = createFileRoute('/')({ component: Home, }) function Home() { return (

Index Route

You are signed in

You are signed out

) } ``` -------------------------------- ### Configure Vite with TanStack Start Plugin Source: https://context7.com/clerk/clerk-tanstack-react-start-quickstart/llms.txt Configure Vite with the TanStack Start plugin and React support for the development server. Ensure tsconfig-paths is also configured for module resolution. ```typescript // vite.config.ts import { tanstackStart } from '@tanstack/react-start/plugin/vite' import { defineConfig } from 'vite' import tsConfigPaths from 'vite-tsconfig-paths' import viteReact from '@vitejs/plugin-react' export default defineConfig({ server: { port: 3000, }, plugins: [ tsConfigPaths({ projects: ['./tsconfig.json'], }), tanstackStart(), viteReact(), ], }) ``` -------------------------------- ### Configure Clerk Middleware in TanStack Start Source: https://context7.com/clerk/clerk-tanstack-react-start-quickstart/llms.txt Add Clerk middleware to your TanStack Start instance to enable server-side authentication checks on all requests. This requires importing clerkMiddleware from '@clerk/tanstack-react-start/server'. ```typescript // src/start.ts import { clerkMiddleware } from '@clerk/tanstack-react-start/server'; import { createStart } from '@tanstack/react-start'; export const startInstance = createStart(() => { return { requestMiddleware: [clerkMiddleware()], }; }); ``` -------------------------------- ### Set Up Environment Variables for Clerk Source: https://context7.com/clerk/clerk-tanstack-react-start-quickstart/llms.txt Configure Clerk API keys in your environment variables. Get your keys from the Clerk dashboard. ```bash # .env file # Get your keys from https://dashboard.clerk.com/last-active?path=api-keys VITE_CLERK_PUBLISHABLE_KEY=pk_test_your_publishable_key CLERK_SECRET_KEY=sk_test_your_secret_key ``` -------------------------------- ### Set Up ClerkProvider in Root Layout Source: https://context7.com/clerk/clerk-tanstack-react-start-quickstart/llms.txt Wrap your application with ClerkProvider in the root layout component to enable authentication context throughout the component tree. This ensures Clerk's authentication state is available globally. ```tsx // src/routes/__root.tsx import * as React from 'react' import { ClerkProvider } from '@clerk/tanstack-react-start' import { HeadContent, Outlet, Scripts, createRootRoute, } from '@tanstack/react-router' export const Route = createRootRoute({ component: RootComponent, }) function RootComponent() { return ( ) } ``` -------------------------------- ### Conditional Rendering with Show Component Source: https://context7.com/clerk/clerk-tanstack-react-start-quickstart/llms.txt Use the Show component for conditional rendering based on authentication state. It accepts 'signed-in' or 'signed-out' as the 'when' prop. ```tsx import { Show } from '@clerk/tanstack-react-start' function ProtectedContent() { return (

Welcome! You have access to protected content.

Please sign in to view this content.

) } ``` -------------------------------- ### Configure TanStack Router Source: https://context7.com/clerk/clerk-tanstack-react-start-quickstart/llms.txt Set up the TanStack Router with default behaviors for preloading, error handling, and scroll restoration. This configuration is essential for client-side routing in React applications. ```typescript // src/router.tsx import { createRouter } from '@tanstack/react-router' import { routeTree } from './routeTree.gen' export function getRouter() { const router = createRouter({ routeTree, defaultPreload: 'intent', defaultErrorComponent: (err) =>

{err.error.stack}

, defaultNotFoundComponent: () =>

not found

, scrollRestoration: true, }) return router } declare module '@tanstack/react-router' { interface Register { router: ReturnType } } ``` -------------------------------- ### Implement SignInButton for Sign-in Modal Source: https://context7.com/clerk/clerk-tanstack-react-start-quickstart/llms.txt The SignInButton component provides a pre-styled button that opens the Clerk sign-in modal when clicked. Use it within a Show component when the user is signed out. ```tsx import { SignInButton, Show } from '@clerk/tanstack-react-start' function LoginPrompt() { return (

You are not signed in

) } ``` -------------------------------- ### Use UserButton for Account Management Source: https://context7.com/clerk/clerk-tanstack-react-start-quickstart/llms.txt The UserButton component displays the user's avatar and provides a dropdown menu for account management and sign-out. Use it within a Show component when the user is signed in. ```tsx import { UserButton, Show } from '@clerk/tanstack-react-start' function UserMenu() { return (

You are signed in

) } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.