شروع سریع

1. آدرس و کلید پروژه را بردارید

   بعد از اینکه دسترسی گرفتید و در پنل پروژه ساختید، دو چیز لازم دارید: آدرس پروژه که به شکل https://<ref>.giyanapp.ir است، و کلید anon. هر دو در صفحهٔ پروژه در پنل هست.

2. کتابخانه را نصب کنید

   sh

   npm install @supabase/supabase-js

3. وصل شوید

   js

   import { createClient } from '@supabase/supabase-js'
   
   const supabase = createClient(
     'https://<ref>.giyanapp.ir', // project URL, from the panel
     '<anon-key>'                 // anon key, from the panel
   )

   کلید anon برای گذاشتن در کد سمت کاربر است، به این شرط که روی جدول‌ها RLS روشن باشد. کلید service_role را هیچ‌وقت در اپ یا مرورگر نگذارید.

4. کاربر را وارد کنید

   ورود با ایمیل و رمز. کاربر را می‌توانید با signUp یا از Studio بسازید.

   js

   const { data, error } = await supabase.auth.signInWithPassword({
     email: 'sara@example.com',
     password: 'a-long-password',
   })
   
   if (error) console.error(error.message)
   else console.log('signed in as', data.user.id)

5. جدول بسازید و RLS را روشن کنید

   این SQL را در Studio اجرا کنید. با این policy هر کاربر فقط یادداشت‌های خودش را می‌بیند و تغییر می‌دهد.

   sql

   create table public.notes (
     id bigint generated always as identity primary key,
     user_id uuid not null default auth.uid() references auth.users (id),
     body text not null,
     created_at timestamptz not null default now()
   );
   
   alter table public.notes enable row level security;
   
   create policy "own notes" on public.notes
     for all to authenticated
     using (user_id = auth.uid())
     with check (user_id = auth.uid());

6. بنویسید و بخوانید

   کاربر واردشده فقط ردیف‌های خودش را پس می‌گیرد؛ این کار را RLS می‌کند، نه کد شما.

   js

   const { error } = await supabase.from('notes').insert({ body: 'Hello Giyan' })
   
   const { data: notes } = await supabase
     .from('notes')
     .select('id, body, created_at')
     .order('created_at', { ascending: false })

7. فایل آپلود کنید

   اول یک bucket بسازید و اجازه بدهید هر کاربر در پوشهٔ خودش بنویسد:

   sql

   insert into storage.buckets (id, name) values ('avatars', 'avatars');
   
   create policy "own folder" on storage.objects
     for all to authenticated
     using (bucket_id = 'avatars' and (storage.foldername(name))[1] = auth.uid()::text)
     with check (bucket_id = 'avatars' and (storage.foldername(name))[1] = auth.uid()::text);

   بعد از اپ آپلود کنید:

   js

   const { data: { user } } = await supabase.auth.getUser()
   
   // file is a File or Blob, for example from <input type="file">
   const { error } = await supabase.storage
     .from('avatars')
     .upload(`${user.id}/avatar.png`, file, { upsert: true })

8. تغییرها را زنده بگیرید

   جدول را به publication مربوط به realtime اضافه کنید:

   sql

   alter publication supabase_realtime add table public.notes;

   و در اپ گوش بدهید:

   js

   const channel = supabase
     .channel('notes')
     .on(
       'postgres_changes',
       { event: 'INSERT', schema: 'public', table: 'notes' },
       (payload) => console.log('new note', payload.new)
     )
     .subscribe()

بقیه‌اش همان مستندات supabase-js است. چیزهایی که هنوز در گیان نیست در صفحهٔ امکانات آمده.