nextjs-supabase-auth
Implémenter Supabase Auth dans Next.js App Router
Construire un système d'authentification dans Next.js nécessite de comprendre les limites entre serveur et client. Cette compétence fournit des modèles éprouvés pour une intégration sécurisée de Supabase Auth avec l'architecture App Router.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "nextjs-supabase-auth". Configurer le middleware Supabase auth pour Next.js App Router
Résultat attendu:
- Créer middleware.ts à la racine du projet
- Importer createServerClient depuis @supabase/ssr
- Configurer le client avec SUPABASE_URL et SUPABASE_ANON_KEY depuis les variables d'environnement
- Ajouter un matcher pour les routes nécessitant une protection d'authentification
- Gérer l'actualisation du token lors de l'expiration des sessions
- Rediriger vers la page de connexion lorsque la vérification d'auth échoue sur les routes protégées
Utilisation de "nextjs-supabase-auth". Comment gérer l'auth dans les Server Components ?
Résultat attendu:
- Utiliser createServerClient pour instancier le client Supabase
- Appeler getUser() pour valider la session actuelle
- Passer les données utilisateur comme props aux composants enfants
- Éviter d'appeler getSession() directement dans les Server Components
- Laisser le middleware gérer la validation de session pour les routes protégées
Audit de sécurité
SûrStatic analysis flagged markdown backticks as shell commands (false positive). Line 57 uses backticks for inline code formatting in documentation, not command execution. No actual external commands, cryptographic operations, or dangerous patterns exist. Skill provides documentation and patterns only - no executable code with security risks.
Score de qualité
Ce que vous pouvez construire
Développeur Full-Stack Construisant une Application SaaS
Implémenter une authentification utilisateur sécurisée avec email et fournisseurs OAuth pour un produit SaaS Next.js utilisant Supabase comme backend.
Équipe Migrant de Pages Router vers App Router
Refactoriser une implémentation Supabase auth existante pour fonctionner avec les composants serveur et l'architecture middleware de Next.js App Router.
Développeur Ajoutant l'Auth à une Application Existante
Intégrer l'authentification dans une application Next.js existante avec backend Supabase, en suivant les meilleures pratiques de sécurité dès le départ.
Essayez ces prompts
Aidez-moi à configurer le client Supabase pour un projet Next.js App Router. J'ai besoin de clients séparés pour les composants serveur, les composants client et le middleware en utilisant @supabase/ssr.
Créer un middleware qui protège les routes sous /dashboard et redirige les utilisateurs non authentifiés vers /login. Inclure la logique d'actualisation de session pour les tokens expirés.
Construire un gestionnaire de route de callback OAuth qui échange le code d'autorisation contre une session Supabase et redirige les utilisateurs vers la page appropriée après une authentification réussie.
Implémenter un flux d'authentification complet utilisant les Server Actions pour la connexion, l'inscription et la déconnexion. Inclure une gestion d'erreurs appropriée, une validation de formulaire et une gestion sécurisée des tokens sans exposer les identifiants au client.
Bonnes pratiques
- Utiliser le package @supabase/ssr spécifiquement conçu pour les limites serveur/client de Next.js App Router
- Gérer l'authentification dans le middleware pour protéger les routes avant le rendu et gérer l'actualisation de session de manière transparente
- Stocker les tokens dans des cookies gérés automatiquement par @supabase/ssr plutôt que de gérer manuellement le stockage des tokens
Éviter
- Appeler getSession() directement dans les Server Components au lieu d'utiliser le middleware pour la protection des routes
- Gérer l'état d'auth dans les composants client sans implémenter des écouteurs de changement d'état d'auth appropriés
- Stocker ou gérer manuellement les tokens JWT lorsque @supabase/ssr fournit une gestion de session automatique basée sur les cookies