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.
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:3000durante 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.