Supabase Auth Bảo Mật Ứng Dụng Web Trong 10 Phút

Tại sao nên bảo mật ứng dụng web ngay từ đầu?

Khi xây dựng một ứng dụng web, bảo mật thường bị xem nhẹ cho đến khi có sự cố xảy ra. Tuy nhiên, việc bảo vệ dữ liệu người dùng và ngăn chặn truy cập trái phép nên được ưu tiên ngay từ giai đoạn đầu. Nếu bạn đang tìm kiếm một giải pháp nhanh chóng, mạnh mẽ và hoàn toàn miễn phí, Supabase Auth là lựa chọn đáng cân nhắc.

Supabase Auth cung cấp hệ thống xác thực người dùng tích hợp sẵn, hỗ trợ nhiều phương thức đăng nhập (email/password, OAuth, mạng xã hội), quản lý session an toàn và bảo vệ API. Bài viết này sẽ hướng dẫn bạn thiết lập xác thực chỉ trong 10 phút, giúp ứng dụng của bạn an toàn ngay lập tức.

Chuẩn bị môi trường

Trước khi bắt đầu, bạn cần: - Một project Supabase (tạo miễn phí tại supabase.com). - Một ứng dụng web (React, Next.js, Vue, hoặc vanilla JS đều được).

Sau khi tạo project, lấy URL và public key từ mục Project Settings > API.

Cài đặt Supabase Auth

Bước 1: Thêm thư viện Supabase

Cài đặt package @supabase/supabase-js:

npm install @supabase/supabase-js

Bước 2: Khởi tạo client

Tạo file lib/supabase.js:

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

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseKey = 'YOUR_PUBLIC_KEY'


export const supabase = createClient(supabaseUrl, supabaseKey)

Thiết lập các luồng xác thực cơ bản

Đăng ký tài khoản

import { supabase } from './lib/supabase'

async function signUp() {
  const { data, error } = await supabase.auth.signUp({
    email: '[email protected]',
    password: 'securepassword123'
  })
  if (error) console.log('Error:', error)
  else console.log('User created:', data.user)
}

Đăng nhập

async function signIn() {
  const { data, error } = await supabase.auth.signInWithPassword({
    email: '[email protected]',
    password: 'securepassword123'
  })
  if (error) console.log('Error:', error)
  else console.log('Logged in:', data.user)
}

Đăng xuất

async function signOut() {
  const { error } = await supabase.auth.signOut()
  if (error) console.log('Error:', error)
  else console.log('Logged out')
}

Bảo vệ API và dữ liệu

Kiểm tra session

Sử dụng hook useSession để kiểm tra trạng thái đăng nhập:

import { supabase } from './lib/supabase'

const { data: { session } } = await supabase.auth.getSession()
const user = session?.user

Bảo mật API

Khi gọi API, bạn có thể gửi token ID trong header:

const { data, error } = await supabase
  .from('messages')
  .select('*')
  .eq('user_id', supabase.auth.user()?.id)

Hoặc sử dụng Row Level Security (RLS) để tự động lọc dữ liệu theo user:

-- Trong Supabase Dashboard > SQL Editor
CREATE POLICY "Users can view own messages" ON messages
  FOR SELECT USING (auth.uid() = user_id);

Các tính năng nâng cao (tùy chọn)

Xác thực OAuth

Supabase hỗ trợ đăng nhập qua Google, GitHub, GitHub, Azure, v.v. Bạn có thể bật trong Authentication > Providers.

Email verification

Mặc định, Supabase gửi email xác thực. Bạn có thể tùy chỉnh template trong Authentication > Templates.

Quản lý session

Bạn có thể cấu hình thời gian session, cho phép người dùng tự đăng xuất trên các thiết bị khác.

Kết luận

Với Supabase Auth, bạn có thể thiết lập hệ thống xác thực an toàn chỉ trong vài phút. Không cần phải tự viết lại logic bảo mật phức tạp, không lo lưu mật khẩu thô, và được hỗ trợ bởi một nền tảng đáng tin cậy.

Hãy bắt đầu với xác thực cơ bản, sau đó nâng cấp dần với OAuth, email verification, và RLS. Bảo mật không cần phải phức tạp — chỉ cần bắt đầu đúng cách.

Bạn đã sẵn sàng bảo vệ ứng dụng của mình chưa?