Fähigkeiten nextjs-supabase-auth
📦

nextjs-supabase-auth

Sicher

Supabase Auth in Next.js App Router implementieren

Die Implementierung von Authentifizierung in Next.js erfordert das Verständnis von Server- und Client-Grenzen. Dieses Skill bietet bewährte Muster für die sichere Supabase Auth-Integration mit der App Router-Architektur.

Unterstützt: Claude Codex Code(CC)
📊 71 Angemessen
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "nextjs-supabase-auth". Supabase Auth Middleware für Next.js App Router einrichten

Erwartetes Ergebnis:

  • middleware.ts im Projekt-Root erstellen
  • createServerClient von @supabase/ssr importieren
  • Client mit SUPABASE_URL und SUPABASE_ANON_KEY aus env konfigurieren
  • Matcher für Routen hinzufügen, die Auth-Schutz benötigen
  • Token-Aktualisierung handhaben, wenn Sitzungen ablaufen
  • Bei fehlgeschlagener Auth-Prüfung auf geschützten Routen zur Login-Seite weiterleiten

Verwendung von "nextjs-supabase-auth". Wie handhabe ich Auth in Server-Komponenten?

Erwartetes Ergebnis:

  • createServerClient verwenden, um Supabase-Client zu instanziieren
  • getUser() aufrufen, um aktuelle Sitzung zu validieren
  • Benutzerdaten als Props an untergeordnete Komponenten übergeben
  • getSession() nicht direkt in Server-Komponenten aufrufen
  • Middleware die Sitzungsvalidierung für geschützte Routen überlassen

Sicherheitsaudit

Sicher
v2 • 2/24/2026

Static 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.

1
Gescannte Dateien
61
Analysierte Zeilen
0
befunde
2
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude Audit-Verlauf anzeigen →

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
31
Community
100
Sicherheit
91
Spezifikationskonformität

Was du bauen kannst

Full-Stack-Entwickler baut SaaS-Anwendung

Implementieren Sie sichere Benutzerauthentifizierung mit E-Mail und OAuth-Anbietern für ein Next.js SaaS-Produkt mit Supabase als Backend.

Team migriert von Pages Router zu App Router

Refaktorieren Sie bestehende Supabase Auth-Implementierungen für die Zusammenarbeit mit Next.js App Router-Serverkomponenten und Middleware-Architektur.

Entwickler fügt Auth zu bestehender App hinzu

Integrieren Sie Authentifizierung in eine bestehende Next.js-Anwendung mit Supabase-Backend unter Befolgung von Sicherheits-Best-Practices von Anfang an.

Probiere diese Prompts

Basis-Supabase-Client-Setup 
Helfen Sie mir bei der Einrichtung der Supabase-Client-Konfiguration für ein Next.js App Router-Projekt. Ich brauche separate Clients für Server-Komponenten, Client-Komponenten und Middleware mit @supabase/ssr.
Implementierung geschützter Routen 
Erstellen Sie eine Middleware, die Routen unter /dashboard schützt und nicht authentifizierte Benutzer zu /login umleitet. Schließen Sie Sitzungsaktualisierungslogik für abgelaufene Tokens ein.
OAuth-Callback-Handler 
Erstellen Sie einen OAuth-Callback-Routen-Handler, der den Autorisierungscode gegen eine Supabase-Sitzung austauscht und Benutzer nach erfolgreicher Authentifizierung zur entsprechenden Seite weiterleitet.
Vollständiger Auth-Flow mit Server Actions 
Implementieren Sie einen vollständigen Authentifizierungsfluss mit Server Actions für Anmeldung, Registrierung und Abmeldung. Schließen Sie ordnungsgemäße Fehlerbehandlung, Formularvalidierung und sichere Token-Verwaltung ohne Offenlegung von Anmeldedaten gegenüber dem Client ein.

Bewährte Verfahren

  • Verwenden Sie das @supabase/ssr-Paket, das speziell für Next.js App Router-Server/Client-Grenzen entwickelt wurde
  • Authentifizierung in Middleware handhaben, um Routen vor dem Rendern zu schützen und Sitzungsaktualisierung transparent zu verwalten
  • Tokens in Cookies speichern, die automatisch von @supabase/ssr verwaltet werden, anstatt Token-Speicherung manuell zu handhaben

Vermeiden

  • getSession() direkt in Server-Komponenten aufrufen, anstatt Middleware für Routenschutz zu verwenden
  • Auth-Status in Client-Komponenten verwalten, ohne ordnungsgemäße Auth-Statusänderungs-Listener zu implementieren
  • JWT-Tokens manuell speichern oder handhaben, wenn @supabase/ssr automatische Cookie-basierte Sitzungsverwaltung bietet

Häufig gestellte Fragen

Was ist der Unterschied zwischen @supabase/ssr und @supabase/supabase-js?
@supabase/ssr ist speziell für Next.js App Router mit integrierter Cookie-Handhabung und Server/Client-Grenzunterstützung konzipiert. @supabase/supabase-js ist die Kern-Client-Bibliothek, erfordert aber manuelle Cookie- und Sitzungsverwaltung für SSR-Szenarien.
Wie schütze ich API-Routen mit Supabase Auth?
Erstellen Sie eine middleware.ts-Datei in Ihrem Projekt-Root, die Authentifizierung für angegebene Routenmuster überprüft. Verwenden Sie den createServerClient, um Sitzungen zu validieren und bei nicht authentifizierten Anfragen umzuleiten oder 401 zurückzugeben.
Kann ich dieses Skill anstelle von App Router mit Pages Router verwenden?
Dieses Skill konzentriert sich auf App Router-Muster. Für Pages Router würden Sie verschiedene Muster mit getServerSideProps und verschiedenen Cookie-Handhabungsansätzen verwenden.
Wie handhabe ich OAuth-Anbieter wie Google oder GitHub?
Konfigurieren Sie OAuth-Anbieter in Ihrem Supabase-Dashboard und erstellen Sie dann Callback-Routen-Handler, die den Autorisierungscode unter Verwendung von Supabase's OAuth-Flow gegen eine Sitzung austauschen. Das Skill behandelt dieses Muster detailliert.
Wo sollte ich Supabase-Anmeldedaten speichern?
Speichern Sie SUPABASE_URL und SUPABASE_ANON_KEY in Ihren Umgebungsvariablen. Committen Sie diese niemals in die Versionskontrolle. Verwenden Sie .env.local für lokale Entwicklung und das Secret-Management Ihrer Hosting-Plattform für die Produktion.
Wie handhabe ich Abmeldung richtig?
Verwenden Sie Supabase's signOut()-Methode, um die Sitzung serverseitig zu invalidieren, und löschen Sie dann jeden lokalen Status und leiten Sie zur Login- oder Startseite weiter. Server Actions bieten ein sauberes Muster für diesen Vorgang.

Entwicklerdetails

Autor

sickn33

Lizenz

MIT

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-supabase-auth

Ref

main

Dateistruktur

📄 SKILL.md