npm package

@tacobase/react

Drop-in React bindings for tacobase. Auth state, live data, and realtime updates with zero boilerplate.

terminal

npm install @tacobase/react

TacoProvider

Wrap your app once. All hooks read from this context. Handles token refresh and auth state automatically.

import { TacoProvider } from '@tacobase/react'

export default function App() {
  return (
    <TacoProvider
      url={process.env.NEXT_PUBLIC_TACOBASE_URL!}
      apiKey={process.env.NEXT_PUBLIC_TACOBASE_API_KEY!}
    >
      <YourApp />
    </TacoProvider>
  )
}

useAuth

Current user, loading state, and all auth actions. Re-renders automatically when auth state changes.

import { useAuth } from '@tacobase/react'

function Header() {
  const { user, loading, isAuthenticated, signOut } = useAuth()

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

  return isAuthenticated ? (
    <div>
      <span>{user.email}</span>
      <button onClick={signOut}>Sign out</button>
    </div>
  ) : (
    <a href="/login">Sign in</a>
  )
}

AuthForm

Drop-in sign-in / sign-up form with OAuth provider buttons. Handles everything — just pass an onSuccess callback.

import { AuthForm } from '@tacobase/react'

function LoginPage() {
  return (
    <AuthForm
      providers={['google', 'github']}
      onSuccess={(user) => router.push('/dashboard')}
    />
  )
}

useCollection

Paginated list from any collection. Accepts filter, sort, expand, and page options. Re-fetches when options change.

import { useCollection } from '@tacobase/react'

function Posts() {
  const { items, loading, error, refresh } = useCollection('posts', {
    filter: 'published = true',
    sort: '-created',
    expand: 'author',
    page: 1,
    perPage: 20,
  })

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

  return (
    <ul>
      {items.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  )
}

useRealtime

Like useCollection but live — subscribes over WebSocket and updates automatically when records change. No polling.

import { useRealtime } from '@tacobase/react'

function LiveFeed() {
  const { items, loading } = useRealtime('messages', {
    sort: 'created',
  })

  return (
    <ul>
      {items.map(msg => (
        <li key={msg.id}>{msg.text}</li>
      ))}
    </ul>
  )
}

Related packages

@tacobase/client

Core SDK — CRUD, auth, realtime, storage.

@tacobase/taco

Installs @tacobase/client + writes TACOBASE.md AI context.

Vite + React example

Full working SPA using @tacobase/react.

Ready to build?

Get credentials from the dashboard or spin up an instant project in one command.

Create a project Read the docs