يا هلا بيك يا صديقي المبرمج في مقال جديد من سلسلة شروحات تطوير الويب (Web Development) وتحديداً عائلة ريأكت (React) ونكست جي إس (Next.js). خليني أخمّن حاجة.. أكيد وأنت بتبني أي مشروع جديد، بتجيلك اللحظة اللي لازم تعمل فيها نظام تسجيل دخول (Authentication)، وهنا بتبدأ المعاناة! تقعد تفكر: هل أعمل داتا بيز للـ Passwords؟ ولا أحفظ الـ Hash؟ ولا أتعذب مع الـ Sessions والـ Cookies؟ وجع دماغ كبير صح؟

عشان كده، في المقال ده، هناخد رحلة ممتعة وسهلة جداً عشان نحل المشكلة دي جذرياً، وهنتعلم سوا إزاي نعمل بناء نظام تسجيل دخول في Next.js باستخدام مكتبة NextAuth.js (الشهيرة دلوقتي بـ Auth.js). والأجمل من كده إننا هنربط النظام ده بتسجيل الدخول بجوجل وجيت هاب (Google & GitHub OAuth) وهنعرف إزاي نعمل حماية المسارات (Route Protection) زي البروfيشينال بالضبط، وبأقل خطوط كود ممكنة. جهز كوباية الشاي بتاعتك، ويلا بينا نبدأ!

يعني ايه NextAuth.js وليه بنستخدمها؟

زمان، عشان تعمل نظام تسجيل دخول محترم، كنت بتستهلك وقتاً رهيباً في كتابة الـ Backend، وتظبيط الـ JWT (JSON Web Tokens)، وتأمين الـ Cookies ضد هجمات الـ XSRF. لكن مع ظهور Next.js، الموضوع اتغير 180 درجة.

مكتبة NextAuth.js هي الحل السحري اللي بيعمل لك كل الشغل ده "من غير ما تحس". بتدعم آلاف المزودين (Providers) زي جوجل، جيت هاب، فيسبوك، وحتى تسجيل الدخول بالإيميل والباسورد التقليدي (Credentials). الأهم من كده إنها مبنية خصيصاً عشان تشتغل بسلاسة مع أحدث إصدارات Next.js (تحديداً App Router)، وبتوفر عليك ساعات طويلة من كتابة الكود المكرر.

الخطوة الأولى: تجهيز المشروع وتثبيت المكتبة

أول خطوة هنعملها هي إننا نفتح التيرمينال (Terminal) ونثبت المكتبة المطلوبة في مشروع الـ Next.js بتاعنا. افتح المشروع واكتب الكود ده:

npm install next-auth@beta

ليه كتبنا @beta؟ لأن الإصدار الجديد (Auth.js v5) هو المتوافق تماماً مع الـ App Router الجديد في Next.js، وبيقدّم أداء وتجربة استخدام خرافية.

الخطوة التانية: إعداد متغيرات البيئة (Environment Variables)

عشان نقدر نربط موقعنا بجوجل وجيت هاب، محتاجين نروح لكل منصة ونعمل تطبيق جديد (OAuth App) عشان ناخد منها الـ Client ID والـ Client Secret.

بعد ما تجيب الكودات دي من جوجل ود开发者 (Developer settings) في جيت هاب، اعمل ملف جديد في جذر المشروع باسم .env.local وحط فيه البيانات دي:

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

GITHUB_ID=your-github-client-id
GITHUB_SECRET=your-github-client-secret

AUTH_SECRET=generate-a-random-secret-key-here

ملحوظة مهمة جداً: الـ AUTH_SECRET ده عبارة عن مفتاح تشفير عشوائي، تقدر تولده بسهولة عن طريق التيرمينال باستخدام أمر openssl rand -base64 32.

الخطوة التالته: إعداد الـ Route Handler الخاص بـ NextAuth

في Next.js مع الـ App Router، بنحتاج نعمل ملف بيستقبل كل طلبات الـ Authentication. هنروح نعمل المسار ده: app/api/auth/[...nextauth]/route.js ونكتب فيه الكود الأساسي للمكتبة:

import NextAuth from "next-auth"
import Google from "next-auth/providers/google"
import GitHub from "next-auth/providers/github"

export const { handlers: { GET, POST }, auth, signIn, signOut } = NextAuth({
  providers: [
    Google,
    GitHub,
  ],
})

export { GET, POST };

بالشكل ده، إحنا فعلنا مزودين الخدمة (Providers) وخلينا الـ API جاهز يستقبل أي طلب تسجيل دخول أو تسجيل خروج.

الخطوة الرابعة: عمل واجهة تسجيل الدخول (Login Page)

دلوقتي محتاجين نعمل زرار العميل يضغط عليه عشان يسجل دخول. هنعمل مكون (Component) بسيط نقدر نستخدمه في أي صفحة:

import { signIn } from "@/auth"

export default function SignInButton() {
  return (
    <form
      action={async () => {
        "use server"
        await signIn("google")
      }}
    >
      <button type="submit">سجل دخول باستخدام جوجل</button>
    </form>
  )
}

الخطوة الخامسة: حماية المسارات (Route Protection)

النقطة الأهم والأكثر طلباً بين المبرمجين هي حماية الصفحات اللي مش مسموح لأي حد يدخلها إلا لو كان مسجل دخول. عشان نعمل كده في Next.js، بنستخدم ملف middleware.js في جذر المشروع:

export { auth as middleware } from "@/auth"

export const config = {
  matcher: ["/dashboard/:path*", "/profile/:path*"],
}

الـ Middleware البسيط ده هيضمن إن أي شخص يحاول يدخل على مسار الـ Dashboard أو الـ Profile وهو مش عامل تسجيل دخول، هيتحول أوماتيك لصفحة الـ Login. عظيمة يا Next.js صح؟

خاتمة ونصيحة من أخ

في النهاية يا صديقي، بناء نظام تسجيل دخول (Authentication) مكنش أبداً بالمهمة المستحيلة، ومع NextAuth.js الموضوع بقى أسهل بكتير وبيبني لك أساس قوي ومؤمن لمشروعك. نصيحتي ليك كـ مبرمج بيسعى للتطور: متقلقش من قراءة الديكومنتشن (Documentation) الرسمية للمكتبات، لأنها دايماً بتبמוت فيها تفاصيل وتحديثات هامة بتخليك دايماً سابق بخطوة. جرب بايدك، اغلط، وصلح الغلط، ودي الطريقة الوحيدة الحقيقية عشان تثبت المعلومة في دماغك.