العودة للمقالات

بناء تطبيق SvelteKit كامل الميزات مع مصادقة Supabase

Majd Muhtaseb02‏/06‏/202518 دقيقة

مقدمة

SvelteKit هو إطار عمل قوي لبناء تطبيقات الويب باستخدام Svelte. توفر Supabase واجهة خلفية متكاملة مع ميزات مثل المصادقة وقاعدة البيانات والتخزين. ستوجهك هذه المقالة خلال إعداد تطبيق SvelteKit كامل الميزات مع مصادقة Supabase.

المتطلبات الأساسية

• تثبيت Node.js و npm
• إنشاء حساب ومشروع Supabase

إعداد SvelteKit

أولاً، لنقم بإنشاء مشروع SvelteKit جديد:

npm create svelte@latest my-sveltekit-app
cd my-sveltekit-app
npm install

اختر خيار المشروع الهيكلي لإعداد بسيط.

تثبيت عميل Supabase

قم بتثبيت عميل JavaScript الخاص بـ Supabase:

npm install @supabase/supabase-js

تكوين Supabase

أنشئ ملف .env في جذر مشروعك وأضف عنوان URL ومفتاح API الخاصين بـ Supabase:

VITE_SUPABASE_URL="عنوان_Supabase_الخاص_بك"
VITE_SUPABASE_ANON_KEY="مفتاح_API_الخاص_بك"

استبدل عنوان_Supabase_الخاص_بك و مفتاح_API_الخاص_بك ببيانات اعتماد Supabase الفعلية الخاصة بك. يمكنك العثور على هذه في إعدادات مشروع Supabase الخاص بك.

قم بتهيئة عميل Supabase في src/lib/supabaseClient.js:

// src/lib/supabaseClient.js
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

تنفيذ المصادقة

لنقم بإنشاء نموذج تسجيل دخول بسيط. قم بإنشاء src/routes/login/+page.svelte:

// src/routes/login/+page.svelte
<script>
  import { supabase } from '$lib/supabaseClient';
  import { goto } from '$app/navigation';
  import { auth } from '$lib/stores';

  let email = '';
  let password = '';
  let loading = false;

  async function handleLogin() {
    loading = true;
    const { data, error } = await supabase.auth.signInWithPassword({
      email,
      password,
    });

    if (error) {
      alert(error.message);
    } else {
      $auth = data.user;
      goto('/');
    }

    loading = false;
  }
</script>

<svelte:head>
  <title>تسجيل الدخول</title>
</svelte:head>

<h1>تسجيل الدخول</h1>

<input type="email" bind:value={email} placeholder="البريد الإلكتروني" />
<input type="password" bind:value={password} placeholder="كلمة المرور" />
<button on:click={handleLogin} disabled={loading}>
  {#if loading}
    جاري تسجيل الدخول...
  {:else}
    تسجيل الدخول
  {/if}
</button>

أنشئ مكون src/routes/register/+page.svelte مشابهاً لتسجيل المستخدم، باستخدام supabase.auth.signUp.

// src/routes/register/+page.svelte
<script>
    import { supabase } from '$lib/supabaseClient';
    import { goto } from '$app/navigation';

    let email = '';
    let password = '';
    let loading = false;

    async function handleRegister() {
        loading = true;
        const { data, error } = await supabase.auth.signUp({
            email,
            password,
        });

        if (error) {
            alert(error.message);
        } else {
            // اختياريًا ، أرسل بريدًا إلكترونيًا للتأكيد
            goto('/login'); // إعادة التوجيه إلى تسجيل الدخول بعد التسجيل
        }

        loading = false;
    }
</script>

<svelte:head>
    <title>تسجيل</title>
</svelte:head>

<h1>تسجيل</h1>

<input type="email" bind:value={email} placeholder="البريد الإلكتروني" />
<input type="password" bind:value={password} placeholder="كلمة المرور" />
<button on:click={handleRegister} disabled={loading}>
    {#if loading}
        جار التسجيل...
    {:else}
        تسجيل
    {/if}
</button>

قم بإنشاء مخزن Auth في src/lib/stores.js:

// src/lib/stores.js
import { writable } from 'svelte/store';

export const auth = writable(null);

حماية المسارات

قم بإنشاء ملف +layout.js جذري في الدليل src/routes لتنفيذ حماية المسار:

// src/routes/+layout.js
import { supabase } from '$lib/supabaseClient';
import { auth } from '$lib/stores';
import { redirect } from '@sveltejs/kit';

export const load = async ({ url }) => {
    supabase.auth.getSession().then(({ data: { session } }) => {
        auth.set(session?.user ?? null)
    })
	const { data: { user } } = await supabase.auth.getUser();
	if (user == null && url.pathname !== '/login' && url.pathname !== '/register') {
		throw redirect(302, '/login');
	}

	return {
		supabase,
		url: url.origin,
	};
};

قم بإنشاء صفحة رئيسية src/routes/+page.svelte:

<script>
    import { supabase } from '$lib/supabaseClient';
    import { auth } from '$lib/stores';
    import { goto } from '$app/navigation';
    async function handleLogout() {
        const { error } = await supabase.auth.signOut()
        if(!error) {
            $auth = null;
            goto('/login');
        }
    }
</script>

{#if $auth}
    <h1>مرحبًا، {$auth.email}!</h1>
    <button on:click={handleLogout}>تسجيل الخروج</button>
{:else}
    <p>أنت غير مسجل الدخول.</p>
    <a href="/login">تسجيل الدخول</a> | <a href="/register">تسجيل</a>
{/if}

خاتمة

قدمت هذه المقالة بداية سريعة لبناء تطبيق SvelteKit كامل الميزات مع مصادقة Supabase. يمكنك التوسع في هذا الأساس بإضافة تفاعلات قاعدة البيانات والتخزين وعناصر واجهة مستخدم أكثر تعقيدًا. تذكر معالجة الأخطاء بأمان وتنفيذ تدابير أمنية مناسبة في بيئة الإنتاج.