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

Trong lĩnh vực phát triển phần mềm, authentication (xác thực) là một khía cạnh quan trọng mà nhiều nhà phát triển phải đối mặt. Trước đây, quá trình xây dựng hệ thống xác thực từ đầu thường tiêu tốn thời gian và yêu cầu nhiều kiến thức bảo mật chuyên sâu. Tuy nhiên, với sự ra đời của các dịch vụ cung cấp giải pháp “Authentication as a Service” như Clerk, việc này đã trở nên dễ dàng hơn bao giờ hết. Bài viết này sẽ cung cấp cho bạn những kiến thức và hướng dẫn chi tiết để tích hợp Clerk vào dự án Next.js của bạn.

1. Clerk là gì?

Table of Contents

Clerk là một dịch vụ cung cấp giải pháp xác thực và quản lý người dùng, được thiết kế dành riêng cho các ứng dụng React và Next.js. Với Clerk, các bạn có thể triển khai nhanh chóng các luồng đăng nhập, đăng ký, quản lý bảo mật như gửi mã OTP, và liên kết tài khoản mạng xã hội một cách thuận tiện.

Clerk là gì?

Với việc tích hợp đơn giản, bạn có thể sử dụng các component như <SignIn />, <SignUp />, <UserProfile />,… mà không cần phải xây dựng từ đầu. Clerk cung cấp cho bạn những công cụ cần thiết để quản lý và bảo mật thông tin người dùng mà không cần phải lo lắng về việc xây dựng hệ thống phức tạp.

2. Lợi ích của việc sử dụng Clerk

2.1 Tích hợp dễ dàng

Clerk được thiết kế để hoạt động mượt mà với Next.js, cho phép bạn nhanh chóng cài đặt authentication chỉ với một vài bước cấu hình.

2.2 Giao diện người dùng hấp dẫn

Clerk cung cấp các thành phần giao diện sẵn cho bạn, với thiết kế đẹp mắt và dễ sử dụng. Điều này giúp bạn tiết kiệm thời gian và nỗ lực trong việc xây dựng một giao diện đẹp cho hệ thống xác thực của mình.

2.3 Hỗ trợ nhiều phương thức đăng nhập

Clerk hỗ trợ nhiều phương thức đăng nhập khác nhau, từ email-password đến đăng nhập qua các mạng xã hội như Google, Facebook, GitHub và thậm chí là đăng nhập không cần mật khẩu thông qua magic link. Điều này cung cấp cho người dùng nhiều sự lựa chọn, giúp họ cảm thấy thoải mái hơn trong việc sử dụng ứng dụng.

2.4 Quản lý Bảo mật

Vấn đề bảo mật luôn được đặt lên hàng đầu, và Clerk giúp bạn thực hiện điều này một cách an toàn. Với những công nghệ bảo mật hiện đại, Clerk đảm bảo rằng thông tin người dùng sẽ được bảo mật tuyệt đối.

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

Khi tạo tài khoản Clerk, bạn sẽ được cung cấp một Project representative cho ứng dụng Next.js của bạn. Bạn sẽ sử dụng các API Keys và Publishable Keys để thực hiện các thao tác như đăng nhập, xác thực email, và nhiều chức năng khác.

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

Mọi thao tác như gửi OTP hay lưu trữ session đều được thực hiện qua hệ thống API của Clerk, cho phép bạn tập trung vào việc phát triển tính năng cho ứng dụng của mình thay vì mất thời gian cho việc xây dựng hệ thống xác thực từ đầu.

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

4.1 Đăng ký tài khoản Clerk

Bước 1: Truy cập trang chủ của Clerk.
Bước 2: Đăng ký tài khoản mới hoặc đăng nhập nếu bạn đã có tài khoản.

Giao diện đăng nhập Clerk

4.2 Tạo Project mới

Bước 1: Đặt tên cho project của bạn (ví dụ: “Nextjs-Clerk App”).
Bước 2: Lựa chọn các phương thức đăng nhập mà bạn muốn hỗ trợ.
Bước 3: Khi hoàn tất, nhấn “Create application” để tạo Project và nhận các keys quan trọng.

Clerk dashboard

4.3 Cài đặt Clerk vào dự án Next.js

Bước 1: Tạo dự án Next.js bằng lệnh pnpx create-next-app@14.
Bước 2: Cài đặt Clerk bằng câu lệnh pnpm add @clerk/nextjs.

4.4 Cấu hình môi trường

Tạo file .env.local trong thư mục root của dự án và thêm các keys như sau:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISH_KEY
CLERK_SECRET_KEY=YOUR_SECRET_KEY

4.5 Cấu hình middleware

Tạo file middleware.ts trong thư mục gốc của dự án và thêm mã sau:

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

export default clerkMiddleware();

export const config = {
  matcher: [
    '/((?!_next|[^?]*\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
};

4.6 Cập nhật Layout

Cập nhật file /src/app/layout.tsx hoặc /src/pages/_app.tsx để sử dụng ClerkProvider:

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

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

5. Bảng giá

Clerk cung cấp nhiều gói dịch vụ, bao gồm cả một gói miễn phí và một gói Pro. Gói miễn phí cho phép bạn sử dụng đến 10.000 MAUs mà không mất phí.

5.1 Gói miễn phí (0 USD/tháng)

10.000 MAUs miễn phí.
Không cần thẻ tín dụng khi bắt đầu.
Các component đã được xây dựng sẵn.

Bảng giá Clerk

5.2 Gói Pro (25 USD/tháng)

Nhiều tính năng bổ sung và gỡ bỏ branding.

6. Kết luận

Clerk là một giải pháp “Authentication as a Service” dễ dàng mà bạn nên thử nghiệm cho dự án Next.js của mình. Với sự tiện lợi, tính năng bảo mật vượt trội và nhiều phương thức đăng nhập, Clerk giúp bạn tiết kiệm thời gian cũng như tăng cường trải nghiệm người dùng. Hy vọng rằng thông qua bài viết này, bạn đã có cái nhìn tổng quan hơn về Clerk và những lợi ích mà dịch vụ này mang lại.

Để tìm hiểu thêm về marketing và các công nghệ khác, hãy truy cập comdy.vn để nhận được nhiều thông tin hữu ích!

blog