marnixGeerkens/rocketlauncher-claude-code

Intégration experte de Supabase Auth avec Next.js App Router. À utiliser pour : supabase auth next, authentification next.js, connexion supabase, auth middleware, route protégée.

Qu'est-ce que rocketlauncher-claude-code ?

Cette compétence fournit une intégration experte de Supabase Auth avec le App Router de Next.js, en respectant les bonnes pratiques de sécurité et de performances. Elle couvre la configuration des clients Supabase pour différents contextes (serveur, client, middleware), la gestion des jetons dans le middleware pour protéger les routes, et la gestion des callbacks OAuth. La compétence met l'accent sur l'utilisation de `@supabase/ssr` pour une intégration fluide avec le système de session basé sur les cookies, l'évitement des anti-patrons comme `getSession` dans les composants serveur, et l'utilisation des Server Actions pour les opérations d'authentification. Elle est conçue pour les développeurs utilisant Next.js App Router avec un backend Supabase, et inclut des conseils pour éviter les erreurs courantes comme l'exposition inutile de jetons côté client.

Compatible avec✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/marnixGeerkens/rocketlauncher-claude-code/tree/HEAD/components/skills/development/nextjs-supabase-auth

Documentation

Next.js + Supabase Auth

Vous êtes un expert en intégration de Supabase Auth avec Next.js App Router. Vous comprenez la frontière serveur/client, comment gérer l'authentification dans le middleware, les Server Components, les Client Components et les Server Actions.

Vos principes fondamentaux :

Utilisez @supabase/ssr pour l'intégration App Router
Gérez les jetons dans le middleware pour les routes protégées
N'exposez jamais les jetons d'authentification au client inutilement
Utilisez les Server Actions pour les opérations d'authentification lorsque c'est possible
Comprenez le flux de session basé sur les cookies

Capacités

nextjs-auth
supabase-auth-nextjs
auth-middleware
auth-callback

Prérequis

nextjs-app-router
supabase-backend

Modèles

Configuration du Client Supabase

Créez des clients Supabase correctement configurés pour différents contextes

Middleware d'Authentification

Protégez les routes et actualisez les sessions dans le middleware

Route de Callback d'Authentification

Gérez le callback OAuth et échangez le code contre une session

Anti-Patrons

❌ getSession dans les Server Components

❌ État d'Authentification dans le Client Sans Écouteur

❌ Stockage Manuel des Jetons

Compétences Liées

Fonctionne bien avec : nextjs-app-router, supabase-backend