tacobase
🔐Beginner

Auth App

A minimal login and registration app built with Vite, React, and @tacobase/taco. Toggle between sign-in and sign-up in the same form. After auth, shows a simple dashboard with the user's info.

ViteReactTypeScriptAuth

What's in this example

Sign up

Email, password, and display name. Min 8-char password enforced.

Sign in

Email and password. Inline error messages on failure.

Protected dashboard

Shows email, name, user ID, and account creation date.

Sign out

Clears the session and returns to the auth form.

Packages

# package.json dependencies

@tacobase/taco latest

@tacobase/react latest

@tacobase/taco ships @tacobase/client as a dependency and writes TACOBASE.md to your project root on install so AI tools have full context.

Setup

# 1. Copy env template
cp .env.example .env

# Add your credentials from the tacobase dashboard
# VITE_TACOBASE_URL=https://your-app.tacobase.dev
# VITE_TACOBASE_API_KEY=tbk_...

# 2. Install — @tacobase/taco writes TACOBASE.md context automatically
npm install

# 3. Start
npm run dev

Key files

src/main.tsx

import { TacoProvider } from '@tacobase/react'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <TacoProvider
    url={import.meta.env.VITE_TACOBASE_URL}
    apiKey={import.meta.env.VITE_TACOBASE_API_KEY}
  >
    <App />
  </TacoProvider>
)

src/App.tsx

import { useAuth } from '@tacobase/react'

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

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

  return user ? <Dashboard /> : <AuthPage />
}

function AuthPage() {
  const [mode, setMode] = useState<'login' | 'register'>('login')
  const { signIn, signUp } = useAuth()

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (mode === 'login') {
      await signIn(email, password)
    } else {
      await signUp(email, password, { name })
    }
  }

  // ...form JSX
}

function Dashboard() {
  const { user, signOut } = useAuth()
  return (
    <div>
      <p>Welcome, {user?.email}</p>
      <button onClick={signOut}>Sign out</button>
    </div>
  )
}
← All examplesNext: Vite + React →