Comment connecter Supabase à PostgreSQL dans un SaaS Next.js

Supabase, c'est PostgreSQL en tant que service avec auth, storage et realtime. Mais la connexion depuis Next.js doit suivre 3 patterns distincts selon le contexte d'exécution. Confondre les clients est une source classique de bugs et de fuites de sécurité.

1. Les trois clients Supabase

Dans un SaaS Next.js, vous avez besoin de trois clients :

• Browser client (createBrowserClient) — pour les composants client. Utilise les cookies de session.
• Server client (createServerClient) — pour les server components, server actions et route handlers. Lit/écrit les cookies via Next.js.
• Service client — bypasse la RLS, à utiliser pour les opérations admin et les caches publics. Jamais dans une route exposée à l'utilisateur sans vérification.

2. Configurer les variables d'environnement

NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=...
SUPABASE_SECRET_KEY=...  # SERVEUR UNIQUEMENT

La clé secrète ne doit JAMAIS apparaître côté client. Sans le préfixe NEXT_PUBLIC_, Next.js la garde côté serveur.

3. Activer la RLS sur chaque table

Par défaut, créez vos tables avec RLS activée :

CREATE TABLE projects (...);
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;

Puis ajoutez les policies par appartenance via memberships. Sans RLS, n'importe quel utilisateur authentifié peut lire toutes les données.

4. Générer les types TypeScript

Utilisez la CLI Supabase pour générer les types depuis votre schéma :

supabase gen types typescript --project-id=YOUR_ID > types/database.ts

Importez ensuite ces types dans les clients pour bénéficier de l'autocomplétion partout.

5. Validation côté serveur avec getUser()

Pour identifier un utilisateur côté serveur, utilisez TOUJOURS supabase.auth.getUser() et jamais getSession(). La session peut être falsifiée par un client malveillant ; getUser() valide le token auprès de Supabase.

Conclusion

Supabase est puissant mais demande une discipline rigoureuse côté Next.js. Une fois bien configuré, c'est un game changer. Boilerplate-Stack vous livre cette configuration prête à l'emploi.