home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Redis

Authentication ปลอดภัยสำหรับ Next.js ด้วย NextAuth + Upstash Redis

Next.js เป็นเฟรมเวิร์ก Frontend ยอดนิยมที่รองรับ SSG, SSR, ISR และ NextAuth.js เป็นไลบรารี Authentication ที่รองรับ 50+ Providers (GitHub, Google, Facebook, Coinbase, ฯลฯ) ตอนนี้ Upstash Redis Adapter พร้อมใช้งานแล้ว!

NextAuth Upstash Redis Adapter

Adapter นี้ใช้ Upstash HTTP Client ทำงานได้กับ Hosting ทุกตัว รองรับ Free Tier Redis Database เดียวสำหรับหลาย App (ด้วย Prefix)

ตัวอย่างเต็มรูปแบบ

1. Setup โปรเจกต์

# สร้าง Next.js App (ใช้ learn-starter template)
npx create-next-app nextauth-upstash-redis --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

# ติดตั้ง Dependencies
npm i dotenv next-auth @upstash/redis @next-auth/upstash-redis-adapter

2. สร้าง Auth API Endpoint

ไฟล์ 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,
    }),
  ],
});

3. Environment Variables (.env)

UPSTASH_REDIS_URL=https://your-db.upstash.io
UPSTASH_REDIS_TOKEN=your-token
GITHUB_ID=your-github-client-id
GITHUB_SECRET=your-github-client-secret

สร้าง GitHub OAuth App ที่ GitHub Developer Settings Callback URL: https://localhost:3000/api/auth/callback/github

4. Session Provider (pages/_app.js)

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

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

5. ใช้งานในหน้าแรก (pages/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>;
}

6. รันและทดสอบ

npm run dev

เปิด https://localhost:3000 → กด Sign in → Authorize GitHub → กลับมาจะเห็น Profile

ใช้ Database เดียวกับหลาย App (Prefix)

Upstash Free Tier ให้ 1 Database/Account ใช้ร่วมได้หลาย App โดยตั้ง Prefix:

adapter: UpstashRedisAdapter(
  new Redis({
    url: process.env.UPSTASH_REDIS_URL,
    token: process.env.UPSTASH_REDIS_TOKEN,
  }),
  { baseKeyPrefix: "my-app-1:" }  // Prefix สำหรับ App นี้
);

สรุป

  • NextAuth ทำ Auth ง่าย รองรับ Providers มากมาย
  • Upstash Redis Serverless Database จ่ายตามใช้ ไม่กังวลค่าใช้จ่าย MVP
  • Adapter ใหม่ รวมทั้งสองอย่างได้อย่างราบรื่น
  • เหมาะสำหรับ Rapid Prototyping และ Production จริง

Docs: NextAuth Upstash Redis Adapter
Upstash: upstash.com