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

npm install @supabase/supabase-js

flutter pub add supabase_flutter

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

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

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Flutter:

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

React Native:

// Đă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'
})

Flutter:

// Đă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:

React Native:

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

Flutter:

// Đă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.