Xác thực người dùng cơ bản với NextAuth.js

Bảo mật và xác thực người dùng là phần không thể thiếu trong hầu hết các ứng dụng web. Với Next.js, bạn có thể tích hợp NextAuth.js – một thư viện xác thực mạnh mẽ và dễ sử dụng. Trong bài học này, học viên sẽ học cách cài đặt NextAuth.js, cấu hình các nhà cung cấp đăng nhập (Google, GitHub, Credentials), sử dụng useSession() để kiểm tra trạng thái đăng nhập, và hiển thị nội dung phù hợp theo từng người dùng.

Xác thực người dùng cơ bản với NextAuth.js

1. Cài đặt NextAuth.js

npm install next-auth

Tự động tạo API route /api/auth/* để xử lý đăng nhập, đăng xuất, callback...

2. Cấu hình NextAuth

Tạo file cấu hình NextAuth tại pages/api/auth/[...nextauth].js

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import GitHubProvider from "next-auth/providers/github"

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET
    }),
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
})

Đừng quên thêm .env.local chứa các biến môi trường:

GOOGLE_CLIENT_ID=xxx
GOOGLE_CLIENT_SECRET=xxx
GITHUB_CLIENT_ID=xxx
GITHUB_CLIENT_SECRET=xxx
NEXTAUTH_SECRET=some-random-secret

3. Thêm provider dạng đăng nhập bằng tài khoản (Credentials - tùy chọn)

import CredentialsProvider from "next-auth/providers/credentials"

CredentialsProvider({
  name: "Credentials",
  credentials: {
    username: { label: "Username", type: "text" },
    password: { label: "Password", type: "password" }
  },
  authorize(credentials) {
    if (credentials.username === 'admin' && credentials.password === '123') {
      return { id: 1, name: 'Admin' }
    }
    return null
  }
})

Credentials Provider nên dùng cho bài học/demo. Muốn dùng thực tế cần mã hóa mật khẩu, kết nối DB...

4. Sử dụng useSession() để kiểm tra trạng thái

Tạo file components/UserInfo.js

import { useSession, signIn, signOut } from "next-auth/react"

export default function UserInfo() {
  const { data: session, status } = useSession()

  if (status === "loading") return <p>Loading...</p>

  if (!session) {
    return (
      <div>
        <p>Bạn chưa đăng nhập</p>
        <button onClick={() => signIn()}>Đăng nhập</button>
      </div>
    )
  }

  return (
    <div>
      <p>Xin chào, {session.user.name}</p>
      <img src={session.user.image} alt="avatar" width={50} />
      <button onClick={() => signOut()}>Đăng xuất</button>
    </div>
  )
}

useSession() giúp bạn xác định người dùng hiện tại.

5. Bảo vệ trang cần đăng nhập (optional)

import { getSession } from "next-auth/react"

export async function getServerSideProps(context) {
  const session = await getSession(context)

  if (!session) {
    return {
      redirect: {
        destination: "/api/auth/signin",
        permanent: false
      }
    }
  }

  return {
    props: { session }
  }
}

6. Tuỳ chỉnh giao diện đăng nhập (nếu muốn)

Bạn có thể custom lại trang /api/auth/signin bằng cách truyền pages:

pages: {
  signIn: '/auth/signin',
  error: '/auth/error',
  signOut: '/auth/signout',
}

Kết luận

Sau bài học này, học viên đã học được cách:

• Cài đặt và cấu hình NextAuth trong dự án Next.js
• Tích hợp các provider đăng nhập như Google, GitHub, hoặc credentials
• Kiểm tra và xử lý trạng thái đăng nhập với useSession()
• Tùy chỉnh giao diện và bảo vệ trang yêu cầu xác thực

Xác thực là bước nền quan trọng để chuyển sang các bài học nâng cao như CRUD theo người dùng, phân quyền, hoặc kết hợp backend thực sự.