Conecte o cliente JavaScript

O cliente supabase-js conecta a aplicação à API do projeto. Instale o pacote no diretório da aplicação com npm install @supabase/supabase-js. Preserve o arquivo de lock para registrar a versão instalada.

Inicialize uma única conexão

O exemplo abaixo usa Vite. Configure VITE_SUPABASE_URL e VITE_SUPABASE_PUBLISHABLE_KEY no arquivo local de ambiente. Esses valores entram no código do navegador, portanto use somente a chave publishable.

1
import { createClient } from '@supabase/supabase-js'
2
export const supabase = createClient(
3
  import.meta.env.VITE_SUPABASE_URL,
4
  import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
5
)

Outros frameworks têm convenções próprias para variáveis públicas. Mantenha o endereço e a chave do mesmo projeto que recebeu a tabela. Reinicie o servidor de desenvolvimento da sua aplicação quando necessário para carregar a configuração.

Grave uma tarefa autenticada

Depois do login mostrado na etapa de Auth, execute a inserção. O identificador vem da sessão validada pelo serviço. A política do banco confere se ele corresponde à linha.

1
const { data: { user }, error: erroSessao } = await supabase.auth.getUser()
2
if (erroSessao || !user) throw new Error('Entre na aplicação para criar uma tarefa.')
3
const { data: tarefa, error } = await supabase
4
  .from('tarefas')
5
  .insert({ user_id: user.id, titulo: 'Conferir a política de leitura' })
6
  .select('id, titulo, concluida')
7
  .single()
8
if (error) throw error
9
console.log(tarefa)

O encadeamento select solicita o registro inserido. A política de leitura da trilha permite esse retorno para a mesma sessão.

Consulte e confira o isolamento

1
const { data: tarefas, error } = await supabase
2
  .from('tarefas')
3
  .select('id, titulo, concluida')
4
  .order('criada_em', { ascending: false })
5
if (error) throw error
6
console.log(tarefas)

Repita essa consulta com os dois cadastros de teste. Cada sessão deve receber suas próprias tarefas. O exemplo registra a resposta no console para facilitar a conferência, mas sua interface precisa apresentar carregamento, lista vazia e mensagem de erro.

Uma lista vazia também pode indicar que a sessão ainda não criou tarefas. Confira a identidade e o projeto usados pela chamada antes de alterar a política.