Votre première app avec Next.js

Dans le tableau de bord, créez un projet. Ouvrez l'Éditeur SQL et exécutez :

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());

Vous préférez cliquer ? Créez la table dans l'Éditeur de tables, puis ajoutez le modèle « L'utilisateur possède la ligne » dans Base de données › Politiques avec owner_id comme colonne du propriétaire.

• Authentification › Paramètres : définissez comme Site URL l'adresse où tourne votre app (par ex. http://localhost:3000 pendant le développement). Les e-mails de confirmation et de réinitialisation du mot de passe pointent vers cette adresse.
• API : créez une clé publiable. Copiez-la maintenant : les clés ne sont affichées qu'à leur création.

Dans votre app Next.js, installez le client et ajoutez les paramètres à .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

Ne mettez jamais une clé secrète (eb_sk_…) dans une variable NEXT_PUBLIC_ : ces variables sont envoyées au navigateur. Avec la CLI, npx espobase init affiche l'URL et écrit les types TypeScript pour vous.

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

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

"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));

Le lien de confirmation ouvre votre Site URL avec le jeton après un #. Confirmez-le avec espobase.auth.verifyEmail({ token }) : consultez Connexion et règles de sécurité pour les quelques lignes qui le font, et pour la réinitialisation du mot de passe.

// 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);

Chaque requête transporte l'utilisateur connecté, et la base de données applique votre règle. Un utilisateur non connecté reçoit une liste vide, et personne ne peut lire ni modifier les tâches de quelqu'un d'autre, même en appelant directement l'API.