1. Cài đặt package thông qua NPM

Để sử dụng Supabase trong dự án, trước tiên bạn cần cài đặt thư viện @supabase/supabase-js bằng lệnh sau:

npm install @supabase/supabase-js

2. Hoặc sử dụng trực tiếp qua CDN

Nếu không muốn cài đặt qua NPM, bạn có thể nhúng thư viện vào dự án bằng một trong hai đường dẫn sau:

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
//or
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>

3. Khởi tạo kết nối Supabase

Chèn đoạn mã sau vào file JavaScript của bạn để khởi tạo client Supabase:

import { createClient } from '@supabase/supabase-js'
const supabase_url= ''
const anon_key =''
const supabase = createClient(supabase_url, anon_key, {
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false
  }
})

4. Lấy supabase_url và anon_key từ Supabase

Để lấy thông tin supabase_url và anon_key, bạn làm theo các bước sau:

  1. Đăng nhập vào Supabase
  2. Chọn dự án của bạn
  3. Nhấp vào biểu tượng Settings (Cài đặt)
  4. Truy cập mục API (hoặc Data API)
  5. Tại đây bạn sẽ thấy:
  • Project URL (chính là supabase_url)
  • anon public key (chính là anon_key)
Image Chào Nhé

✅ Kết luận

Vậy là bạn đã hoàn tất các bước cơ bản để tích hợp Supabase vào dự án của mình. Với Supabase, bạn có thể dễ dàng thao tác với cơ sở dữ liệu, xác thực người dùng, và nhiều tính năng backend khác mà không cần tự xây dựng từ đầu. Trong các phần tiếp theo, bạn có thể tìm hiểu thêm về cách truy vấn dữ liệu, thêm bản ghi, xác thực người dùng, và nhiều tính năng mạnh mẽ khác mà Supabase cung cấp.

⚠️ Lưu ý: Hãy đảm bảo bạn đã lưu lại supabase_url và anon_key một cách an toàn, và đừng chia sẻ chúng công khai nếu không cần thiết.