تعلم بناء Login/Register في React بالـ JWT

ازاي تبني نظام Login/Register في React بالـ JWT لحماية البيانات​

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

في البوست ده هاشرحلك خطوة بخطوة إزاي تبني Login وRegister في React بالـ JWT من غير تعقيدات، عشان المستخدم يقدر يدخل ويخرج بأمان.

يعني إيه JWT؟ ​

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

خطوة 1: دخول المستخدم وتوليد JWT ​

أول خطوة، المستخدم بيبعت بياناته زي email وpassword للسيرفر.
لو البيانات صح، السيرفر بيرد علينا بـ JWT، واللي بنعتبرها مفتاح الدخول للمستخدم.

مثال بسيط لإرسال البيانات للسيرفر:

const loginUser = async (email, password) => {
const response = await fetch('[http://localhost:5000/login](http://localhost:5000/login)', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password })
});
const data = await response.json();
return data.token; // بيرجع لنا JWT
};

---

خطوة 2: تخزين الـ JWT ​

بمجرد ما السيرفر يرد علينا بالتوكن، بنخزنها عند المستخدم في localStorage أو sessionStorage، وده بيسمح للمستخدم إنه يدخل على البيانات بتاعته بعد كده من غير تسجيل دخول جديد.

مثال

const token = await loginUser(email, password);
localStorage.setItem('token', token); // بنخزن التوكن

---

خطوة 3: استخدام الـ JWT في كل طلب للسيرفر ​

عشان نتأكد من حماية البيانات، كل مرة نحتاج نجيب حاجة للمستخدم زي بيانات البروفايل، بنبعت الـ JWT في الـ request headers.

مثال

const fetchProfile = async () => {
const token = localStorage.getItem('token');
const response = await fetch('[http://localhost:5000/profile](http://localhost:5000/profile)', {
headers: { Authorization: `Bearer ${token}` }
});
const data = await response.json();
return data;
};

---

خطوة 4: حماية الصفحات المهمة بـ Protected Routes ​

عشان نحمي الصفحات اللي محدش يدخلها غير المستخدمين المسجلين، زي صفحة البروفايل، بنعمل Protected Routes في React.
الصفحة دي هتسمح للمستخدم بالدخول بس لو معاه JWT سليمة.

مثال عملي

import { Navigate } from 'react-router-dom';

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

واستخدامها في ملف Routes:

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

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

---

ليه تستخدم JWT؟ ​

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

الخلاصة ​

الـ JWT مع React بيسهل علينا حماية صفحات المستخدمين وبيخلي عملية Login/Register آمنة وسهلة.
لو البوست عجبك، شاركه واكتبلي في الكومنتات رأيك وإزاي انت بتتعامل مع الـ JWT في مشاريعك.