การตรวจสอบสิทธิ์ Next.js ด้วย NextAuth และ Serverless Redis

Next.js เป็นหนึ่งในเฟรมเวิร์กฟรอนต์เอนด์ที่ได้รับความนิยมมากที่สุดโดยมี React เป็นแกนหลัก สามารถสร้าง HTML แบบคงที่หรือแสดงผลแบบไดนามิกบนไคลเอนต์และเซิร์ฟเวอร์ ทำให้เป็นเครื่องมืออเนกประสงค์สำหรับแอปพลิเคชันและเว็บไซต์ทุกประเภท และที่ดีที่สุดคือ เป็นโอเพ่นซอร์ส และคุณใช้งานได้ฟรี!

NextAuth เป็นไลบรารีของบุคคลที่สามสำหรับ Next.js ที่ช่วยให้คุณผสานรวมผู้ให้บริการข้อมูลประจำตัวและฐานข้อมูลต่างๆ คุณสามารถประหยัดเวลาให้ผู้ใช้ของคุณเมื่อลงชื่อสมัครใช้ และยังคงมีข้อมูลบัญชีที่จำเป็นทั้งหมดของพวกเขาในฐานข้อมูลที่คุณเลือก NextAuth มาพร้อมกับการรองรับผู้ให้บริการตรวจสอบสิทธิ์มากกว่า 50 ราย รวมถึง GitHub, Google, Facebook, Coinbase และอีกมากมาย

อะแดปเตอร์ NextAuth Upstash Redis

ณ วันนี้ Upstash Redis เป็นหนึ่งในฐานข้อมูลที่ NextAuth รองรับ!

upstash-redis NextAuth adapter ใช้ไคลเอ็นต์ Upstash HTTP ซึ่งทำงานบนบริการโฮสติ้งจำนวนมาก คุณสามารถใช้ฐานข้อมูล Redis หนึ่งชั้นฟรีสำหรับแอปพลิเคชันที่เปิดใช้งาน NextAuth หลายตัวพร้อมคำนำหน้า

มาดำดิ่งสู่ NextAuth ด้วยอะแดปเตอร์ที่เพิ่งเปิดตัว

ตัวอย่าง NextAuth พร้อม Upstash Redis

คุณควรติดตั้ง Node.js เวอร์ชัน 16.13.2 เป็นอย่างน้อยสำหรับบทช่วยสอนนี้ คุณต้องมีบัญชี GitHub และ Upstash ด้วย

การตั้งค่าแอปพลิเคชัน

คุณต้องสร้างแอป Next.js พื้นฐาน เทมเพลตสำหรับผู้เริ่มต้นเรียนรู้นั้นใช้ได้สำหรับตัวอย่างนี้

คุณสามารถใช้คำสั่งต่อไปนี้:

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

คุณจะใช้แพ็คเกจ dotenv เพื่อทำให้การตั้งค่าข้อมูลประจำตัวง่ายขึ้นเล็กน้อย ในการรับ dotenv, NextAuth, อแด็ปเตอร์ Redis และไคลเอ็นต์ Upstash HTTP Redis ให้ใช้คำสั่งนี้:

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

การสร้างปลายทาง Auth API

ตำแหน่งข้อมูล API สำหรับ NextAuth เป็นไฟล์ JS แบบง่าย สร้างได้ที่ pages/api/auth/[...nextauth].js โดยมีเนื้อหาดังต่อไปนี้:

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 ล้อม upstashRedisClient, และคุณจัดหาข้อมูลประจำตัว Upstash จากตัวแปรสภาพแวดล้อม ในตัวอย่างนี้ จะโหลดผ่านแพ็คเกจ dotenv จาก .env ไฟล์ในไดเร็กทอรีรูทของแอปพลิเคชันของเรา เช่นเดียวกับผู้ให้บริการ GitHub

การตั้งค่าตัวแปรสภาพแวดล้อม

ในการตั้งค่าตัวแปรสภาพแวดล้อม คุณต้องสร้าง .env ไฟล์ที่มีเนื้อหาดังต่อไปนี้:

    UPSTASH_REDIS_URL=
    UPSTASH_REDIS_TOKEN=
    GITHUB_ID=
    GITHUB_SECRET=

คุณได้รับข้อมูลประจำตัว Upstash จากคอนโซล Upstash ล็อกอินเข้าสู่คอนโซล สร้างฐานข้อมูล และคลิกที่มันในภาพรวม รูปที่ 1 แสดงตำแหน่งในคอนโซลที่มีข้อมูลรับรองที่คุณต้องการ

คุณจะได้รับข้อมูลประจำตัวของผู้ให้บริการ GitHub เมื่อลงทะเบียนแอปพลิเคชัน OAuth ใหม่สำหรับบัญชี GitHub ของคุณ รูปที่ 2 แสดงแบบฟอร์มลงทะเบียน หากต้องการเรียกใช้ตัวอย่างบนเครื่องของคุณ คุณควรใช้ https://localhost:3000 เป็น URL

หลังจากลงทะเบียนแอปของคุณแล้ว คุณจะเห็นรหัสลูกค้าและสามารถสร้างข้อมูลลับได้โดยคลิกที่ปุ่ม “สร้างรหัสลับไคลเอนต์ใหม่”

หลังจากที่คุณตั้งค่าบริการแล้ว คุณยังต้องการจัดหาคอมโพเนนต์ของแอปด้วยการดึงข้อมูลเซสชัน NextAuth

สำหรับสิ่งนี้ ให้สร้างไฟล์ใหม่ที่ pages/_app.js โดยมีเนื้อหาดังต่อไปนี้:

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

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

รหัสนี้จะให้ข้อมูลเซสชันแก่ส่วนประกอบทั้งหมดในแอป Next.js ของคุณ คุณจึงสามารถตรวจสอบได้ว่าผู้ใช้ปัจจุบันเข้าสู่ระบบอยู่หรือไม่

หากต้องการตรวจสอบว่าทุกอย่างใช้งานได้หรือไม่ คุณต้องอัปเดตหน้าดัชนีที่ page/index.js ด้วยรหัสนี้:

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>;
}

หากมีเซสชันอยู่ ระบบจะแสดงรูปโปรไฟล์ ชื่อ และที่อยู่อีเมลของผู้ใช้ปัจจุบัน หากไม่เป็นเช่นนั้น ระบบจะแสดงเฉพาะปุ่มลงชื่อเข้าใช้ที่จะเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าเข้าสู่ระบบโดยอัตโนมัติ

การทดสอบแอปพลิเคชัน

ในการทดสอบการตั้งค่าทั้งหมด คุณต้องเรียกใช้คำสั่งต่อไปนี้:

$ npm run dev

คำสั่งนี้จะเริ่มต้นเซิร์ฟเวอร์ HTTP ที่พอร์ต 3000 ซึ่งคุณต้องเปิดในเบราว์เซอร์ หากทุกอย่างเป็นไปด้วยดี คุณจะเห็นปุ่มลงชื่อเข้าใช้ คลิกปุ่มนี้และอนุญาตให้แอปเชื่อมต่อกับบัญชี GitHub ของคุณ

หากการสมัครสำเร็จ ระบบจะเปลี่ยนเส้นทางคุณไปยังหน้าดัชนีและดูข้อมูลบัญชี GitHub ของคุณ

การใช้หลายแอปพลิเคชันกับฐานข้อมูล Redis เดียว

Upstash เสนอฐานข้อมูล Redis ฟรีหนึ่งฐานข้อมูลสำหรับทุกบัญชี คุณสามารถใช้ฐานข้อมูลนี้สำหรับแอปพลิเคชันที่ไม่ได้เชื่อมต่อหลายรายการ โดยมีคำนำหน้าที่จะเพิ่มลงในคีย์ทั้งหมดที่เขียนลงในที่จัดเก็บข้อมูล

ในการตั้งค่านี้ คุณต้องเปลี่ยนรหัสภายใน pages/api/auth/[...nextauth].js . ฟังก์ชันโรงงานของอะแดปเตอร์รับอาร์กิวเมนต์ที่สองนอกเหนือจากไคลเอ็นต์ Upstash Redis

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

ด้วยวิธีนี้ คุณจะปลอดภัยที่ผู้ใช้หลายแอปจะไม่ชนกันในฐานข้อมูลของคุณ

บทสรุป

NextAuth เป็นห้องสมุดที่มีประโยชน์ในการตั้งค่าการตรวจสอบสิทธิ์สำหรับแอปพลิเคชันของคุณโดยไม่ยุ่งยาก การใช้งานที่ง่ายเหมือนกันคือสิ่งที่คุณคาดหวังได้จาก Upstash Redis ซึ่งเป็นบริการโฮสต์ฐานข้อมูล Redis อย่างง่าย ด้วยอะแดปเตอร์ฐานข้อมูล NextAuth ใหม่สำหรับ Upstash Redis สิ่งเหล่านี้จะสร้างการทำงานร่วมกันอันทรงพลังที่ช่วยให้คุณสร้างแอปพลิเคชันใหม่ได้ในเวลาไม่นาน!

Upstash Redis เป็นฐานข้อมูลแบบไร้เซิร์ฟเวอร์ คุณจ่ายเฉพาะสิ่งที่คุณใช้เท่านั้น ดังนั้นคุณจึงสามารถทดสอบและทำซ้ำกับ MVP หลายตัวได้โดยไม่ต้องกังวลกับค่าใช้จ่ายมหาศาลสำหรับแอปที่ไม่มีผู้ใช้ด้วยซ้ำ