TanStack Start + Convex + Better Auth

A full-stack application built with TanStack Start, Convex, and Better Auth for authentication.

Tech Stack

• Framework: TanStack Start
• Database: Convex
• Authentication: Better Auth with Convex adapter
• Styling: Tailwind CSS
• UI Components: Base UI

Getting Started

Prerequisites

• Bun installed
• Convex account

Installation

bun install

Environment Variables

Create a .env.local file:

VITE_CONVEX_URL=<your-convex-url>
CONVEX_DEPLOYMENT=<your-deployment>
VITE_CONVEX_SITE_URL=<your-convex-site-url>

Set Convex environment variables:

bunx convex env set BETTER_AUTH_SECRET=$(openssl rand -base64 32)
bunx convex env set SITE_URL http://localhost:3000

Development

Start Convex and the dev server:

bunx convex dev
bun dev

Scripts

bun dev          # Start development server
bun build        # Build for production
bun start        # Start production server
bun lint         # Run ESLint
bun format       # Run Prettier
bun check        # Run all checks

Project Structure

├── convex/                 # Convex backend
│   ├── auth.ts            # Better Auth setup
│   ├── auth.config.ts     # Auth configuration
│   ├── http.ts            # HTTP routes for auth
│   └── convex.config.ts   # Convex app config
├── src/
│   ├── components/        # React components
│   │   ├── ui/           # UI components (Base UI)
│   │   ├── login-form.tsx
│   │   ├── signup-form.tsx
│   │   └── user-menu.tsx
│   ├── integrations/
│   │   └── convex/       # Convex provider
│   ├── lib/
│   │   ├── auth-client.ts # Better Auth client
│   │   └── auth-server.ts # Server-side auth utilities
│   ├── routes/           # TanStack Router routes
│   │   ├── __root.tsx    # Root layout
│   │   ├── index.tsx     # Home page
│   │   ├── login.tsx     # Login page
│   │   ├── signup.tsx    # Signup page
│   │   └── api/auth/$.ts # Auth API catch-all
│   └── router.tsx        # Router configuration
└── package.json

Authentication

This project uses Better Auth with Convex as the database adapter. Authentication features:

• Email/password signup and login
• Session management
• Protected routes using <Authenticated>, <Unauthenticated>, <AuthLoading> components

Protecting Routes

import { Authenticated, Unauthenticated, AuthLoading } from "convex/react";

function MyPage() {
  return (
    <>
      <AuthLoading>Loading...</AuthLoading>
      <Authenticated>Protected content</Authenticated>
      <Unauthenticated>Please sign in</Unauthenticated>
    </>
  );
}