How to Use Supabase with React

1npm install @supabase/supabase-js
2
3// src/lib/supabase.ts
4import { createClient } from '@supabase/supabase-js'
5
6export const supabase = createClient(
7  import.meta.env.VITE_SUPABASE_URL,
8  import.meta.env.VITE_SUPABASE_ANON_KEY
9)

1-- Run in Supabase SQL Editor
2create table public.todos (
3  id bigint generated always as identity primary key,
4  task text not null,
5  is_complete boolean default false,
6  user_id uuid not null references auth.users on delete cascade,
7  created_at timestamptz default now()
8);
9
10alter table public.todos enable row level security;
11
12create policy "Users can read own todos"
13  on public.todos for select
14  to authenticated
15  using ((select auth.uid()) = user_id);
16
17create policy "Users can insert own todos"
18  on public.todos for insert
19  to authenticated
20  with check ((select auth.uid()) = user_id);
21
22create policy "Users can update own todos"
23  on public.todos for update
24  to authenticated
25  using ((select auth.uid()) = user_id);
26
27create policy "Users can delete own todos"
28  on public.todos for delete
29  to authenticated
30  using ((select auth.uid()) = user_id);
31
32-- Add to realtime publication for subscriptions
33alter publication supabase_realtime add table todos;

1import { useEffect, useState } from 'react'
2import { supabase } from '../lib/supabase'
3
4interface Todo {
5  id: number
6  task: string
7  is_complete: boolean
8}
9
10export function TodoList() {
11  const [todos, setTodos] = useState<Todo[]>([])
12  const [loading, setLoading] = useState(true)
13
14  useEffect(() => {
15    async function fetchTodos() {
16      const { data, error } = await supabase
17        .from('todos')
18        .select('*')
19        .order('created_at', { ascending: false })
20
21      if (error) console.error('Error fetching todos:', error)
22      else setTodos(data || [])
23      setLoading(false)
24    }
25
26    fetchTodos()
27  }, [])
28
29  if (loading) return <p>Loading...</p>
30
31  return (
32    <ul>
33      {todos.map((todo) => (
34        <li key={todo.id}>
35          <span style={{ textDecoration: todo.is_complete ? 'line-through' : 'none' }}>
36            {todo.task}
37          </span>
38        </li>
39      ))}
40    </ul>
41  )
42}

1async function addTodo(task: string, userId: string) {
2  const { data, error } = await supabase
3    .from('todos')
4    .insert({ task, user_id: userId })
5    .select()
6    .single()
7
8  if (error) {
9    console.error('Insert error:', error)
10    return null
11  }
12  return data
13}
14
15async function toggleTodo(id: number, isComplete: boolean) {
16  const { error } = await supabase
17    .from('todos')
18    .update({ is_complete: !isComplete })
19    .eq('id', id)
20
21  if (error) console.error('Update error:', error)
22}
23
24async function deleteTodo(id: number) {
25  const { error } = await supabase
26    .from('todos')
27    .delete()
28    .eq('id', id)
29
30  if (error) console.error('Delete error:', error)
31}

1useEffect(() => {
2  // Initial fetch
3  fetchTodos()
4
5  // Subscribe to real-time changes
6  const channel = supabase
7    .channel('todos-changes')
8    .on(
9      'postgres_changes',
10      { event: '*', schema: 'public', table: 'todos' },
11      (payload) => {
12        if (payload.eventType === 'INSERT') {
13          setTodos((prev) => [payload.new as Todo, ...prev])
14        }
15        if (payload.eventType === 'UPDATE') {
16          setTodos((prev) =>
17            prev.map((t) => (t.id === payload.new.id ? payload.new as Todo : t))
18          )
19        }
20        if (payload.eventType === 'DELETE') {
21          setTodos((prev) => prev.filter((t) => t.id !== payload.old.id))
22        }
23      }
24    )
25    .subscribe()
26
27  // Cleanup subscription on unmount
28  return () => {
29    supabase.removeChannel(channel)
30  }
31}, [])