Escolha o seu template
O mesmo app em sete stacks: login e cadastro, sessão que se renova sozinha e uma lista de tarefas em que cada pessoa só enxerga as próprias. Os templates estão em github.com/superdb-br/templates (licença MIT) e compilam a cada mudança contra a versão publicada do SDK.
| Template | Quando usar | A sessão fica em | Pasta |
|---|---|---|---|
| Next.js | Site ou app com SSR e Server Actions | cookies httpOnly | nextjs |
| React | Painel ou SPA que roda no navegador | localStorage | react |
| Vue | SPA com Vue 3 e Vite | localStorage | vue |
| SvelteKit | SPA estática com Svelte 5 | localStorage | sveltekit |
| Nuxt | SPA com Nuxt 4 | localStorage | nuxt |
| HTML puro | Protótipo, sem npm e sem build | localStorage | html |
| Expo | App de celular (iOS e Android) | AsyncStorage | expo |
Na dúvida: Next.js se o app precisa aparecer no Google ou buscar dados no servidor; React se é um painel atrás de login; Expo se é para o celular.
Passo a passo
1Crie um projeto no SuperDB
Em app.superdb.com.br, crie a conta (grátis) e um projeto. O Quickstart Cloud mostra a tela passo a passo.
https://app.superdb.com.br/signup
2Copie o template
O exemplo usa React: troque react pela pasta do seu template, na tabela acima. O Next.js também sai pelo create-next-app. O HTML puro não usa npm: depois de copiar, é só servir a pasta.
npx degit superdb-br/templates/react meu-app
cd meu-app
npm install
npx create-next-app@latest meu-app \
--example https://github.com/superdb-br/templates/tree/main/nextjs
3Ligue ao seu projeto
No painel, abra o projeto e clique em Conectar: estão lá a URL, a chave anon e o slug. Cada template traz um .env.example com os nomes certos (VITE_, NEXT_PUBLIC_, EXPO_PUBLIC_...).
A chave anon é pública: vai no código do app. Quem protege os dados é o RLS. A service key nunca vai num app.
cp .env.example .env
VITE_SUPERDB_URL=https://auth.superdb.com.br
VITE_SUPERDB_ANON_KEY=cole-a-chave-anon-aqui
VITE_SUPERDB_PROJECT=slug-do-projeto
4Crie a tabela com RLS
No painel, abra o SQL Editor, cole o arquivo superdb/schema.sql do template e rode. Pode rodar de novo: nada é duplicado. Com o MCP do SuperDB conectado, peça ao seu agente de IA: "rode o superdb/schema.sql no meu projeto".
create table if not exists tarefas (
id uuid primary key default gen_random_uuid(),
titulo text not null check (char_length(btrim(titulo)) between 1 and 200),
feita boolean not null default false,
criada_em timestamptz not null default now(),
user_id uuid not null default auth.uid()
);
-- A lista do app sempre busca "as minhas, das mais novas para as mais antigas".
create index if not exists tarefas_por_dono on tarefas (user_id, criada_em desc);
alter table tarefas enable row level security;
-- Uma regra só, para ler, criar, alterar e apagar: a linha é sua ou não existe.
-- "using" filtra o que você vê; "with check" recusa gravar linha de outra pessoa.
drop policy if exists tarefas_do_dono on tarefas;
create policy tarefas_do_dono on tarefas
for all to authenticated
using (user_id = auth.uid())
with check (user_id = auth.uid());
revoke all on tarefas from anon;
grant select, insert, update, delete on tarefas to authenticated;
5Rode
Crie uma conta na tela do app e adicione tarefas. Em desenvolvimento, a tela de login mostra a checagem da conexão (variáveis, projeto e tabela) e diz exatamente o que falta. No Expo, o comando é npx expo start; no HTML puro, npx serve ..
npm run dev
Próximos passos
- Next.js: a sessão em cookies, passo a passo · React · Vue · Expo · outros frameworks
- Row Level Security: policies para cada caso
- Referência do SDK
- MCP: deixe seu agente de IA criar as tabelas