بناء نظام Login/Register في React بالـ JWT لحماية أكثر

ازاي تبني نظام Login/Register في React بالـ JWT عشان تحمي بيانات المستخدمين ​

لو انتا شغال على مشروع ويب وعاوز تعمل نظام دخول و خروج يحمي بيانات المستخدمين عندك يبقى لازم تستخدم حاجة اسمها JWT (JSON Web Token).
طيب تعالى أقولك إزاي نقدر نعمل الكلام ده سوا من غير ما ندخل في اي تعقيدات.

في البدايه يعني ايه JWT أصلا؟​

الـ JWT يا صديقي عبارة عن تذكرة بياخدها اليوزر أول ما يدخل بياناته صح وبنخزنها عنده عشان نقدر نستخدمها كل مرة محتاجين نتأكد من هويته فـ بدل ما ندخل المستخدم على نفس الصفحة كل مرة يفتح الموقع لا هنا الـJWT بتمسك بياناته مؤقتا.

حلو؟ تعالي اقولك بقا ازاي نمشيها واحدة واحدة؟​

1. اول خطوه: دخول اليوزر وتوليد JWT
أول خطوة المستخدم بيبعت بياناته للسيرفر زي الإيميل والباسورد عشان يتحقق منها لو البيانات صح السيرفر بيرد علينا بـ JWT اللي بنعتبرها زي مفتاح للدخول.
2. تاني خطوه: تخزين الـ JWT
بمجرد ما السيرفر يرجعلنا بالـJWT بنخزنها عند المستخدم في localStorage أو sessionStorage ودي بتكون بمثابة تصريح عشان المستخدم يقدر يدخل على البيانات بتاعته بعد كده.
3. تالت خطوه: استخدام الـ JWT في كل طلبية للسيرفر
عشان نتأكد من حماية البيانات كل ما نحتاج نجيب حاجة للمستخدم زي بيانات البروفايل بنبعت الـJWT دي في الطلبات للسيرفر عشان يتأكد إنه المستخدم المسجل فعلا.
4. الخطوه الأهم: حماية الصفحات المهمة باستخدام Protected Routes
عشان نحمي الصفحات اللي محدش يدخلها غير المستخدمين المسجلين زي البروفايل مثلا بنعمل حاجة اسمها Protected Routes في ريأكت. بكل بساطة الصفحة دي بتسمح للمستخدم يدخل بس لو معاه JWT سليمة.... بس كدا شوفت بسيطه ازاي

دا مثال عملي عشان الدنيا توضحلك اكتر :
هنا عملنا Component عشان نتأكد إن المستخدم معاه JWT سليمه:

import { Navigate } from 'react-router-dom';
const ProtectedRoute = ({ children }) => {
  const token = localStorage.getItem('token'); // نجيب التوكن من المخزن
  return token ? children : <Navigate to="/login" />; // لو التوكن موجودة يدخله الصفحة، لو مش موجودة يحوله للـ Login
};

وفي الملف الأساسي بنستخدمها كده:

<Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />

يعني هنا لو المستخدم مسجل دخوله، يقدر يشوف صفحة البروفايل، غير كده هنحوله للـ Login.

السؤال المعتاد ليه تستخدم الـ JWT؟​

- لأن مش لازم نخزن بيانات المستخدم عندنا بنخزنها عنده هو وكل ما نحتاجها يبعتلنا الـ JWT.
- عشان نمنع أي حد مش مسجل من دخول الصفحات المحمية من غير إذن.

وبكده نكون خلصنا عن الـ Authentication في React وJWT... متنساش تكتب رايك في الشرح في الكومنتات يا صديقي .