Xác Thực Người Dùng Supabase Auth Cho Ứng Dụng Mobile

Mở đầu

Trong thời đại số, bảo mật thông tin người dùng là yếu tố then chốt cho mọi ứng dụng mobile. Xác thực (authentication) không chỉ giúp bảo vệ dữ liệu mà còn tạo ra trải nghiệm liền mạch, cá nhân hóa cho người dùng. Supabase Auth là một giải pháp xác thực mạnh mẽ, dễ tích hợp, hỗ trợ đa dạng phương thức đăng nhập và được xây dựng trên nền tảng backend mở nguồn. Trong bài viết này, chúng ta sẽ khám phá cách tích hợp Supabase Auth vào ứng dụng mobile, từng bước một, để giúp bạn triển khai tính năng xác thực một cách nhanh chóng và an toàn.

Supabase Auth là gì?

Supabase Auth là một dịch vụ xác thực người dùng được tích hợp sẵn trong hệ sinh thái Supabase. Nó cung cấp các tính năng cốt lõi như đăng ký, đăng nhập, khôi phục mật khẩu, xác thực qua email, đăng nhập bằng các nhà cung cấp OAuth (Google, GitHub, Apple, Facebook...), và quản lý phiên làm việc. Supabase Auth hoạt động dựa trên JSON Web Tokens (JWT), giúp đảm bảo tính bảo mật và linh hoạt khi triển khai trên nhiều nền tảng mobile khác nhau.

Tại sao nên chọn Supabase Auth cho ứng dụng mobile?

- Dễ tích hợp: Supabase cung cấp SDK cho cả React Native và Flutter, giúp việc kết nối với backend trở nên đơn giản. - Bảo mật cao: Mật khẩu được mã hóa, dữ liệu người dùng được lưu trữ an toàn, hỗ trợ xác thực hai yếu tố. - Đa dạng phương thức đăng nhập: Hỗ trợ email/password, OAuth, và các nhà cung cấp phổ biến. - Quản lý người dùng tập trung: Bảng auth.users tự động được tạo, giúp quản lý dễ dàng. - Mở rộng linh hoạt: Có thể tùy chỉnh quy tắc bảo mật, webhook, và tích hợp với các dịch vụ khác của Supabase.

Các bước tích hợp Supabase Auth vào ứng dụng mobile

Bước 1: Tạo dự án Supabase

Đầu tiên, truy cập vào Supabase Console và tạo một dự án mới. Sau khi dự án được khởi tạo, lưu lại URL project và public anon key - đây là thông tin cần thiết để kết nối từ ứng dụng mobile.

Bước 2: Cài đặt SDK Supabase

Tùy theo framework mobile bạn sử dụng, cài đặt SDK tương ứng:

- React Native:

npm install @supabase/supabase-js

- Flutter:

flutter pub add supabase_flutter

Bước 3: Khởi tạo kết nối Supabase

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

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'


export const supabase = createClient(supabaseUrl, supabaseAnonKey)

import 'package:supabase_flutter/supabase_flutter.dart';

final String supabaseUrl = 'YOUR_SUPABASE_URL';
final String supabaseKey = 'YOUR_SUPABASE_ANON_KEY';


await Supabase.initialize(url: supabaseUrl, anonKey: supabaseKey);

Bước 4: Triển khai đăng ký và đăng nhập

// Đăng ký
const { data, error } = await supabase.auth.signUp({
  email: '[email protected]',
  password: 'password123'
})

// Đăng nhập
const { data, error } = await supabase.auth.signInWithPassword({
  email: '[email protected]',
  password: 'password123'
})

// Đăng ký
final res = await Supabase.instance.client.auth.signUp(
  '[email protected]',
  'password123',
);

// Đăng nhập
final res = await Supabase.instance.client.auth.signIn(
  email: '[email protected]',
  password: 'password123',
);

Bước 5: Xử lý xác thực qua email

Sau khi đăng ký, Supabase sẽ gửi email xác thực đến người dùng. Bạn có thể kiểm tra trạng thái xác thực và yêu cầu gửi lại email:

// Kiểm tra trạng thái
const { data, error } = await supabase.auth.getUser()

// Gửi lại email xác thực
const { data, error } = await supabase.auth.getUser().then(({ data }) => {
  if (!data.user.email_verified) {
    return supabase.auth.getUser().then(({ data }) => {
      if (!data.user.email_verified) {
        return supabase.auth.signIn({
          email: data.user.email,
          options: { redirectTo: 'your-callback-url' }
        })
      }
    })
  }
})

Bước 6: Đăng nhập qua OAuth (Google, GitHub, Apple, Facebook)

Supabase Auth hỗ trợ đăng nhập qua các nhà cung cấp OAuth. Để kích hoạt, vào phần Authentication > Providers trong Supabase Dashboard và bật provider mong muốn. Sau đó, trong ứng dụng:

// Đăng nhập Google
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google'
})

// Đăng nhập Google
final res = await Supabase.instance.client.auth.signInWithOAuth(
  provider: 'google',
);

Bước 7: Quản lý phiên làm việc và bảo mật

Supabase tự động quản lý phiên làm việc và lưu token vào bộ nhớ an toàn. Bạn có thể kiểm tra trạng thái đăng nhập và đăng xuất:

// Kiểm tra trạng thái
const { data, error } = await supabase.auth.getUser()

// Đăng xuất
const { error } = await supabase.auth.signOut()

Bước 8: Tùy chỉnh quy tắc bảo mật

Sử dụng Row Level Security (RLS) của Supabase để bảo vệ dữ liệu người dùng. Ví dụ, chỉ cho phép người dùng truy cập dữ liệu của chính họ:

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

Kết luận

Tích hợp Supabase Auth vào ứng dụng mobile là một giải pháp hiệu quả, giúp bạn triển khai tính năng xác thực một cách nhanh chóng và an toàn. Với các bước hướng dẫn chi tiết trên, bạn có thể xây dựng hệ thống đăng ký, đăng nhập, và quản lý người dùng một cách chuyên nghiệp. Supabase Auth không chỉ tiết kiệm thời gian phát triển mà còn đảm bảo tính bảo mật và mở rộng cho ứng dụng của bạn. Hãy bắt đầu tích hợp ngay hôm nay để nâng cao trải nghiệm người dùng và bảo vệ dữ liệu một cách tối ưu.