การตั้งค่า Auth.js ใน Next.js App Router

Auth.js คืออะไร

การติดตั้ง

npm install next-auth@beta

# Create auth.ts at project root
touch auth.ts

สร้างการตั้งค่า Auth

import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [GitHub],
  callbacks: {
    session({ session, token }) {
      session.user.id = token.sub!;
      return session;
    },
  },
});

ตั้งค่าตัวจัดการเส้นทาง

// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';

export const { GET, POST } = handlers;

ตัวแปรสภาพแวดล้อม

# .env.local
AUTH_SECRET=your-random-secret-here

# GitHub OAuth
AUTH_GITHUB_ID=your-github-client-id
AUTH_GITHUB_SECRET=your-github-client-secret

# Generate AUTH_SECRET:
# npx auth secret

เพิ่มปุ่มเข้าสู่ระบบและออกจากระบบ

import { signIn, signOut } from '@/auth';

export function SignInButton() {
  return (
    <form action={async () => { 'use server'; await signIn('github'); }}>
      <button type="submit">Sign in with GitHub</button>
    </form>
  );
}

export function SignOutButton() {
  return (
    <form action={async () => { 'use server'; await signOut(); }}>
      <button type="submit">Sign out</button>
    </form>
  );
}

อ่านเซสชันในคอมโพเนนต์ฝั่งเซิร์ฟเวอร์

import { auth } from '@/auth';

export default async function ProfilePage() {
  const session = await auth();
  if (!session) redirect('/login');
  return <h1>Welcome, {session.user?.name}</h1>;
}

ป้องกันหน้าด้วยมิดเดิลแวร์

// middleware.ts
export { auth as middleware } from '@/auth';

export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*'],
};

เซสชันในฐานข้อมูล

import { PrismaAdapter } from '@auth/prisma-adapter';
import { prisma } from '@/lib/prisma';

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [GitHub],
  session: { strategy: 'database' },
});

ปรับแต่งชนิดของเซสชัน

// types/next-auth.d.ts
import { DefaultSession } from 'next-auth';

declare module 'next-auth' {
  interface Session {
    user: { id: string; role: string } & DefaultSession['user'];
  }
}

การจัดการข้อผิดพลาด

ตรวจสอบความเข้าใจ

สรุป