Authentication في React: JWT و Cookies

في أي تطبيق حقيقي، ستحتاج تسجيل دخول وتحديد من يحق له الوصول للصفحات. هذا ما نسميه Authentication.

في React غالبًا نتعامل مع طريقتين مشهورتين: JWT و Cookies.

ما هو JWT؟

JWT (JSON Web Token) هو توكن نصي يحتوي معلومات المستخدم، ويتم توقيعه من السيرفر ليضمن أنه لم يتم التلاعب به.

التعريف البسيط: JWT = توكن يثبت هوية المستخدم بدون جلسة في السيرفر.

ما هي Cookies؟

Cookies هي بيانات صغيرة يحفظها المتصفح ويُرسلها تلقائياً مع كل طلب. يمكن استخدامها لحفظ جلسة تسجيل الدخول.

متى أستخدم JWT ومتى Cookies؟

• JWT: مناسب للتطبيقات التي تعتمد على API منفصل ومرونة في الجلسات.
• Cookies: مناسبة للتطبيقات التقليدية وتوفر حماية إضافية عبر HttpOnly.

مثال مبسط: حفظ توكن بعد تسجيل الدخول

async function handleLogin() {
  const res = await fetch("/api/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password }),
  });

  const data = await res.json();
  localStorage.setItem("token", data.token);
}

بعد نجاح تسجيل الدخول، نحفظ التوكن في localStorage. هذا يجعلنا قادرين على إرساله في كل طلب لاحق.

ماذا يحدث بالضبط؟ عندما ينجح تسجيل الدخول، السيرفر يُرجع token داخل الاستجابة. نحن نخزّنه محليًا كي لا نطلب تسجيل الدخول في كل مرة، ثم نستخدمه لاحقًا لإثبات الهوية في أي طلب يحتاج صلاحيات.

مثال: إرسال التوكن في الهيدر

async function fetchProfile() {
  const token = localStorage.getItem("token");

  const res = await fetch("/api/profile", {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

  return res.json();
}

هنا أرسلنا التوكن داخل Authorization header. السيرفر يقرأ التوكن ويتحقق من صلاحية المستخدم.

الفكرة أن كل طلب محمي يجب أن يحمل هذا الهيدر. إذا كان التوكن صحيحًا يسمح السيرفر بالوصول، وإذا كان غير موجود أو منتهي الصلاحية يرجع خطأ 401.

مثال: حماية صفحة داخل React

function ProtectedPage() {
  const token = localStorage.getItem("token");

  if (!token) {
    return <Navigate to="/login" />;
  }

  return <Dashboard />;
}

إذا لم يكن هناك توكن، نوجّه المستخدم لصفحة تسجيل الدخول. وإذا كان موجوداً نعرض الصفحة المحمية.

هذا يُسمّى حماية الصفحات داخل الواجهة. بدل أن يظهر للمستخدم محتوى لا يحق له الوصول إليه، نتحقق أولًا ثم نقرر هل نعرض الصفحة أم نعيد التوجيه.

ملاحظة مهمة حول الأمان

تخزين التوكن في localStorage بسيط للتعلّم، لكنه أقل أمانًا من Cookies HttpOnly.

الأسئلة الشائعة — FAQ

ما هو JWT؟

JWT هو توكن موقّع يثبت هوية المستخدم بدون جلسة في السيرفر.

ما الفرق بين JWT و Cookies؟

JWT عادة يُرسل في الهيدر، بينما Cookies تُرسل تلقائياً مع الطلبات.

هل أستخدم localStorage لتخزين التوكن؟

يصلح للتعلّم، لكن الأفضل استخدام Cookies HttpOnly في الإنتاج.

كيف أحمي الصفحات في React؟

تحقّق من وجود توكن أو حالة تسجيل دخول قبل عرض الصفحة.

ما معنى HttpOnly Cookie؟

Cookie لا يمكن قراءتها من JavaScript، وهذا يقلل مخاطر XSS.