Xác thực Next.js với NextAuth và Serverless Redis

Next.js là một trong những frontend framework phổ biến nhất với React là cốt lõi của nó. Nó có thể tạo HTML tĩnh hoặc hiển thị động trên máy khách và máy chủ. Điều này làm cho nó trở thành một công cụ linh hoạt cho các ứng dụng và trang web thuộc mọi loại. Và điều tốt nhất là, nó là mã nguồn mở và bạn có thể sử dụng miễn phí!

NextAuth là thư viện của bên thứ ba cho Next.js giúp bạn tích hợp các cơ sở dữ liệu và nhà cung cấp danh tính khác nhau. Bạn có thể tiết kiệm thời gian cho người dùng khi đăng ký và vẫn có tất cả thông tin tài khoản cần thiết của họ trong cơ sở dữ liệu bạn đã chọn. NextAuth hỗ trợ hơn 50 nhà cung cấp dịch vụ xác thực, bao gồm GitHub, Google, Facebook, Coinbase và nhiều nhà cung cấp khác.

Bộ điều hợp NextAuth Upstash Redis

Cho đến ngày nay, Upstash Redis là một trong những cơ sở dữ liệu được NextAuth hỗ trợ!

Bộ điều hợp NextAuth upstash-redis NextAuth adapter sử dụng máy khách Upstash HTTP, hoạt động trên nhiều dịch vụ lưu trữ. Bạn có thể sử dụng một cơ sở dữ liệu Redis cấp miễn phí cho nhiều ứng dụng hỗ trợ NextAuth có tiền tố.

Vì vậy, hãy đi sâu vào NextAuth với bộ điều hợp mới phát hành này.

Ví dụ NextAuth với Upstash Redis

Bạn nên cài đặt ít nhất phiên bản 16.13.2 của Node.js cho hướng dẫn này. Bạn cũng cần có tài khoản GitHub và Upstash.

Thiết lập ứng dụng

Bạn cần tạo một ứng dụng Next.js cơ bản; mẫu khởi động học là phù hợp với ví dụ này.

Bạn có thể sử dụng lệnh sau:

    $ npx create-next-app nextauth-upstash-redis \
    --use-npm \
    --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

Bạn sẽ sử dụng gói dotenv để thiết lập thông tin đăng nhập dễ dàng hơn một chút. Để tải dotenv, NextAuth, bộ điều hợp Redis và ứng dụng khách Upstash HTTP Redis, hãy sử dụng lệnh sau:

    $ npm i dotenv next-auth @upstash/redis @next-auth/upstash-redis-adapter

Tạo Điểm cuối API xác thực

Điểm cuối API cho NextAuth là một tệp JS đơn giản, hãy tạo nó tại pages/api/auth/[...nextauth].js với nội dung sau:

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
import { UpstashRedisAdapter } from "@next-auth/upstash-redis-adapter";
import { Redis } from "@upstash/redis";
import "dotenv/config";

export default NextAuth({
  adapter: UpstashRedisAdapter(
    new Redis({
      url: process.env.UPSTASH_REDIS_URL,
      token: process.env.UPSTASH_REDIS_TOKEN,
    })
  ),
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
});

UpstashRedisAdapter bao bọc upstashRedisClient, và bạn cung cấp cho nó thông tin đăng nhập Upstash từ các biến môi trường. Trong ví dụ này, chúng sẽ được tải qua gói dotenv từ một .env tệp trong thư mục gốc ứng dụng của chúng tôi. Tương tự đối với nhà cung cấp GitHub.

Thiết lập các biến môi trường

Để thiết lập các biến môi trường, bạn phải tạo một .env tệp với nội dung sau:

    UPSTASH_REDIS_URL=
    UPSTASH_REDIS_TOKEN=
    GITHUB_ID=
    GITHUB_SECRET=

Bạn nhận được thông tin đăng nhập Upstash từ bảng điều khiển Upstash. Đăng nhập vào bảng điều khiển, tạo cơ sở dữ liệu và nhấp vào nó trong phần tổng quan. Hình 1 cho thấy vị trí trong bảng điều khiển chứa thông tin đăng nhập bạn cần.

Bạn nhận được thông tin đăng nhập của nhà cung cấp GitHub khi đăng ký Ứng dụng OAuth mới cho tài khoản GitHub của mình. Hình 2 cho thấy mẫu đăng ký. Để chạy ví dụ trên máy cục bộ của bạn, bạn nên sử dụng https:// localhost:3000 làm URL.

Sau khi đăng ký ứng dụng của mình, bạn sẽ được cung cấp ID khách hàng và có thể tạo bí mật bằng cách nhấp vào nút "tạo bí mật khách hàng mới".

Sau khi thiết lập dịch vụ, bạn cũng muốn cung cấp cho các thành phần ứng dụng của mình bằng các lần tìm nạp NextAuth dữ liệu phiên.

Đối với điều này, hãy tạo một tệp mới tại pages/_app.js với nội dung sau:

import { SessionProvider } from "next-auth/react";

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

Mã này sẽ cung cấp cho tất cả các thành phần trong ứng dụng Next.js dữ liệu phiên để bạn có thể kiểm tra xem người dùng hiện tại đã đăng nhập hay chưa.

Để kiểm tra xem mọi thứ có hoạt động hay không, bạn cũng cần cập nhật trang chỉ mục tại page/index.js với mã này:

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

export default function Home() {
  const { data: session } = useSession();
  if (session) {
    const { email, image, name } = session.user;
    return (
      <>
        <img src={image} width="150" /> <br />
        Signed in as {name} ({email}) <br />
        <button onClick={signOut}>Sign out</button>
      </>
    );
  }
  return <button onClick={signIn}>Sign in</button>;
}

Nếu một phiên tồn tại, phiên đó sẽ hiển thị hình ảnh hồ sơ, tên và địa chỉ email của người dùng hiện tại. Nếu không, nó chỉ hiển thị nút đăng nhập sẽ tự động chuyển hướng người dùng đến trang đăng nhập.

Kiểm tra ứng dụng

Để kiểm tra toàn bộ thiết lập, bạn phải chạy lệnh sau:

$ npm run dev

Lệnh này sẽ khởi động một máy chủ HTTP ở cổng 3000 mà bạn phải mở trong trình duyệt. Nếu mọi thứ suôn sẻ, bạn sẽ thấy nút đăng nhập. Nhấp vào nút này và cho phép ứng dụng kết nối với tài khoản GitHub của bạn.

Nếu đăng ký thành công, bạn sẽ được chuyển hướng đến trang chỉ mục và xem thông tin tài khoản GitHub của mình.

Sử dụng Nhiều Ứng dụng với một Cơ sở dữ liệu Redis

Upstash cung cấp một cơ sở dữ liệu Redis miễn phí cho mọi tài khoản. Bạn có thể sử dụng cơ sở dữ liệu này cho nhiều ứng dụng bị ngắt kết nối, với tiền tố sẽ được thêm vào tất cả các khóa được ghi vào bộ nhớ.

Để thiết lập điều này, bạn phải thay đổi mã bên trong pages/api/auth/[...nextauth].js . Hàm nhà máy bộ điều hợp nhận đối số thứ hai bên cạnh ứng dụng khách Upstash Redis.

UpstashRedisAdapter(
  new Redis({
    url: process.env.UPSTASH_REDIS_URL,
    token: process.env.UPSTASH_REDIS_TOKEN,
  }),
  { baseKeyPrefix: "app-specific-prefix-1:" }
);

Bằng cách này, bạn có thể an toàn rằng người dùng của nhiều ứng dụng không xung đột trong cơ sở dữ liệu của bạn.

Kết luận

NextAuth là một thư viện tiện dụng để thiết lập xác thực cho các ứng dụng của bạn mà không gặp rắc rối. Sự dễ sử dụng tương tự là những gì bạn có thể mong đợi từ Upstash Redis, một dịch vụ lưu trữ cơ sở dữ liệu đơn giản của Redis. Với bộ điều hợp cơ sở dữ liệu NextAuth mới cho Upstash Redis, chúng sẽ tạo ra một sức mạnh tổng hợp mạnh mẽ cho phép bạn tung ra các ứng dụng mới ngay lập tức!

Upstash Redis là một cơ sở dữ liệu không có máy chủ; bạn chỉ trả tiền cho những gì bạn sử dụng, vì vậy bạn có thể thử nghiệm và lặp lại trên nhiều MVP mà không phải lo lắng về một hóa đơn khổng lồ cho một ứng dụng thậm chí không có người dùng.