Firebase & Supabase • المستوى الأول • الدرس 1

تهيئة مشروعات Firebase والمصادقة (Firebase App & Auth)

أهداف الدرس العلمية

ربط التطبيقات بـ Firebase SDK v10 وتوليد المفاتيح عبر firebaseConfig.
تطبيق المصادقة الآمنة عبر البريد الإلكتروني ومزودي الخدمة الخارجية كـ Google Auth.
التعامل مع signInWithPopup و signInWithEmailAndPassword.
مراقبة حالة تسجيل الدخول التلقائية عبر onAuthStateChanged.

1. تهيئة خدمة Firebase Auth

تتيح دالة initializeApp الربط الفوري بالخلفية السحابية المُدارة من Google، بينما توفر GoogleAuthProvider إمكانية توثيق هوية المستخدمين بنقرة واحدة عبر الويب والمنصات.

javascript

// بنية firebaseConfig (يتم توليدها من Firebase Console)
const firebaseConfig = {
  apiKey: "...",              // مفتاح API
  authDomain: "...",          // نطاق المصادقة
  projectId: "...",           // معرّف المشروع
  storageBucket: "...",       // مساحة التخزين
  messagingSenderId: "...",   // معرّف الإشعارات
  appId: "..."                // معرّف التطبيق
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

2. خيارات المصادقة الأربعة

Email / Password

تسجيل الدخول بالبريد وكلمة المرور.

signInWithEmailAndPassword(auth, email, pwd)

Google

نافذة منبثقة لتسجيل الدخول بحساب Google.

signInWithPopup(auth, provider)

GitHub

تسجيل الدخول بحساب GitHub.

new GithubAuthProvider()

Phone

تسجيل الدخول برقم الهاتف (SMS OTP).

signInWithPhoneNumber(...)

3. دورة حياة المصادقة

Firebase تُدير 4 حالات أساسية:

Signed Out

لا مستخدم

جاري التحقق

Signed In

مستخدم نشط

Token Refresh

تجديد تلقائي

التطبيق العملي المباشر

تحدي الدرس الأول: بناء نظام مصادقة كامل

قم بالتعديل على الكود بداخل المحرر أدناه لتطبيق المتطلبات التالية:

أضف signOut و createUserWithEmailAndPassword إلى قائمة imports.
أنشئ دالة loginWithEmail(email, password) تستخدم signInWithEmailAndPassword.
أنشئ دالة registerWithEmail(email, password) تستخدم createUserWithEmailAndPassword.
أنشئ دالة logoutUser() تستدعي signOut(auth) وتُطبع رسالة تأكيد.
أضف مراقباً لـ onAuthStateChanged يطبع رسالة عند دخول/خروج المستخدم.
اضغط "تشغيل الكود" لرؤية مخرجات Firebase المُحاكاة.

⏳ جارٍ تحميل المحرر التفاعلي...

فهرس المستوى الانتقال للدرس الثاني