Clerk là gì? Hướng dẫn tích hợp Clerk vào dự án NextJS

Trước đây, mình thường phải xây dựng hệ thống xác thực từ đầu: từ việc tạo bảng trong cơ sở dữ liệu (database), lưu trữ mật khẩu đã được mã hoá (hashed password), tới việc tự triển khai logic đăng nhập, đăng xuất, handle phiên người dùng,... Điều này tiêu tốn khá nhiều thời gian và đòi hỏi bạn phải có kiến thức chuyên sâu về bảo mật. Đây cũng chính là lúc mình nghĩ đến việc tìm kiếm một giải pháp "Authentication as a Service".

Nếu bạn giống mình cũng đã từng "vật lộn" với việc nhúng Auth0, hay loay hoay tạo logic xác thực riêng cho Firebase, mình tin chắc Clerk là một lựa chọn đáng để bạn dùng thử. Clerk tập trung vào việc hỗ trợ các ứng dụng React và NextJs, cung cấp thư viện tiện lợi, hỗ trợ sẵn nhiều tính năng hiện đại như xác thực đa yếu tố (MFA), xác thực không mật khẩu (passwordless), đăng nhập bằng mạng xã hội (social login),… Tất cả đều chỉ với một vài dòng code.

1. Clerk là gì?

Clerk là dịch vụ chuyên cung cấp giải pháp xác thực (authentication) và quản lý người dùng (user management) được xây dựng dành riêng cho các ứng dụng React và Next.js.

Với Clerk, bạn có thể triển khai các luồng đăng nhập, đăng ký, xử lý bảo mật (gửi mã OTP qua email/sms), quản lý thông tin hồ sơ người dùng (profile), liên kết tài khoản mạng xã hội (social accounts linking),...

Điểm mạnh của Clerk là có sẵn UI components được viết riêng cho React, NextJs. Bạn chỉ cần import các component như: <SignIn />, <SignUp />, <UserProfile />,… và chèn vào trang phù hợp. Thay vì phải tự ngồi code từng dòng giao diện hay từng logic khi call API, Clerk cung cấp hầu hết mọi thứ. Nhưng nếu như bạn muốn custom lại giao diện, hoặc call API của Clerk để kết nối với backend do bạn tự build thì vẫn hoàn toàn ổn nhé.

Tương tự giống như các services khác, Clerk vận hành theo mô hình SaaS (Software as a Service), nghĩa là bạn sẽ lưu trữ dữ liệu người dùng trên hạ tầng của Clerk. Clerk sẽ chịu trách nhiệm về bảo mật, độ ổn định, cập nhật, và bạn sẽ phải trả phí nếu vượt quá hạn mức miễn phí.

2. Tại sao bạn nên sử dụng Clerk?

• Clerk được thiết kế để hoạt động mượt với NextJs. Việc tích hợp Clerk vào NextJs giống như: "đo ni đóng giày" - chỉ cần vài bước config, một vài "middleware" và "providers" là bạn đã có authentication đầy đủ.
• Clerk đi kèm nhiều components sẵn như: form đăng nhập, đăng ký, profile, trang quản lý mật khẩu,… Theo cảm quan của mình nhận xét thì giao diện components cơ bản khá là đẹp. Bạn có thể sử dụng ngay mà không cần tùy chỉnh quá nhiều.
• Clerk hỗ trợ nhiều phương thức đăng nhập từ email-password, đến đăng nhập thông qua Google, Facebook, GitHub, Twitter,… hay thậm chí passwordless (dùng magic link gửi qua email/sms). Người dùng website của bạn có thể liên kết nhiều tài khoản, thay đổi phương thức đăng nhập theo ý thích.
• Clerk có sẵn các hooks, context, đảm bảo bạn có thể truy cập thông tin người dùng, quản lý session, protect route một cách đơn giản. Đặc biệt hữu ích, quan trọng trong NextJs để render điều kiện (conditional rendering) hay kiểm tra quyền truy cập (authorization checks).
• Không lo lắng về các rủi ro bảo mật người dùng vì Clerk giúp bạn gánh vác mảng này.

Bên cạnh Clerk, tất nhiên là còn nhiều giải pháp tương tự như: Auth0, Firebase Auth, Supabase Auth, hay thậm chí là bạn tự build. Tuỳ vào tính chất dự án và sở thích, bạn sẽ chọn dịch vụ phù hợp nhất. Cá nhân mình thì mình ấn tượng với Clerk tích hợp với NextJs (không cần quá nhiều code) và free-tier thoải mái cho dự án nhỏ.

3. Cách thức hoạt động của Clerk

Khi bạn tạo tài khoản Clerk, bạn sẽ có một Project (hoặc "Application") đại diện cho ứng dụng NextJs của mình. Clerk sẽ cung cấp API Keys và Publishable Keys để bạn sử dụng trong code. Mỗi khi bạn muốn đăng nhập, bạn sẽ dùng các component hoặc API do Clerk cung cấp. Tất cả thao tác như: gửi OTP, xác thực email, liên kết mạng xã hội, lưu trữ session,… đều diễn ra thông qua Clerk.

Trên NextJs, bạn sẽ cài gói @clerk/nextjs (hoặc @clerk/clerk-react, tuỳ version), sau đó cấu hình environment variables chứa keys. Bạn cũng cần cấu hình "middleware" (trong NextJs) để Clerk có thể protect route khi chưa xác thực hoặc thực hiện thao tác chuyển hướng khi cần. Về cơ bản, Clerk sẽ cài đặt một số logic "server-side" để trao đổi token, xác thực người dùng và quản lý session. Về phía client, Clerk cung cấp hooks hoặc context để bạn có thể bắt được trạng thái người dùng hiện tại (đang đăng nhập, đã đăng xuất, email là gì, role là gì,...).

Các thành phần giao diện như: <SignIn> hay <SignUp> sẽ tự động hiển thị form đăng nhập, đăng ký, và tương tác với server Clerk thông qua các endpoint do Clerk thiết lập. Điều này giúp bạn không phải viết code thủ công quá nhiều. Tất nhiên, nếu bạn muốn tuỳ biến hoặc tự code giao diện, Clerk cũng cung cấp API hoặc hooks để hỗ trợ.

4. Hướng dẫn tích hợp Clerk vào dự án Next.js

Đầu tiên, bạn cần đăng ký tài khoản trên Clerk:

B1: Truy cập trang chủ của Clerk

B2: Chọn button Get started (nếu bạn chưa có tài khoản) hoặc Sign in (nếu đã có).

B3: Bạn có thể đăng nhập bằng: email-password, GitHub hoặc Google. Giao diện sẽ trông như thế này:

Cá nhân mình sẽ chọn phương án sử dụng Github nha. Sau khi bạn đăng nhập xong thì bạn sẽ được chuyển đến Clerk Dashboard trông như hình bên dưới:

Tiếp theo, đến bạn sẽ đến bước khởi tạo project:

B1: Đặt tên cho project của bạn. Ví dụ: "Nextjs-Clerk App"

B2: Chọn hình thức mà bạn muốn áp dụng đăng nhập trong website của mình. Ví dụ: Google, Github, Email,... Đồng thời thì bạn có thể thấy giao diện phía bên tay phải

B3: Khi bạn đã chắc chắn, chọn "Create application" để khởi tạo và cung cấp cho bạn các keys quan trọng:

• Publishable Key (dạng pk_test_... hoặc pk_live_...)
• Secret Key (dạng sk_test_... hoặc sk_live_...)

Cuối cùng, sau khi create application xong, Clerk sẽ hiển thị các bước để bạn có thể tích hợp Clerk vào framework bạn mong muốn như hình bên dưới.

Ở bước set environment variables, bạn click vào link mà Clerk đã liên kết sẵn cho bạn, bạn sẽ được chuyển hướng đến nơi có publish key và secret key.

Sau khi bạn đã có tài khoản, bây giờ mình tiến đến bước tích hợp vào project Nextjs nha. Ở phần hướng dẫn này mình sẽ sử dụng Next 14 nha.

Để khởi tạo một dự án Nextjs bạn chạy câu lệnh pnpx create-next-app@14

Bạn lưu ý là sau khi khởi tạo xong bạn phải chạy dự án lên để test trước khi mình tích hợp với câu lệnh pnpm dev để đảm bảo mọi thứ hoạt động bình thường.

Sau khi bạn đã khởi tạo hoàn tất source Next 14.

B1: Install @clerk/nextjs chạy câu lệnh tại terminal: pnpm add @clerk/nextjs

B2: Tạo file .env.local ngay tại root của dự án để chứa thông tin các keys dạng thế này:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISH_KEY
CLERK_SECRET_KEY=YOUR_SECRET_KEY

B3: Khởi tạo file middleware.ts nằm trong thư mục gốc của dự án hoặc nằm trong /src nếu bạn đang sử dụng dạng /src

import { clerkMiddleware } from "@clerk/nextjs/server";

// ------------------------------------------------------

export default clerkMiddleware();

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
};

B4: Update file /src/app/layout.tsx (nếu bạn sử dụng App Routes) hoặc /src/pages/_app.tsx (nếu bạn sử dụng Page Routes)

// /src/app/layout.tsx
import {
  ClerkProvider,
  SignInButton,
  SignedIn,
  SignedOut,
  UserButton,
} from '@clerk/nextjs';
import './globals.css';

// ----------------------------------

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>
          <SignedOut>
            <SignInButton />
          </SignedOut>
          <SignedIn>
            <UserButton />
          </SignedIn>
          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}

/src/pages/_app.tsx

import {
  ClerkProvider,
  SignInButton,
  SignedIn,
  SignedOut,
  UserButton
} from '@clerk/nextjs'

// -------------------------

return (
  <ClerkProvider>
    <SignedOut>
      <SignInButton />
    </SignedOut>
    <SignedIn>
      <UserButton />
    </SignedIn>
    <Component {...pageProps} />
  </ClerkProvider>
)

Cuối cùng là chạy project với câu lệnh: pnpm dev

Đây là dạng hiển thị trên website của bạn, bạn hoàn toàn có thể chỉnh sửa lại dựa theo project của bạn. Cá nhân mình khuyên bạn nên tách riêng component ra để dễ dàng quản lý hơn nhé. Ví dụ như:

import { SignIn } from '@clerk/nextjs'

// ------------------------------------

export default function SignInPage() {
  return <SignIn />
}

5. Pricing

Đây là một yếu tố bạn nên cân nhắc xem qua, khi quyết định sử dụng Clerk vào dự án. Nhưng đối với dự án nhỏ cá nhân mình thấy free-tier mà Clerk mang lại đã quá tuyệt vời rồi.

5.1 Free (0 USD/tháng)

• 10.000 MAUs miễn phí:
  • Không tính phí cho những người dùng chỉ đăng ký mà không bao giờ quay lại.
  • Chỉ tính phí khi họ hoạt động trở lại sau 24+ giờ (nghĩa là trở thành "active user").
• Không cần thẻ tín dụng khi bắt đầu.
• Pre-built components:
  • Có sẵn các form đăng nhập, đăng ký, trang quản lý người dùng,…
• Custom domain: Bạn có thể dùng domain của riêng bạn thay vì domain mặc định của Clerk.

Siêu phù hợp nếu bạn mới bắt đầu và muốn thử nghiệm Clerk.

5.2 Pro (25 USD/tháng)

• 10.000 MAUs miễn phí, sau đó 0.02 USD/MAU vượt giới hạn.
• Remove Clerk branding: bạn có thể gỡ dòng "Secured by Clerk" khỏi form UI mặc định.
• Allowlist/Blocklist: custom danh sách email hoặc domain được phép hoặc chặn.
• Customizable session duration: Bạn có thể tuỳ chỉnh thời lượng session.

Thích hợp cho các dự án đang "scale up", cần gỡ branding.

Lưu ý: khi bạn chạy project ở môi trường dev, Clerk cho phép trải nghiệm đầy đủ mà không phát sinh chi phí. Đây cũng là cái mình khá là thích ở Clerk.

6. Kết luận

Nếu trước đây bạn phải mất nhiều thời gian tự xây dựng logic xác thực, thì Clerk chính là giải pháp "Authentication as a Service" đơn giản nhưng hiệu quả.

Như mình đã hướng dẫn bên trên, bạn có thể thấy rõ rằng chỉ cần vài bước cấu hình, bạn đã có một hệ thống đăng nhập, đăng ký, quản lý hồ sơ người dùng ổn định, kèm các tính năng bảo mật.

Hy vọng sau bài viết này, bạn đã hiểu rõ hơn về Clerk, các lợi ích mà Clerk mang lại cũng như cách thức tích hợp Clerk vào dự án NextJs. Clerk là một giải pháp bạn nên sử dụng và trải nghiệm.

Các bài viết liên quan:

• GSAP là gì? Hướng dẫn sử dụng GSAP trong dự án React
• Tìm hiểu Microfrontend: Hướng dẫn triển khai Microfrontend trong Next.js
• Yup là gì? Hướng dẫn Validation với Yup trong dự án React
• Hướng dẫn tích hợp Sentry vào ứng dụng React