tacobase
⚡Beginner

Vite + React

A full single-page app with authentication, CRUD on a posts collection, and the AuthForm drop-in component. The definitive starter for React SPAs with tacobase.

ViteReactTypeScriptCRUDAuth

What's in this example

AuthForm

Drop-in auth component with OAuth support (Google, GitHub).

useAuth

Hook for auth state: user, loading, signOut.

useCollection

Paginated list from a collection with filter + sort.

CRUD

Create posts, toggle published, and delete records.

Packages

# package.json dependencies

@tacobase/client latest

@tacobase/react latest

Setup

cp .env.example .env
# VITE_TACOBASE_URL=https://your-app.tacobase.dev
# VITE_TACOBASE_API_KEY=tbk_...

npm install
npm run dev

Key files

src/lib/tacobase.ts

// src/lib/tacobase.ts
import { createClient } from '@tacobase/client'

const db = createClient(
  import.meta.env.VITE_TACOBASE_URL,
  import.meta.env.VITE_TACOBASE_API_KEY,
)

export default db

src/App.tsx

import { useAuth, AuthForm, useCollection } from '@tacobase/react'
import db from './lib/tacobase'

export default function App() {
  const { user, loading, signOut } = useAuth()

  if (loading) return <p>Loading...</p>

  // Show drop-in auth form when not signed in
  if (!user) {
    return (
      <AuthForm
        providers={['google', 'github']}
        onSuccess={() => window.location.reload()}
      />
    )
  }

  return <PostManager userId={user.id} />
}

function PostManager({ userId }: { userId: string }) {
  const { data: posts, loading } = useCollection('posts', {
    filter: `author = "${userId}"`,
    sort: '-created',
  })

  async function createPost(title: string) {
    await db.collection('posts').create({ title, author: userId })
  }

  async function deletePost(id: string) {
    await db.collection('posts').delete(id)
  }

  // ...
}
← Auth AppNext: Next.js →