المهارات nextjs-supabase-auth
🔐

nextjs-supabase-auth

آمن

Add Supabase Auth to Next.js App Router

Dieses Skill bietet Expertenhilfe für die Integration von Supabase-Authentifizierung mit Next.js App Router. Es hilft Entwicklern, sichere Anmeldeabläufe zu implementieren, Routen mit Middleware zu schützen und Sitzungen in Server- und Client-Komponenten korrekt zu behandeln.

يدعم: Claude Codex Code(CC)
🥉 74 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "nextjs-supabase-auth". How do I set up Supabase Auth in Next.js App Router?

النتيجة المتوقعة:

Use @supabase/ssr package. Install it with npm install @supabase/ssr. Create a utils/supabase/server.ts file for server-side client and utils/supabase/client.ts for client-side client. Configure environment variables NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.

استخدام "nextjs-supabase-auth". Create auth middleware for protected routes

النتيجة المتوقعة:

Import createServerClient from @supabase/ssr. In middleware, use supabase.auth.getUser() to verify tokens. Return redirect to /login if no valid session. Refresh tokens before expiration.

التدقيق الأمني

آمن
v1 • 2/18/2026

Static analysis flagged backticks in Markdown and references to 'auth' as security concerns. Both are false positives. The skill is a documentation file containing only Markdown text describing Supabase Auth integration patterns. No executable code, no network calls, no file system access, and no actual security vulnerabilities present.

1
الملفات التي تم فحصها
57
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
85
المحتوى
50
المجتمع
100
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

Neue Next.js-App mit Benutzerauthentifizierung erstellen

Fügen Sie sichere Anmeldung und Sitzungsverwaltung zu einem neuen Next.js App Router-Projekt hinzu, wobei Supabase als Authentifizierungsanbieter verwendet wird.

Routen mit Middleware schützen

Implementieren Sie Routenschutz, der den Authentifizierungsstatus überprüft und Sitzungen vor dem Zugriff aktualisiert.

Migration von Pages Router zu App Router

Verstehen Sie die Unterschiede in den Authentifizierungsmustern zwischen Pages Router und App Router bei der Verwendung von Supabase.

جرّب هذه الموجهات

Grundlegende Supabase-Einrichtung 
How do I set up Supabase Auth in a Next.js App Router project?
Middleware-Schutz 
Create middleware to protect routes and refresh sessions with Supabase
OAuth-Callback-Behandlung 
How do I handle OAuth callback and exchange the code for a session in Next.js?
Server Action-Authentifizierung 
Use Supabase with Server Actions for login, logout, and registration

أفضل الممارسات

  • Verwenden Sie das @supabase/ssr-Paket anstelle von @supabase/auth-helpers-nextjs für App Router
  • Behandeln Sie Tokens in Middleware für geschützte Routen, nicht in Client-Komponenten
  • Verwenden Sie Server Actions für Authentifizierungsvorgänge, um sensible Logik auf dem Server zu halten
  • Setzen Sie Authentifizierungstokens nicht unnötig für Clients frei - verlassen Sie sich auf HttpOnly-Cookies

تجنب

  • Verwenden Sie getSession nicht in Server-Komponenten - verwenden Sie stattdessen getUser
  • Verwalten Sie den Authentifizierungszustand nicht in Client-Komponenten ohne Sitzungs-Listener
  • Speichern Sie Tokens nicht manuell in localStorage - verwenden Sie die cookie-basierten Sitzungen von Supabase

الأسئلة المتكررة

Welches Paket sollte ich für Supabase Auth in Next.js App Router verwenden?
Verwenden Sie @supabase/ssr. Es ist das offizielle Paket für App Router und behandelt cookie-basierte Sitzungen korrekt.
Wie schütze ich Routen in Next.js App Router?
Verwenden Sie Middleware. Importieren Sie createServerClient und überprüfen Sie gültige Sitzungen mit getUser(). Leiten Sie zur Anmeldeseite weiter, wenn keine Sitzung existiert.
Kann ich Supabase Auth mit Server-Komponenten verwenden?
Ja. Verwenden Sie den Server-Client von @supabase/ssr. Rufen Sie getUser() oder getSession() in Server-Komponenten auf, um den Authentifizierungsstatus zu überprüfen.
Wie funktionieren Sitzungen mit Supabase in Next.js?
Supabase verwendet cookie-basierte Sitzungen. Die Middleware behandelt Cookie-Rotation und aktualisiert Tokens automatisch vor dem Ablauf.
Was ist der Unterschied zwischen getSession und getUser?
getSession gibt die Sitzung einschließlich roher Tokens zurück (in Browsern vermeiden). getUser validiert das Token mit Supabase und gibt Benutzerdaten zurück (empfohlen).
Wie behandle ich OAuth-Callbacks?
Erstellen Sie einen Route-Handler unter /auth/callback. Tauschen Sie den Code aus URL-Paramtern gegen eine Sitzung aus mit supabase.auth.exchangeCodeForSession(). Leiten Sie dann zum geschützten Bereich weiter.

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

المستودع

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

مرجع

main

بنية الملفات

📄 SKILL.md