Khởi động với Supabase trong ứng dụng React + TypeScript
Giới thiệu
Gần đây, mình đã phát hiện ra Supabase và rất hào hứng với nó. Supabase là một dịch vụ Backend-as-a-Service (BaaS) cung cấp tính năng xác thực, cơ sở dữ liệu Postgres, các đăng ký thời gian thực và lưu trữ ngay từ đầu. Điều mình thích nhất là nó rất dễ học và tích hợp một cách mượt mà với dự án React.
Bài viết này là phần đầu tiên trong chuỗi bài viết về việc tích hợp Supabase với React. Mình sẽ giữ mọi thứ đơn giản nhất có thể, bắt đầu từ những điều cơ bản: thiết lập một dự án React + TypeScript, kết nối nó với Supabase, và xây dựng một quy trình xác thực sạch sẽ với đăng ký, đăng nhập và đăng xuất, được định dạng bằng TailwindCSS.
Mục lục
- Thiết lập Supabase
- Tạo dự án React + TypeScript
- Khởi tạo Supabase
- Xây dựng giao diện xác thực
- Lưu trữ phiên người dùng
- Kết luận
Thiết lập Supabase
Để bắt đầu với Supabase, bạn cần thực hiện các bước sau:
- Truy cập vào supabase.com và đăng ký tài khoản.
- Tạo một dự án mới. Khi dự án đã sẵn sàng, ghi lại URL dự án và khóa API ẩn danh từ bảng điều khiển.
- Trong phần cài đặt xác thực, bật đăng nhập bằng Email/Mật khẩu.
Tạo dự án React + TypeScript
Chúng ta sẽ bắt đầu từ đầu với Vite.
bash
npx create-vite@latest supabase-auth-demo --template react-ts
cd supabase-auth-demo
npm install
npm install @supabase/supabase-js tailwindcss postcss autoprefixer
npx tailwindcss init -pThiết lập Tailwind trong tailwind.config.js:
javascript
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],Thêm Tailwind vào src/index.css:
css
@tailwind base;
@tailwind components;
@tailwind utilities;Khởi tạo Supabase
Tạo một tệp mới src/supabaseClient.ts:
typescript
import { createClient } from "@supabase/supabase-js";
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY as string;
export const supabase = createClient(supabaseUrl, supabaseAnonKey);Thêm thông tin xác thực Supabase vào .env:
env
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-keyXây dựng giao diện xác thực
Chúng ta sẽ xây dựng một mẫu đơn giản với React và TailwindCSS cho việc đăng ký, đăng nhập và đăng xuất.
javascript
import { useState } from "react";
import { supabase } from "./supabaseClient";
export default function Auth() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [user, setUser] = useState<any>(null);
const [error, setError] = useState("");
const handleSignup = async () => {
const { data, error } = await supabase.auth.signUp({ email, password });
if (error) setError(error.message);
else setUser(data.user);
};
const handleLogin = async () => {
const { data, error } = await supabase.auth.signInWithPassword({ email, password });
if (error) setError(error.message);
else setUser(data.user);
};
const handleLogout = async () => {
await supabase.auth.signOut();
setUser(null);
};
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
<div className="bg-white shadow-md rounded-lg p-6 w-80">
<h2 className="text-2xl font-bold text-center mb-4">Supabase Auth</h2>
{error && <p className="text-red-500 text-sm mb-2">{error}</p>}
{!user ? (
<>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full mb-3 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<input
type="password"
placeholder="Mật khẩu"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full mb-3 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<div className="flex gap-2">
<button
onClick={handleSignup}
className="w-1/2 bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700"
>
Đăng ký
</button>
<button
onClick={handleLogin}
className="w-1/2 bg-green-600 text-white py-2 rounded-lg hover:bg-green-700"
>
Đăng nhập
</button>
</div>
</>
) : (
<div className="text-center">
<p className="mb-4">Đăng nhập với {user.email}</p>
<button
onClick={handleLogout}
className="w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700"
>
Đăng xuất
</button>
</div>
)}
</div>
</div>
);
}Lưu trữ phiên người dùng
Bạn có thể lấy phiên hiện tại khi ứng dụng tải:
javascript
import { useEffect } from "react";
useEffect(() => {
supabase.auth.getSession().then(({ data }) => {
console.log("Phiên:", data.session);
});
}, []);Best Practices
- Bảo mật thông tin: Luôn luôn bảo vệ khóa API và thông tin nhạy cảm.
- Kiểm tra lỗi: Thêm các thông báo lỗi để người dùng dễ dàng nhận biết các vấn đề.
- Tối ưu hóa hiệu suất: Sử dụng các kỹ thuật tối ưu hóa khi làm việc với dữ liệu lớn.
Common Pitfalls
- Không kiểm tra phiên: Bỏ qua việc kiểm tra phiên có thể khiến người dùng gặp khó khăn.
- Không xử lý lỗi: Thiếu thông báo lỗi có thể gây khó chịu cho người dùng.
Performance Tips
- Sử dụng lazy loading: Để cải thiện hiệu suất tải trang.
- Giảm số lượng render: Chỉ render lại khi cần thiết.
Kết luận
Chúng ta vừa thiết lập một hệ thống xác thực sử dụng Supabase trong React với TypeScript, bao gồm đăng ký, đăng nhập và đăng xuất, tất cả được định dạng bằng TailwindCSS. Đây là một điểm khởi đầu vững chắc cho bất kỳ ứng dụng nào cần xác thực người dùng.
Trong phần tiếp theo của chuỗi bài viết này, chúng ta sẽ khám phá Supabase Edge Functions và cách xây dựng các API tùy chỉnh cho ứng dụng của bạn. Hãy chia sẻ bài viết này đến những người mà bạn nghĩ rằng họ nên học Supabase!
