Tu primera app con Next.js
Una lista de tareas en la que las personas se registran con su correo y solo ven sus propias tareas. Usarás el panel para la base de datos y @espobase/client en la app.
1. Crea un proyecto y una tabla
En el panel, crea un proyecto. Abre el Editor SQL y ejecuta:
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());
¿Prefieres hacer clic? Crea la tabla en el Editor de tablas y luego agrega la plantilla “User owns row” en Base de datos › Políticas con owner_id como columna del propietario.
2. Configuración y claves
- Autenticación › Configuración: define como Site URL la dirección donde corre tu app (p. ej.,
http://localhost:3000mientras desarrollas). Los correos de confirmación y de restablecimiento de contraseña enlazan ahí. - API: crea una clave publicable. Cópiala ahora; las claves solo se muestran al crearlas.
En tu app de Next.js, instala el cliente y agrega la configuración a .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 pongas una clave secreta (eb_sk_…) en una variable NEXT_PUBLIC_: esas variables se envían al navegador. Con la CLI, npx espobase init muestra la URL y escribe los tipos de TypeScript por ti.
3. El 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. Registro e inicio de sesión
"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));El enlace de confirmación abre tu Site URL con el token después de un #. Confírmalo con espobase.auth.verifyEmail({ token }): consulta Inicio de sesión y reglas de seguridad para ver las pocas líneas que lo hacen y cómo restablecer la contraseña.
5. Lee y escribe tus datos
// 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 solicitud lleva al usuario que inició sesión, y la base de datos aplica tu regla. Un usuario que no inició sesión recibe una lista vacía, y nadie puede leer ni cambiar las tareas de otra persona, ni siquiera llamando a la API directamente.