Supabase • المستوى الثالث • الدرس 1

تهيئة Supabase والمصادقة (Supabase Auth)

أهداف الدرس

تهيئة عميل Supabase بـ createClient.
التسجيل وتسجيل الدخول بـ signUp و signInWithPassword.
تسجيل الدخول بـ Google عبر signInWithOAuth.
مراقبة حالة الجلسة بـ onAuthStateChange.

1. ما هو Supabase؟

Supabase هو بديل مفتوح المصدر لـ Firebase، مبني على قاعدة بيانات PostgreSQL حقيقية. يوفر: Auth، Database (Postgres)، Storage، Realtime، Edge Functions — كل ذلك فوق Postgres. الميزة الكبرى: يمكنك استخدام SQL مباشرة، ولا يوجد Vendor Lock-in.

Supabase

• Postgres SQL حقيقي
• Row Level Security (RLS)
• مفتوح المصدر (Self-hosted)
• Real-time عبر Logical Replication

Firebase

• NoSQL (Firestore)
• Security Rules (لغة مخصصة)
• Google Cloud (مُدار)
• Real-time عبر WebSockets

2. تهيئة العميل — createClient

قبل أي عملية، تحتاج لإنشاء عميل Supabase. تحتاج إلى:

• supabaseUrl — رابط مشروعك (من لوحة التحكم).
• supabaseKey — المفتاح العام (anon key) من الإعدادات.

javascript

import { createClient } from '@supabase/supabase-js';

// هذه المعلومات تجدها في:
// Supabase Dashboard → Settings → API
const supabaseUrl = 'https://your-project.supabase.co';
const supabaseKey = 'YOUR_ANON_KEY';

export const supabase = createClient(supabaseUrl, supabaseKey);

// ملاحظة: anon key آمن للاستخدام في المتصفح
// يعتمد على RLS لحماية البيانات

3. التسجيل وتسجيل الدخول — signUp & signIn

يوفر supabase.auth جميع عمليات المصادقة:

signUp

إنشاء حساب جديد بالبريد وكلمة المرور.

const { data, error } =
  await supabase.auth
    .signUp({
      email, password
    });

signInWithPassword

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

const { data, error } =
  await supabase.auth
    .signInWithPassword({
      email, password
    });

الفرق بينهما

• signUp — ينشئ مستخدم جديد. غالباً يرسل بريد تحقق.
• signInWithPassword — يفتح جلسة لمستخدم موجود.
• كلاهما يُرجع data.user + data.session + error.

4. تسجيل الدخول بـ OAuth — signInWithOAuth

لتسجيل الدخول عبر مزود خارجي (Google, GitHub, Apple...):

javascript

// تسجيل الدخول بـ Google
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: 'https://yourapp.com/auth/callback'
  }
});

// signInWithOAuth يُعيد توجيه المستخدم
// إلى صفحة Google → ثم يعود إلى redirectTo
// لا تحتاج لمعالجة data.user مباشرة

المزودون المدعومون

• google، github، gitlab، bitbucket
• facebook، twitter، discord
• apple، azure، linkedin

5. تسجيل الخروج والمستخدم الحالي

signOut

إنهاء الجلسة الحالية.

await supabase.auth.signOut();

getUser

جلب المستخدم الحالي (للتحقق من الجلسة).

const { data: { user } } =
  await supabase.auth.getUser();

6. مراقبة حالة الجلسة — onAuthStateChange

أفضل طريقة لمعرفة متى يُسجّل المستخدم دخوله أو خروجه — بدلاً من polling:

javascript

// مراقبة تغييرات الجلسة
const { data: { subscription } } = supabase.auth.onAuthStateChange(
  (event, session) => {
    console.log('Event:', event);  // SIGNED_IN, SIGNED_OUT, TOKEN_REFRESHED...
    console.log('Session:', session);
    if (session) {
      console.log('المستخدم:', session.user.email);
    } else {
      console.log('لا يوجد مستخدم');
    }
  }
);

// مهم: أوقف الاشتراك عند unmount
subscription.unsubscribe();

الأحداث الشائعة

• SIGNED_IN — تسجيل دخول
• SIGNED_OUT — تسجيل خروج
• TOKEN_REFRESHED — تجديد token
• USER_UPDATED — تحديث بيانات

الاستخدام الأمثل

• في React: داخل useEffect
• احفظ subscription
• استدعِ unsubscribe() عند التنظيف

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

تحدي الدرس: نظام مصادقة Supabase كامل

أضف دالة signInWithGoogle تستخدم signInWithOAuth.
أضف دالة signOutUser تستخدم supabase.auth.signOut().
أضف دالة getCurrentUser تستخدم getUser().
أضف دالة listenToAuth تستخدم onAuthStateChange.
أضف اختباراً تلقائياً.

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

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