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

nextjs-supabase-auth

آمن

إضافة مصادقة Supabase إلى Next.js App Router

يوفر هذا الدليل إرشادات متخصصة لدماج مصادقة Supabase مع Next.js App Router. يساعد المطورين في تنفيذ تدفقات تسجيل الدخول الآمنة، وحماية المسارات باستخدام البرامج الوسيطة، وإدارة الجلسات بشكل صحيح في مكونات الخادم والعميل.

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

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

2

رفع في Claude

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

3

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

اختبرها

استخدام "nextjs-supabase-auth". كيف أقوم بإعداد مصادقة Supabase في Next.js App Router؟

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

استخدم حزمة @supabase/ssr. ثبتها باستخدام npm install @supabase/ssr. أنشئ ملف utils/supabase/server.ts للعميل من جانب الخادم و utils/supabase/client.ts للعميل من جانب العميل. تكوين متغيرات البيئة NEXT_PUBLIC_SUPABASE_URL و NEXT_PUBLIC_SUPABASE_ANON_KEY.

استخدام "nextjs-supabase-auth". إنشاء برنامج وسيط للمصادقة للمسارات المحمية

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

استورد createServerClient من @supabase/ssr. في البرنامج الوسيط، استخدم supabase.auth.getUser() للتحقق من الرموز. أعد التوجيه إلى /login إذا لم تكن هناك جلسة صالحة.حدث الرموز قبل انتهاء الصلاحية.

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

آمن
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 جديد مع مصادقة المستخدم

أضف تسجيل الدخول الآمن وإدارة الجلسات إلى مشروع Next.js App Router جديد باستخدام Supabase كمزود مصادقة.

حماية المسارات باستخدام البرنامج الوسيط

تنفيذ حماية المسارات التي تتحقق من حالة المصادقة وتحدث الجلسات قبل منح الوصول.

الترحيل من Pages Router إلى App Router

فهم اختلاف أنماط المصادقة بين Pages Router و App Router عند استخدام Supabase.

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

إعداد Supabase الأساسي 
كيف أقوم بإعداد مصادقة Supabase في مشروع Next.js App Router؟
حماية البرنامج الوسيط 
إنشاء برنامج وسيط لحماية المسارات وتحديث الجلسات مع Supabase
معالجة استدعاء OAuth 
كيف أقوم بمعالجة استدعاء OAuth وتبادل الرمز للحصول على جلسة في Next.js؟
مصادقة Server Action 
استخدم Supabase مع Server Actions لتسجيل الدخول وتسجيل الخروج والتسجيل

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

  • استخدم حزمة @supabase/ssr بدلاً من @supabase/auth-helpers-nextjs لـ App Router
  • تعامل مع الرموز في البرنامج الوسيط للمسارات المحمية، وليس في مكونات العميل
  • استخدم Server Actions لعمليات المصادقة للحفاظ على المنطق الحساس على الخادم
  • لا تعرض رموز المصادقة للعميل بشكل غير ضروري - اعتمد على ملفات تعريف الارتباط HttpOnly

تجنب

  • لا تستخدم getSession في مكونات الخادم - استخدم getUser بدلاً منها
  • لا تدير حالة المصادقة في مكونات العميل بدون مستمع للجلسة
  • لا تخزن الرموز يدوياً في localStorage - استخدم جلسات Supabase المستندة إلى ملفات تعريف الارتباط

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

ما الحزمة التي يجب أن أستخدمها لمصادقة Supabase في Next.js App Router؟
استخدم @supabase/ssr. إنها الحزمة الرسمية المصممة لـ App Router وتتعامل مع الجلسات المستندة إلى ملفات تعريف الارتباط بشكل صحيح.
كيف أحمي المسارات في Next.js App Router؟
استخدم البرنامج الوسيط. استورد createServerClient وتحقق من الجلسات الصالحة باستخدام getUser(). أعد التوجيه إلى صفحة تسجيل الدخول إذا لم تكن هناك جلسة.
هل يمكنني استخدام مصادقة Supabase مع مكونات الخادم؟
نعم. استخدم العميل من جانب الخادم من @supabase/ssr. استدعِ getUser() أو getSession() في مكونات الخادم للتحقق من حالة المصادقة.
كيف تعمل الجلسات مع Supabase في Next.js؟
تستخدم Supabase جلسات مستندة إلى ملفات تعريف الارتباط. يتعامل البرنامج الوسيط مع تدوير ملفات تعريف الارتباط، وتحديث الرموز تلقائياً قبل انتهاء الصلاحية.
ما الفرق بين getSession و getUser؟
تُرجع getSession الجلسة بما في ذلك الرموز الأولية (تجنب في المتصفحات). تتحقق getUser من الرمز مع Supabase وتُرجع بيانات المستخدم (موصى به).
كيف أعالج استدعاءات OAuth؟
أنشئ معالج مسار في /auth/callback. استبدل الرمز من معاملات URL للحصول على جلسة باستخدام supabase.auth.exchangeCodeForSession(). ثم أعد التوجيه إلى المنطقة المحمية.

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

المؤلف

sickn33

الترخيص

MIT

المستودع

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

مرجع

main

بنية الملفات

📄 SKILL.md