Chào mừng bạn đến với bài viết hướng dẫn cách thiết lập Next-Auth cho NextJS 14, hôm nay mình sẽ hướng dẫn cho các bạn sử dụng Next Auth V5 đây là một phiên bản mới nhất của Next-Auth đang trong giai đoạn beta cung cấp các chức năng xác thực tối ưu ngoài ra bạn có thể quản lý phiên đăng nhập của người dùng theo thời gian thực.
1. Cài đặt NextJS 14 và Next Auth V5
Bước đầu tiên bạn cần cài đặt NextJS trước đã, hiện tại NextJS đã phát triển đến phiên bản 14, bạn có thể dùng lệnh sau để cài đặt:
npx create-next-app@latestSau khi cài đặt xong NextJS 14, bạn cần mở dự án vừa cài đặt và chạy lệnh cài đặt Next Auth như sau:
npm install next-auth@beta
Khi bạn cài đặt xong NextJS và Next Auth V5 thì cấu trúc thư mục và cấu trúc package.json của bạn sẽ giống như hình phía trên.
Sau khi cài đặt xong các thư viện cần thiết chúng ta bắt đầu đến việc cấu hình dự án, đây là phần rất quan trọng nó sẽ quyết định xem dự án của bạn có hoạt động hay không, nếu như bạn thiếu một trong các bước sau có thể dự án của bạn sẽ không thể hoạt động như mong đợi.
2. Cấu hình Next Auth V5
Đầu tiền bạn cần tạo một mã khóa bảo mật cho ứng dụng Next-Auth của bạn tại đây Next-Auth có cung cấp 1 lệnh để làm việc này:
npx auth secretKhi bạn nhập lệnh này nó sẽ yêu cầu bạn cài đặt tiện ích của nó là [email protected] bạn cứ ấn y + enter cho nó cài đặt, sau khi cài đặt xong nó sẽ tạo cho bạn 1 file .env.local trong file này sẽ có AUTH_SECRET.
Tiếp theo, tạo tệp cấu hình Auth.js và đối tượng. Đây là nơi bạn có thể kiểm soát hành vi của thư viện và chỉ định logic xác thực tùy chỉnh, bộ điều hợp, v.v. Chúng tôi khuyên tất cả các khung tạo một tệp trong dự án. Trong tệp này, chúng tôi sẽ truyền tất cả các tùy chọn vào hàm khởi tạo cụ thể của khung và sau đó xuất trình xử lý tuyến đường, phương thức đăng nhập và đăng xuất, v.v.
Bắt đầu bằng cách tạo một auth.ts tệp mới ở thư mục gốc của ứng dụng với nội dung sau.
import NextAuth from "next-auth"
export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [],
})Thêm Trình xử lý tuyến đường bên dưới /app/api/auth/[...nextauth]/route.ts.
import { handlers } from "@/auth"
export const { GET, POST } = handlersThêm phần mềm trung gian tùy chọn để duy trì phiên hoạt động, phần mềm này sẽ cập nhật thời điểm hết hạn của phiên mỗi khi phiên được gọi.
export { auth as middleware } from "@/auth"Như vậy là xong phần cấu hình cơ bản rồi đó các bạn, tiếp theo chúng ta sẽ tiến hành sử dụng các providers của Next-Auth để xác thực, trong bài viết này mình sẽ hướng dẫn có các bạn custom lại trang đăng nhập của Next-Auth đồng thời sẽ xác thực bằng Google nha.
Trước khi bạn có thể vào được phần xác thực thì bạn cần có một database, mình khuyến khích các bạn sử dụng Prisma + PostgreSQL nha vì Next-Auth hỗ trợ hai thư viện này cực kì mạnh.
3. Cấu hình Database (Prisma + PostgreSQL)
Mình sử dụng Database của thằng Supabase nha các bạn, hiện tại nó đang cung cấp một database cho các bạn miễn phí, bạn có thể tạo nhiều dự án khác nhau, tuy nhiên nó vẫn có giới hạn số lượt call đến, băng thông và các giá trị kỹ thuật khác, chi tiết bạn có thể xem ở phần Plan nhé.
Khi bạn đăng ký và tạo database xong bạn ấn vào nút Connect xong chuyển qua tab ORMs ở đây nó cung cấp cho các bạn DATABASE_URL và DIRECT_URL bạn copy vào thư mục env.local nhé, bạn nhở thay đổi phần [YOUR_PASSWORD] thành mật khẩu bạn đặt khi tạo database nha.
Sau khi bạn đã có database rồi chúng ta sẽ tiến hành cài đặt Prisma và Prisma Client:
npm install @prisma/client @auth/prisma-adapter @neondatabase/serverless @prisma/adapter-neon
npm install prisma --save-devBạn cài lần lượt hai câu lệnh trên để cài đặt các thư viện cần thiết, kế tiếp bạn tạo /src/lib/prisma.ts để kết nối đến database:
import { PrismaClient } from '@prisma/client'
import { Pool } from '@neondatabase/serverless'
import { PrismaNeon } from '@prisma/adapter-neon'
const prismaClientSingleton = () => {
const neon = new Pool({ connectionString: process.env.DATABASE_URL })
const adapter = new PrismaNeon(neon)
return new PrismaClient({ adapter })
}
declare const globalThis: {
prismaGlobal: ReturnType<typeof prismaClientSingleton>
} & typeof global
const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()
export default prisma
if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prismaSau đó bạn vào lại /src/auth.ts để thêm Prisma Adapter vào nhé:
Sau đó ở root bạn tạo prisma/schema.prisma dùng để kết nối với database cũng như thêm bảng, các trường dữ liệu và các mối liên hệ trong database nha:
generator client {
provider = "prisma-client-js"
previewFeatures = ["driverAdapters"]
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
directUrl = env("DIRECT_URL")
}
model User {
id String @id @default(cuid())
name String?
email String @unique
emailVerified DateTime?
image String?
accounts Account[]
sessions Session[]
Authenticator Authenticator[]
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model Account {
userId String
type String
provider String
providerAccountId String
refresh_token String?
access_token String?
expires_at Int?
token_type String?
scope String?
id_token String?
session_state String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
@@id([provider, providerAccountId])
}
model Session {
sessionToken String @unique
userId String
expires DateTime
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model VerificationToken {
identifier String
token String
expires DateTime
@@id([identifier, token])
}
model Authenticator {
credentialID String @unique
userId String
providerAccountId String
credentialPublicKey String
counter Int
credentialDeviceType String
credentialBackedUp Boolean
transports String?
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
@@id([userId, credentialID])
}Sau khi bạn tao xong thì bạn cần chạy 2 lệnh sau, đầu tiên là lệnh dùng để khởi tạo database ở client:
npx prisma generatekế tiếp là lệnh push database lên trên máy chủ của bạn:
npx prisma db pushLƯU Ý: tại đây bạn cần đổi .env.local thành .env nhé vì prisma không đọc được biến môi trường ở .env.local
Nếu như thông báo thành công thì xem như bạn đã hoàn thành các bước đầu tiên cho việc thiết lập Next-Auth cho NextJS rồi đó.
4. Đăng ký Google API
Các hãy truy cập vao Cloud Google để tạo cho mình một dự án nha, tại bài viết này mình không hướng dẫn chi tiết về việc tạo dự án trên Cloud Google.
Các bạn lưu ý các thông tin sau ở hình ảnh phía dưới, mình đã có gạch đỏ các thông tin cần lưu ý, nếu bạn đang làm việc tại môi trường phát triển thì hãy ghi giống hình phía dưới nha:
Các thông tin cần chú ý:
- Phần “Name” đây là tên dự án của bạn, bạn có thể tùy chỉnh.
- Phần “Authorized JavaScript origins” bạn có thể nhập tên miền của bạn nếu như bạn đang trong môi trường phát triển thị mặc định sẽ là “http://localhost:3000”.
- Phần “Authorized redirect URIs” nó sẽ callback về khi bạn thực hiện đăng nhập nó sẽ theo cấu trúc sau: “tên miền + /api/auth/callback/google” mặc định trên môi trường phát triển là: “http://localhost:3000/api/auth/callback/google”.
- Phần “Client ID” bạn copy và bỏ vào file .env nha.
- Phần “Client Secret” bạn copy và bỏ vào file .env nha.
Bạn hãy đặt biến môi trường là AUTH_GOOGLE_ID và AUTH_GOOGLE_SECRET nha, vì khi đặt như thế bạn khớp với mặc định của Next Auth, điều này nó sẽ giảm bớt phần khai báo biến môi trường trong Providers khi bạn thiết lập đăng nhập với Google.
AUTH_GOOGLE_ID=
AUTH_GOOGLE_SECRET=5. Đăng nhập bằng Google
Đầu tiên bạn cần tạo một giao diện đăng nhập, gồm nút đăng nhập bằng Google nha, phía dưới là giao diện cơ bản của mình:
Kế tiếp tục ra tách nút đăng nhập ra một components khác vì hiện tại trang này mình đã khai báo “async function” mà nút đăng nhập cần sử dụng thuộc tính “onClick” thuộc tính này chỉ có thể sử dụng ở Client Component mà thôi mình tách ra như sau:
Kế tiếp bạn vào cho mình phần /src/auth.ts để khai báo cho nó Google Providers, các bạn chú ý đường dẫn import vào nhé:
Như vậy là đã hoàn thành xong các bước để đăng nhập Google bằng Next Auth V5 rồi, các bạn chỉ cần chạy:
npm run devKế tiếp vào ấn vào nút “Đăng nhập bằng Google” thì sẽ thành công nha, đây là kết quả:
Next Auth V5 sẽ tự động import vào database của các bạn và nó quản lý dựa trên JWT hoặc Session tùy theo bạn lựa chọn với bài hướng dẫn của mình thì mình đã cấu hình chuẩn để có thể quản lý bằng hai phương thức trên còn nếu bạn làm theo tài liệu của Next Auth V5 thì chỉ có thể quản lý bằng JWT thôi nha, nếu có thắc mắt thì đừng ngần lại liên hệ với mình qua các trang mạng xã hội nha, lời cuối cùng mình xin cảm ơn các bạn đã xem bài hướng dẫn của mình.
Video hướng dẫn: Mẹo Vặt Công Nghệ – Youtube
Bài viết khác: Mẹo Vặt Công Nghệ – Webiste
