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

nextjs-supabase-auth

آمن

Next.js App RouterにSupabase Authを追加

このスキルは、Next.js App RouterとSupabase認証の統合に関する専門的なガイダンスを提供します。開発者がセキュアなログインフローの実装、ミドルウェアによるルート保護、サーバーコンポーネントとクライアントコンポーネントでのセッションの適切な処理を支援します。

يدعم: 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
الامتثال للمواصفات

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

ユーザー認証付きの新しいNext.jsアプリを構築

Supabaseを認証プロバイダーとして使用し、新しいNext.js App Routerプロジェクトにセキュアなログインとセッション管理を追加します。

ミドル���ェアでルートを保護

認証ステータスを確認し、アクセスを許可する前にセッションを更新するルート保護を実装します。

Pages RouterからApp Routerへ移行

Supabaseを使用する際のPages RouterとApp Routerの認証パターンの違いを理解します。

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

基本的なSupabaseセットアップ 
How do I set up Supabase Auth in a Next.js App Router project?
ミドルウェア保護 
Create middleware to protect routes and refresh sessions with Supabase
OAuthコールバック処理 
How do I handle OAuth callback and exchange the code for a session in Next.js?
Server Action認証 
Use Supabase with Server Actions for login, logout, and registration

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

  • App Routerには@supabase/auth-helpers-nextjsではなく@supabase/ssrパッケージを使用する
  • 保護されたルートのトークン処理はクライアントコンポーネントではなくミドルウェアで行う
  • 認証操作にはServer Actionsを使用して機密ロジックをサーバー側に保つ
  • 認証トークンを不必要にクライアントに公開しない - HttpOnlyクッキーに依存する

تجنب

  • Server ComponentsでgetSessionを使用しない - 代わりにgetUserを使用する
  • セッションリスナーなしでClient Componentsの認証状態を管理しない
  • トークンを手動でlocalStorageに保存しない - SupabaseのCookieベースのセッションを使用する

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

Next.js App RouterでSupabase Authに使用すべきパッケージは何ですか？
Use @supabase/ssr. It is the official package designed for App Router and handles cookie-based sessions properly.
Next.js App Routerでルートを保護するにはどうすればよいですか？
Use middleware. Import createServerClient and check for valid sessions using getUser(). Redirect to login page if no session exists.
Server ComponentsでSupabase Authを使用できますか？
Yes. Use the server client from @supabase/ssr. Call getUser() or getSession() in Server Components to check auth status.
Next.jsでSupabaseのセッションはどのように機能しますか？
Supabase uses cookie-based sessions. The middleware handles cookie rotation, refreshing tokens before they expire automatically.
getSessionとgetUserの違いは何ですか？
getSession returns the session including raw tokens (avoid in browsers). getUser validates the token with Supabase and returns user data (recommended).
OAuthコールバックをどのように処理しますか？
Create a route handler at /auth/callback. Exchange the code from URL params for a session using supabase.auth.exchangeCodeForSession(). Then redirect to the protected area.

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

المؤلف

sickn33

الترخيص

MIT

المستودع

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

مرجع

main

بنية الملفات

📄 SKILL.md