GUIA

Seu primeiro app com Next.js

Uma lista de tarefas em que as pessoas se cadastram com o e-mail e veem só as próprias tarefas. Você vai usar o painel para o banco de dados e o @espobase/client no app.

← Todos os guias

1. Crie um projeto e uma tabela

No painel, crie um projeto. Abra o Editor SQL e execute:

create table todos (
  id bigint generated by default as identity primary key,
  owner_id uuid not null default espobase.user_id(),
  title text not null,
  done boolean not null default false,
  created_at timestamptz not null default now()
);

-- Row level security is already on. This rule lets each signed-in user see and change only their own todos:
create policy "Users manage their own todos" on todos
  for all
  using (owner_id = espobase.user_id())
  with check (owner_id = espobase.user_id());

Prefere clicar? Crie a tabela no Editor de tabelas e depois adicione o modelo “Usuário é dono da linha” em Banco de dados › Políticas com owner_id como coluna do dono.

2. Configurações e chaves

  • Autenticação › Configurações: defina a URL do site como o endereço onde seu app roda (por exemplo, http://localhost:3000 durante o desenvolvimento). Os e-mails de confirmação e de redefinição de senha apontam para lá.
  • API: crie uma chave publicável. Copie-a agora; as chaves só são exibidas quando são criadas.

No seu app Next.js, instale o cliente e adicione as configurações ao .env.local:

npm install @espobase/client
NEXT_PUBLIC_ESPOBASE_URL=https://api.espobase.com/project/<your project ref>
NEXT_PUBLIC_ESPOBASE_KEY=eb_pk_…   # the PUBLISHABLE key: safe in the browser

Nunca coloque uma chave secreta (eb_sk_…) em uma variável NEXT_PUBLIC_: essas variáveis são enviadas ao navegador. Com a CLI, npx espobase init mostra a URL e escreve os tipos TypeScript para você.

3. O cliente

// lib/espobase.ts
import { createClient } from "@espobase/client";

export const espobase = createClient(
  process.env.NEXT_PUBLIC_ESPOBASE_URL!,
  process.env.NEXT_PUBLIC_ESPOBASE_KEY!,
);

4. Cadastro e login

"use client";
import { espobase } from "@/lib/espobase";

// Sign up: Espobase emails a confirmation link to your Site URL.
await espobase.auth.signUp({ email, password });

// Sign in (after confirming): the session is kept and refreshed for you.
await espobase.auth.signInWithPassword({ email, password });

// React to sign-in and sign-out anywhere in your app.
espobase.auth.onAuthStateChange((_event, session) => setSession(session));

O link de confirmação abre a URL do site com o token depois de um #. Confirme-o com espobase.auth.verifyEmail({ token }): veja Login e regras de segurança para as poucas linhas que fazem isso e para a redefinição de senha.

5. Leia e grave seus dados

// Only the signed-in user's todos come back: the security rule filters them.
const { data: todos, error } = await espobase.from("todos").select("*").order("created_at");

// owner_id fills itself in (its default is espobase.user_id()).
await espobase.from("todos").insert({ title: "Buy milk" });

await espobase.from("todos").update({ done: true }).eq("id", todo.id);
await espobase.from("todos").delete().eq("id", todo.id);

Cada requisição leva o usuário conectado, e o banco de dados aplica sua regra. Um usuário que não entrou recebe uma lista vazia, e ninguém pode ler nem alterar as tarefas de outra pessoa, nem mesmo chamando a API diretamente.