Kết hợp NextAuth và Supabase: Xử lý xác thực hiệu quả trong ứng dụng Full-Stack hiện đại

Khi phát triển ứng dụng ONNS (옷늘날씨), tôi muốn việc đăng nhập trở nên dễ dàng và nhanh chóng nhất có thể. Không ai muốn phải quản lý thêm một mật khẩu nữa, và tôi cũng không muốn tốn hàng tuần để phát minh lại hệ thống xác thực. Đó là lý do tôi kết hợp NextAuth với Supabase. Nhờ vậy, tôi có thể tập trung vào việc xây dựng các phần thú vị của ứng dụng mà vẫn đảm bảo tính an toàn.

Tại sao lại kết hợp này?

NextAuth là tiêu chuẩn de facto cho xác thực trong các ứng dụng Next.js. Nó hỗ trợ các nhà cung cấp OAuth, quản lý phiên, JWT, và tích hợp liền mạch với App Router.
Supabase cung cấp một backend Postgres hoàn chỉnh với khả năng thực thời và lưu trữ. Vì tài khoản người dùng và bài viết đều được lưu trữ trong Supabase, việc kết nối xác thực vào cùng một hệ sinh thái là điều hoàn toàn hợp lý.

Bằng cách kết hợp chúng, tôi đã có được những điều tốt nhất từ cả hai thế giới: đăng nhập linh hoạt qua các nhà cung cấp thông qua NextAuth và quản lý hồ sơ người dùng trong Supabase.

Quy trình xác thực

Người dùng nhấp vào Đăng nhập bằng Google (hoặc nhà cung cấp khác).
NextAuth xử lý bước xác thực OAuth.
Khi thành công, NextAuth gọi một bộ điều hợp tùy chỉnh để đồng bộ người dùng với Supabase.
Phiên làm việc sẽ có sẵn trên toàn ứng dụng.

Với cách này, xác thực trở nên tự nhiên và tất cả dữ liệu liên quan đến người dùng sẽ giữ được tính nhất quán trong cơ sở dữ liệu.

Triển khai ví dụ

Cấu hình NextAuth:

typescript Copy

// app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { SupabaseAdapter } from "@next-auth/supabase-adapter";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  adapter: SupabaseAdapter({
    url: process.env.SUPABASE_URL!,
    secret: process.env.SUPABASE_SERVICE_ROLE_KEY!,
  }),
  secret: process.env.NEXTAUTH_SECRET,
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

Bảo vệ một route:

typescript Copy

// app/feed/page.tsx
import { getServerSession } from "next-auth";
import { authOptions } from "../api/auth/[...nextauth]/route";

export default async function FeedPage() {
  const session = await getServerSession(authOptions);

  if (!session) {
    return <p>Vui lòng đăng nhập để xem feed.</p>;
  }

  return <p>Chào mừng, {session.user?.name}! Đây là feed cá nhân của bạn.</p>;
}

Lợi ích mà tôi nhận thấy

Đơn giản: Tôi không cần phải tự xây dựng hệ thống đăng nhập. NextAuth đã xử lý tất cả.
An toàn: Supabase lưu trữ hồ sơ người dùng trong Postgres, và tôi có thể áp dụng các chính sách bảo mật cấp hàng (RLS).
Linh hoạt: Việc thêm nhiều nhà cung cấp (GitHub, Twitter) gần như chỉ cần sao chép và dán.
Tích hợp: Vì bài viết, bình luận và hồ sơ đã nằm trong Supabase, danh tính người dùng hoàn toàn phù hợp với mô hình dữ liệu.

Bài học nhanh

Cả NextAuth và Supabase đều hỗ trợ xác thực riêng biệt. Bạn có thể chỉ sử dụng Supabase Auth. Tuy nhiên, bằng cách sử dụng NextAuth, tôi đã đạt được sự tích hợp chặt chẽ hơn với các tính năng của Next.js, chẳng hạn như middleware và server actions. Mô hình bộ điều hợp cho phép tôi không phải chọn một trong hai mà có thể kết hợp cả hai.

Lời kết

Xác thực thường không phải là phần thú vị nhất của một dự án, nhưng đó là phần có thể làm hỏng trải nghiệm nếu nó xảy ra sai sót. Bằng cách tận dụng NextAuth và Supabase, ONNS đã đạt được việc xác thực người dùng mượt mà và một thiết lập dễ bảo trì cho tôi.

Câu hỏi thường gặp (FAQ)

1. Tại sao nên sử dụng NextAuth với Supabase?
Việc kết hợp này giúp bạn có một hệ thống xác thực an toàn và dễ quản lý, đồng thời tiết kiệm thời gian phát triển.

2. Có thể thêm bao nhiêu nhà cung cấp xác thực?
Bạn có thể dễ dàng thêm nhiều nhà cung cấp như GitHub hoặc Twitter chỉ bằng cách cấu hình trong NextAuth.

3. Có cần phải biết nhiều về bảo mật khi sử dụng Supabase?
Supabase cung cấp nhiều tính năng bảo mật, nhưng bạn vẫn nên có kiến thức cơ bản về các chính sách bảo mật để bảo vệ dữ liệu của mình.

Lời kêu gọi hành động

Hãy thử tích hợp NextAuth và Supabase vào dự án Next.js của bạn và trải nghiệm sự khác biệt trong việc quản lý xác thực!

Kết hợp NextAuth và Supabase: Xử lý xác thực hiệu quả