Cansado de configurar Express, MongoDB, autenticação JWT e toda aquela infraestrutura complexa só para fazer um CRUD simples? Já passou horas tentando implementar subscriptions em real-time ou autenticação social que simplesmente não funciona como deveria? Hoje vou te apresentar o **Supabase** - a alternativa open-source ao Firebase que vai transformar como você desenvolve aplicações React. Ao final deste artigo, você saberá como construir aplicações completas com banco de dados PostgreSQL, autenticação robusta e real-time sem dor de cabeça. ## O que é Supabase? Imagine ter um backend completo com banco de dados PostgreSQL, autenticação, storage de arquivos e APIs RESTful/GraphQL - tudo pronto e configurado em minutos. É exatamente isso que o Supabase oferece. É como ter um DBA sênior, um especialista em segurança e um arquiteto de sistemas trabalhando 24/7 no seu projeto, enquanto você foca no que realmente importa: a experiência do usuário. ## Quando Usar Supabase? **Casos ideais:** - MVPs e protótipos rápidos que precisam de backend robusto - Aplicações que precisam de real-time (chat, dashboards, colaboração) - Projetos que exigem autenticação complexa (social logins, RLS) - Quando você quer PostgreSQL mas sem a complexidade de infraestrutura **Quando NÃO usar Supabase:** - Aplicações que precisam de lógica de negócio complexa no backend - Quando você precisa de controle total sobre a infraestrutura - Projetos que já têm um backend estabelecido e funcionando ## Configuração Inicial: Sua Primeira Aplicação React Vamos construir um exemplo prático: um sistema de tarefas com autenticação e atualizações em tempo real. ### Passo 1: Setup do Projeto ```bash # Criar projeto React npx create-react-app supabase-tasks cd supabase-tasks # Instalar dependências do Supabase npm install @supabase/supabase-js ``` ### Passo 2: Configuração do Cliente Supabase ```javascript // src/lib/supabase.js import { createClient } from '@supabase/supabase-js' const supabaseUrl = process.env.REACT_APP_SUPABASE_URL const supabaseKey = process.env.REACT_APP_SUPABASE_ANON_KEY export const supabase = createClient(supabaseUrl, supabaseKey) ``` Crie seu arquivo `.env.local` na raiz do projeto: ```env REACT_APP_SUPABASE_URL=https://your-project.supabase.co REACT_APP_SUPABASE_ANON_KEY=your-anon-key ``` ### Passo 3: Hook Personalizado para Dados ```javascript // src/hooks/useTasks.js import { useState, useEffect } from 'react' import { supabase } from '../lib/supabase' export function useTasks() { const [tasks, setTasks] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { fetchTasks() }, []) async function fetchTasks() { try { setLoading(true) const { data, error } = await supabase .from('tasks') .select('*') .order('created_at', { ascending: false }) if (error) throw error setTasks(data || []) } catch (error) { console.error('Erro ao buscar tasks:', error.message) } finally { setLoading(false) } } return { tasks, loading, refetch: fetchTasks } } ``` ## Um Exemplo Mais Complexo: Sistema de Blog com Autenticação Vamos construir algo mais realístico - um sistema de blog completo: ```javascript // src/hooks/useAuth.js import { useState, useEffect } from 'react' import { supabase } from '../lib/supabase' export function useAuth() { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { // Verificar sessão atual supabase.auth.getSession().then(({ data: { session } }) => { setUser(session?.user ?? null) setLoading(false) }) // Escutar mudanças de autenticação const { data: { subscription } } = supabase.auth.onAuthStateChange( async (event, session) => { setUser(session?.user ?? null) setLoading(false) } ) return () => subscription?.unsubscribe() }, []) // Login com email/senha const signIn = async (email, password) => { const { error } = await supabase.auth.signInWithPassword({ email, password }) return { error } } // Login social const signInWithProvider = async (provider) => { const { error } = await supabase.auth.signInWithOAuth({ provider }) return { error } } // Registro const signUp = async (email, password, metadata = {}) => { const { error } = await supabase.auth.signUp({ email, password, options: { data: metadata } }) return { error } } // Logout const signOut = async () => { const { error } = await supabase.auth.signOut() return { error } } return { user, loading, signIn, signInWithProvider, signUp, signOut } } ``` ## Padrão Avançado: Dashboard Completo com Real-time Vamos implementar um dashboard que atualiza automaticamente: ```javascript // src/hooks/useRealtimeData.js import { useState, useEffect } from 'react' import { supabase } from '../lib/supabase' export function useRealtimeData(table, initialQuery = {}) { const [data, setData] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { let subscription async function setupRealtimeSubscription() { try { // Buscar dados iniciais let query = supabase.from(table).select('*') // Aplicar filtros se fornecidos Object.entries(initialQuery).forEach(([key, value]) => { query = query.eq(key, value) }) const { data: initialData, error } = await query if (error) throw error setData(initialData || []) setLoading(false) // Configurar subscription real-time subscription = supabase .channel(`${table}_changes`) .on('postgres_changes', { event: '*', schema: 'public', table: table, filter: Object.entries(initialQuery) .map(([key, value]) => `${key}=eq.${value}`) .join(',') }, (payload) => { handleRealtimeEvent(payload) } ) .subscribe() } catch (error) { console.error('Erro no setup real-time:', error.message) setLoading(false) } } function handleRealtimeEvent(payload) { switch (payload.eventType) { case 'INSERT': setData(current => [payload.new, ...current]) break case 'UPDATE': setData(current => current.map(item => item.id === payload.new.id ? payload.new : item ) ) break case 'DELETE': setData(current => current.filter(item => item.id !== payload.old.id) ) break default: break } } setupRealtimeSubscription() return () => { if (subscription) { subscription.unsubscribe() } } }, [table, JSON.stringify(initialQuery)]) return { data, loading } } ``` ## Supabase com TypeScript Para projetos TypeScript, aqui está como fazer tudo type-safe: ```typescript // src/types/database.ts export interface Database { public: { Tables: { posts: { Row: { id: string title: string content: string author_id: string created_at: string updated_at: string } Insert: { id?: string title: string content: string author_id: string created_at?: string updated_at?: string } Update: { id?: string title?: string content?: string author_id?: string created_at?: string updated_at?: string } } } } } // src/lib/supabase.ts import { createClient } from '@supabase/supabase-js' import { Database } from '../types/database' const supabaseUrl = process.env.REACT_APP_SUPABASE_URL! const supabaseKey = process.env.REACT_APP_SUPABASE_ANON_KEY! export const supabase = createClient(supabaseUrl, supabaseKey) // Hook tipado export function usePosts() { const [posts, setPosts] = useState([]) const createPost = async (post: Database['public']['Tables']['posts']['Insert']) => { const { data, error } = await supabase .from('posts') .insert(post) .select() return { data, error } } return { posts, createPost } } ``` ## Padrões Avançados e Melhores Práticas ### 1. Context Provider para Estado Global ```javascript // src/context/SupabaseContext.js import React, { createContext, useContext } from 'react' import { useAuth } from '../hooks/useAuth' const SupabaseContext = createContext({}) export function SupabaseProvider({ children }) { const auth = useAuth() const value = { ...auth, isAuthenticated: !!auth.user, isLoading: auth.loading } return ( {children} ) } export const useSupabase = () => { const context = useContext(SupabaseContext) if (!context) { throw new Error('useSupabase deve ser usado dentro de SupabaseProvider') } return context } ``` ### 2. Hook Genérico para CRUD ```javascript // src/hooks/useSupabaseCRUD.js import { useState } from 'react' import { supabase } from '../lib/supabase' export function useSupabaseCRUD(table) { const [loading, setLoading] = useState(false) const [error, setError] = useState(null) const create = async (data) => { setLoading(true) setError(null) const { data: result, error: err } = await supabase .from(table) .insert(data) .select() setLoading(false) if (err) setError(err) return { data: result, error: err } } const update = async (id, data) => { setLoading(true) setError(null) const { data: result, error: err } = await supabase .from(table) .update(data) .eq('id', id) .select() setLoading(false) if (err) setError(err) return { data: result, error: err } } const remove = async (id) => { setLoading(true) setError(null) const { error: err } = await supabase .from(table) .delete() .eq('id', id) setLoading(false) if (err) setError(err) return { error: err } } return { create, update, remove, loading, error } } ``` ### 3. Middleware para Row Level Security ```javascript // src/utils/supabaseHelpers.js export const createUserOnlyPolicy = (table) => { return supabase .from(table) .select('*') .eq('user_id', supabase.auth.user()?.id) } export const withAuth = (queryBuilder) => { const user = supabase.auth.user() if (!user) { throw new Error('Usuário não autenticado') } return queryBuilder } ``` ### 4. Cache Strategy com React Query ```javascript // src/hooks/useSupabaseQuery.js import { useQuery } from 'react-query' import { supabase } from '../lib/supabase' export function useSupabaseQuery(key, table, query = {}) { return useQuery({ queryKey: [key, query], queryFn: async () => { let queryBuilder = supabase.from(table).select('*') Object.entries(query).forEach(([field, value]) => { queryBuilder = queryBuilder.eq(field, value) }) const { data, error } = await queryBuilder if (error) throw error return data }, staleTime: 5 * 60 * 1000, // 5 minutos cacheTime: 10 * 60 * 1000, // 10 minutos }) } ``` ## Armadilhas Comuns para Evitar ### 1. Não Gerenciar Estados de Loading ```javascript // ❌ Não faça isso function TaskList() { const [tasks, setTasks] = useState([]) useEffect(() => { supabase.from('tasks').select('*').then(({ data }) => { setTasks(data) // Sem loading state! }) }, []) return

{tasks.map(task =>

{task.title}

)}

} // ✅ Faça isso function TaskList() { const [tasks, setTasks] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { async function fetchTasks() { try { setLoading(true) const { data, error } = await supabase.from('tasks').select('*') if (error) throw error setTasks(data) } catch (err) { setError(err.message) } finally { setLoading(false) } } fetchTasks() }, []) if (loading) return

Carregando...

if (error) return

Erro: {error}

return

{tasks.map(task =>

{task.title}

)}

} ``` ### 2. Subscriptions sem Cleanup ```javascript // ❌ Memory leak garantido function RealTimeComponent() { useEffect(() => { const subscription = supabase .channel('posts') .on('postgres_changes', { event: '*', schema: 'public', table: 'posts' }, payload => console.log(payload) ) .subscribe() // Sem cleanup! }, []) } // ✅ Sempre limpe subscriptions function RealTimeComponent() { useEffect(() => { const subscription = supabase .channel('posts') .on('postgres_changes', { event: '*', schema: 'public', table: 'posts' }, payload => console.log(payload) ) .subscribe() return () => { subscription.unsubscribe() } }, []) } ``` ### 3. Não Usar Row Level Security ```javascript // ❌ Dados expostos para todos os usuários // No Supabase Dashboard, sem RLS policies // ✅ Configure políticas RLS -- No SQL Editor do Supabase ALTER TABLE posts ENABLE ROW LEVEL SECURITY; CREATE POLICY "Users can only see their own posts" ON posts FOR SELECT USING (auth.uid() = author_id); CREATE POLICY "Users can only insert their own posts" ON posts FOR INSERT WITH CHECK (auth.uid() = author_id); ``` ## Quando NÃO Usar Supabase Não use Supabase quando: - Você precisa de algoritmos complexos no backend (machine learning, processamento pesado) - Sua aplicação é apenas estática e não precisa de dados dinâmicos - Você já tem uma API robusta funcionando perfeitamente ```javascript // ❌ Overkill para dados estáticos const staticData = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' } ] // ✅ Para dados estáticos, use o estado local function StaticList() { return (

{staticData.map(item => (

{item.name}

))}

) } ``` ## Supabase vs Firebase vs Alternativas **Supabase é ótimo para:** - Desenvolvedores que preferem SQL e PostgreSQL - Projetos que precisam de queries complexas - Quando você quer controle sobre os dados (self-hosted disponível) **Considere alternativas quando precisar de:** - Ecosistema Google completo → Firebase - Infraestrutura enterprise → AWS Amplify - Backend customizado complexo → Express/FastAPI + PostgreSQL ## Organização de Diretórios Recomendada ``` src/ ├── components/ │ ├── auth/ │ │ ├── LoginForm.jsx │ │ ├── SignupForm.jsx │ │ └── AuthGuard.jsx │ ├── ui/ │ │ ├── Button.jsx │ │ ├── Input.jsx │ │ └── Modal.jsx │ └── features/ │ ├── posts/ │ │ ├── PostList.jsx │ │ ├── PostForm.jsx │ │ └── PostCard.jsx │ └── dashboard/ │ ├── DashboardLayout.jsx │ └── StatsCard.jsx ├── hooks/ │ ├── useAuth.js │ ├── useSupabaseCRUD.js │ ├── useRealtimeData.js │ └── useSupabaseQuery.js ├── lib/ │ ├── supabase.js │ ├── constants.js │ └── utils.js ├── context/ │ ├── SupabaseContext.js │ └── ThemeContext.js ├── types/ │ ├── database.ts │ └── auth.ts ├── pages/ │ ├── Home.jsx │ ├── Dashboard.jsx │ ├── Login.jsx │ └── Profile.jsx └── styles/ ├── globals.css └── components.css ``` ## Fechando com Chave de Ouro Supabase é uma ferramenta poderosa que pode acelerar drasticamente o desenvolvimento de aplicações React. Ele traz a robustez do PostgreSQL com a simplicidade de um BaaS moderno. **Principais aprendizados:** - Setup é questão de minutos, não horas - Real-time funciona out-of-the-box sem websockets complexos - Row Level Security garante dados seguros por padrão - TypeScript integration é de primeira classe Na próxima vez que você começar um projeto React que precisa de dados persistentes, autenticação ou real-time, lembre-se do Supabase. Sua produtividade (e sua sanidade mental) agradecerão. Já usou Supabase nos seus projetos? Que padrões você achou mais úteis? Compartilhe sua experiência nos comentários! --- *Se este artigo te ajudou a dominar o Supabase com React, siga para mais conteúdo sobre desenvolvimento full-stack moderno! 🚀* ## Recursos Adicionais - [Documentação Oficial do Supabase](https://supabase.com/docs) - [Supabase + React Tutorial](https://supabase.com/docs/guides/getting-started/tutorials/with-react) - [Row Level Security Guide](https://supabase.com/docs/guides/auth/row-level-security) - [Real-time Documentation](https://supabase.com/docs/guides/realtime)

Loading...

NAVEGAÇÃO

COMPANY

PROJETO

Supabase com React: O Guia Que Vai Revolucionar Seu Backend