الهدف
بعد هالدرس تقدر تضيف نظام auth كامل لتطبيقك — تسجيل دخول بـ magic link، حماية الـ routes بـ middleware، وزر logout — كل هذا بدون ما تبني authentication من الصفر.
ليش هذا الحين؟
بنيت الـ landing page — الحين المستخدم يضغط "سجّل الحين" ويحتاج مكان يروح له. الـ auth هو البوابة اللي تحوّل زائر عشوائي لمستخدم حقيقي عنده account وبيانات محفوظة. بدون auth، كل شي مؤقت. مع auth، التطبيق تصير له قيمة حقيقية.
الفكرة
الـ authentication يجاوب على سؤال: "منو انت؟". الـ authorization يجاوب: "شنو تقدر تسوي؟". في هالدرس نبني الـ authentication.
Better Auth: الـ library اللي نستخدمها. أفضل من NextAuth للـ Next.js App Router — أوضح API، أقل magic، TypeScript من البداية.
Magic Link: بدل كلمة المرور، المستخدم يدخّل إيميله ويوصله رابط. يضغط الرابط، يدخل تلقائيا. أسهل للمستخدم، وآمن أكثر من كلمات المرور الضعيفة.
الـ flow:
User enters email
→ Better Auth sends magic link via Resend
→ User clicks link
→ Session created
→ Redirect to dashboard
الـ middleware:
ملف middleware.ts يشتغل قبل كل request. لو المستخدم يحاول يفتح /dashboard بدون session، نحوّله لـ /login. هذا يحمي الـ routes الخاصة.
الـ session: Better Auth يخزن الـ session في cookie. كل request يحمل الـ cookie، و middleware يتحقق منه.
الـ env variables المطلوبة:
BETTER_AUTH_SECRET— مفتاح سري طويل عشوائيBETTER_AUTH_URL— URL التطبيقRESEND_API_KEY— مفتاح Resend لإرسال الإيميلDATABASE_URL— connection string للـ database