รับรองความถูกต้องผู้ใช้อย่างปลอดภัยใน Next.js โดยใช้ Auth.js และ Upstash Redis

ตั้งค่าผู้ให้บริการการตรวจสอบสิทธิ์แบบกำหนดเองด้วย Auth.js

สร้างไฟล์ชื่อ 452 ใน 466 ไดเร็กทอรีด้วยรหัสต่อไปนี้:

// File: lib/providers.ts
 
import { nanoid } from 'nanoid'
import Credentials from 'next-auth/providers/credentials'
import { comparePassword, generateRandomString, hashPassword } from './credentials'
import redis from './redis'
import { UserType } from './types'
 
export default [
 Credentials({
 credentials: {
 email: {},
 password: {},
 },
 authorize: async (credentials, request) => {
 let type
 try {
 const tmp = new URL(request.url).searchParams.get('kind')
 if (tmp && typeof tmp === 'string') type = tmp
 } catch (e) {}
 if (!type || !credentials.email || typeof credentials.email !== 'string' || !credentials.password || typeof credentials.password !== 'string') return null
 const randomizedPassword = await generateRandomString(credentials.password)
 const userByEmail = await redis.get<string | null | undefined>(`user:email:${credentials.email}`)
 if (userByEmail) {
 if (type !== 'in') {
 console.log(`can not sign in in a non sign-in mode.`)
 throw new Error(`can not sign in in a non sign-in mode.`)
 }
 const user = await redis.get<UserType>(`user:${userByEmail}`)
 if (!user) {
 console.log(`Found the user by email from user:email:${userByEmail}, but the user object is missing at user:${userByEmail}`)
 return null
 }
 if (user.password) {
 const hashedPassword = await hashPassword(randomizedPassword)
 const isPasswordCorrect = await comparePassword(user.password, hashedPassword)
 if (isPasswordCorrect) {
 const { password, ...rest } = user
 return rest
 }
 throw new Error(`incorrect password for credentials.`)
 }
 throw new Error(`you are using some other authentication method already, but not credentials.`)
 } else {
 if (type !== 'up') {
 console.log(`can not sign up in a non sign-up mode.`)
 throw new Error(`can not sign up in a non sign-up mode.`)
 }
 const newUser = {
 name: null,
 image: null,
 emailVerified: null,
 email: credentials.email,
 password: randomizedPassword,
 }
 const tmp = nanoid()
 await redis.set(`user:email:${credentials.email}`, tmp)
 await redis.set(`user:${tmp}`, newUser)
 return newUser
 }
 },
 }),
]

ในโค้ดด้านบน อาร์เรย์ของผู้ให้บริการการตรวจสอบสิทธิ์แบบกำหนดเองตามข้อมูลประจำตัวจะถูกส่งออก ผู้ให้บริการข้อมูลรับรองจะจัดการทั้งตรรกะในการลงชื่อเข้าใช้และการลงทะเบียน โดยจะตรวจสอบว่ามีผู้ใช้อยู่ใน Redis หรือไม่ และตรวจสอบรหัสผ่านหรือสร้างผู้ใช้ใหม่ หากลงชื่อเข้าใช้ ระบบจะเปรียบเทียบรหัสผ่านที่ให้มา (แฮชโดยใช้สตริงสุ่ม) กับรหัสผ่านที่เก็บไว้ หากลงทะเบียน ระบบจะสร้างรายการผู้ใช้ใหม่ใน Upstash Redis รหัสใช้ Upstash Redis สำหรับการจัดเก็บข้อมูลผู้ใช้ และตรวจสอบให้แน่ใจว่ากระบวนการเสร็จสิ้นในโหมดลงชื่อสมัครใช้หรือลงชื่อเข้าใช้ตามพารามิเตอร์ประเภทใน URL

ตั้งค่าเส้นทาง API การตรวจสอบสิทธิ์ (สนับสนุนโดย Auth.js)

สร้างไฟล์ชื่อ 471 ใน 482 ไดเร็กทอรีด้วยรหัสต่อไปนี้:

// File: app/api/auth/[...nextauth]/route.ts
 
export const runtime = 'edge'
 
import { handlers } from '@/lib/auth'
 
export const { GET, POST } = handlers

ในโค้ดด้านบน ตัวจัดการปลายทางสองตัว 495 และ 507 ถูกส่งออกที่ได้รับการจัดการโดย 511 ฟังก์ชั่นส่งออกจาก 524 ไฟล์.

สร้างไฟล์ชื่อ 531 ใน 548 ไดเร็กทอรีด้วยรหัสต่อไปนี้:

// File: app/api/refresh/route.ts
 
export const runtime = 'edge'
 
export const dynamic = 'force-dynamic'
 
export const fetchCache = 'force-no-store'
 
import { auth } from '@/lib/auth'
import redis from '@/lib/redis'
import { UserType } from '@/lib/types'
import { encode } from '@auth/core/jwt'
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'
 
export async function GET(request: Request) {
 const useSecureCookie = request.url.startsWith('https:')
 const salt = useSecureCookie ? '__Secure-authjs.session-token' : 'authjs.session-token'
 if (!process.env.AUTH_SECRET) return new NextResponse(null, { status: 500 })
 const [session, cookieStore] = await Promise.all([auth(), cookies()])
 if (!session?.user?.email) return new NextResponse(null, { status: 400 })
 const userByEmail = await redis.get(`user:email:${session.user.email}`)
 const userData = await redis.get<UserType>(`user:${userByEmail}`)
 if (!userData?.email) cookieStore.set(salt, toString(), { secure: useSecureCookie, path: '/', httpOnly: true, sameSite: 'lax', maxAge: 0 })
 else {
 const { image, password, ...rest } = userData
 const saltVal = await encode({ salt, secret: process.env.AUTH_SECRET, token: { ...rest, picture: image } })
 cookieStore.set(salt, saltVal, { secure: useSecureCookie, path: '/', httpOnly: true, sameSite: 'lax' })
 }
 return new NextResponse()
}

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

สร้างไฟล์ชื่อ 554 ใน 568 ไดเร็กทอรีด้วยรหัสต่อไปนี้:

// File: app/api/user/route.ts
 
export const runtime = 'edge'
 
export const dynamic = 'force-dynamic'
 
export const fetchCache = 'force-no-store'
 
import { auth } from '@/lib/auth'
import redis from '@/lib/redis'
import { UserType } from '@/lib/types'
import { NextResponse } from 'next/server'
 
export async function POST(request: Request) {
 try {
 const session = await auth()
 if (!session?.user?.email) return new NextResponse(null, { status: 400 })
 const body = await request.json()
 const userByEmail = await redis.get(`user:email:${session.user.email}`)
 const userData = await redis.get<UserType>(`user:${userByEmail}`)
 if (!userData) return new NextResponse(null, { status: 404 })
 if (body.name) userData.name = body.name
 if (body.image) userData.image = body.image
 await redis.set(`user:${userByEmail}`, userData)
 return new NextResponse()
 } catch (e: any) {
 const message = e.message || e.toString()
 console.log(message)
 return new NextResponse(message, { status: 500 })
 }
}

ในโค้ดด้านบน มีการสร้างเส้นทาง API ที่เข้ากันได้กับ Edge สำหรับการอัปเดตข้อมูลผู้ใช้ โดยจะตรวจสอบสิทธิ์ผู้ใช้ ดึงข้อมูลจาก Redis โดยใช้อีเมล และอัปเดตข้อมูล (เช่น ชื่อหรือรูปภาพ) ตามเนื้อหาคำขอ หากไม่พบผู้ใช้หรือมีข้อผิดพลาดเกิดขึ้น รหัสสถานะและการตอบกลับที่เหมาะสมจะถูกส่งกลับ

ตั้งค่ามิดเดิลแวร์ Next.js ด้วย Auth.js

สร้างไฟล์ชื่อ 578 ในไดเร็กทอรีรากของโปรเจ็กต์ของคุณด้วยโค้ดต่อไปนี้:

// File: middleware.ts
 
export { auth as middleware } from '@/lib/auth'
 
export const config = {
 matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
}

ในโค้ดด้านบน มิดเดิลแวร์จะถูกสร้างขึ้นโดยการส่งออก 583 อีกครั้ง ฟังก์ชั่นจาก 590 โมดูล มิดเดิลแวร์ใช้การรับรองความถูกต้องกับทุกเส้นทาง ยกเว้นเส้นทาง API, ไฟล์คงที่, เนื้อหารูปภาพ และไอคอน Fav ตามที่ระบุโดย 603 การกำหนดค่า เพื่อให้แน่ใจว่าเส้นทางที่ไม่ถูกแยกได้รับการปกป้องโดยตรรกะการตรวจสอบสิทธิ์ที่ตั้งค่าด้วย Auth.js

ใช้ Auth.js ในส่วนประกอบเราเตอร์ของแอป Next.js

สร้างไฟล์ชื่อ 610 ใน 621 ไดเร็กทอรีด้วยรหัสต่อไปนี้:

// File: app/NextAuthProvider.tsx
 
'use client'
 
import { SessionProvider } from 'next-auth/react'
 
type Props = {
 children?: React.ReactNode
}
 
export default function ({ children }: Props) {
 return <SessionProvider>{children}</SessionProvider>
}

ในโค้ดด้านบน ส่วนประกอบ React ฝั่งไคลเอ็นต์จะถูกสร้างขึ้นเพื่อล้อมแอปพลิเคชันด้วย 636 ของ NextAuth . ส่วนประกอบยอมรับ 641 เป็นอุปกรณ์ประกอบฉากและตรวจสอบให้แน่ใจว่าส่วนประกอบที่ห่อไว้นั้นสามารถเข้าถึงบริบทเซสชันผู้ใช้ที่ NextAuth มอบให้ การตั้งค่านี้จำเป็นสำหรับการจัดการสถานะการตรวจสอบสิทธิ์ทั่วทั้งแอปพลิเคชันใน Next.js

สร้างไฟล์ชื่อ 653 ใน 662 ไดเร็กทอรีด้วยรหัสต่อไปนี้:

// File: app/csrf.tsx
 
'use client'
 
import { getCsrfToken } from 'next-auth/react'
import { useEffect, useState } from 'react'
 
export function CSRFInput() {
 const [csrfToken, setCsrfToken] = useState<string>()
 useEffect(() => {
 getCsrfToken().then((res) => setCsrfToken(res))
 }, [])
 return <input type="hidden" name="csrfToken" defaultValue={csrfToken} />
}

ในโค้ดด้านบน ส่วนประกอบ React ฝั่งไคลเอ็นต์จะถูกส่งออกซึ่งดึงโทเค็น CSRF โดยใช้ 676 ของ NextAuth ฟังก์ชั่นและเก็บไว้ในตัวแปรสถานะ ส่วนประกอบจะแสดงฟิลด์อินพุตที่ซ่อนอยู่ซึ่งมีโทเค็น CSRF ช่วยให้ส่งแบบฟอร์มได้อย่างปลอดภัยโดยรวมโทเค็นเป็นค่าที่ซ่อนอยู่ สิ่งนี้มีประโยชน์ในการป้องกันการโจมตีการปลอมแปลงคำขอข้ามไซต์

สร้างไฟล์ชื่อ 685 ใน 699 ไดเร็กทอรีด้วยรหัสต่อไปนี้:

// File: app/provider.tsx
 
'use client'
 
import { Button } from '@/components/ui/button'
import { Icon } from '@iconify/react'
import { signIn } from 'next-auth/react'
 
export default function ({ provider, prefix }: { prefix: string; provider: { name: string; id: string } }) {
 return (
 <Button onClick={() => signIn(provider.id)} key={provider.name} variant="outline" className="flex w-full gap-x-3">
 {provider.id === 'google' && <Icon fontSize={18} icon="flat-color-icons:google" />}
 <span className="text-black">
 {prefix} with {provider.name}
 </span>
 </Button>
 )
}

ในโค้ดด้านบน องค์ประกอบ React สำหรับการแสดงผลปุ่มลงชื่อเข้าใช้ที่ปรับแต่งได้สำหรับผู้ให้บริการการตรวจสอบสิทธิ์ต่างๆ จะถูกส่งออก ยอมรับ 704 (ประกอบด้วย 718 และ 727 ) และ 736 เป็นอุปกรณ์ประกอบฉาก ปุ่มนี้จะทริกเกอร์ 748 ฟังก์ชั่นสำหรับผู้ให้บริการที่ระบุและแสดงไอคอนและป้ายกำกับแบบไดนามิกตาม 752 ของผู้ให้บริการ .

อัปเดตไฟล์ชื่อ 764 ใน 779 ไดเร็กทอรีด้วยรหัสต่อไปนี้:

// File: app/layout.tsx
 
import './globals.css'
import NextAuthProvider from './NextAuthProvider'
 
export default function ({
 children,
}: Readonly<{
 children: React.ReactNode
}>) {
 return (
 <html lang="en">
 <body className="bg-white text-black antialiased">
 <NextAuthProvider>
 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col">{children}</div>
 </NextAuthProvider>
 </body>
 </html>
 )
}

ในโค้ดด้านบน เค้าโครง Next.js กำลังล้อมทั้งหน้าในรูปแบบสากลและบริบทการตรวจสอบสิทธิ์ มันนำเข้า 786 สำหรับสไตล์สากลและ 798 เพื่อจัดการสถานะการรับรองความถูกต้อง 803 prop แสดงถึงเนื้อหาของหน้าที่ซ้อนกัน ซึ่งถูกห่อไว้ในคอนเทนเนอร์ที่มีสไตล์พร้อมช่องว่างภายในแบบตอบสนองและความกว้างสูงสุด ทำให้มีเค้าโครงที่สอดคล้องกันสำหรับทุกหน้า

// File: app/page.tsx
 
'use client'
 
import { signOut, useSession } from 'next-auth/react'
 
export default function () {
 const { data, status } = useSession()
 return (
 <>
 {JSON.stringify({ data, status })}
 <button onClick={() => signOut()}>Sign Out</button>
 </>
 )
}

// File: app/signin/page.tsx
 
export const runtime = 'edge'
 
import { CSRFInput } from '@/app/csrf'
import Provider from '@/app/provider'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { auth } from '@/lib/auth'
import providers from '@/lib/providers'
import { unstable_noStore } from 'next/cache'
import Link from 'next/link'
import { redirect } from 'next/navigation'
 
export default async function () {
 unstable_noStore()
 const session = await auth()
 if (session) redirect('/')
 return (
 <div className="border md:border-white/10 flex items-center justify-center py-12">
 <div className="mx-auto grid w-[350px] gap-6">
 <div className="grid gap-2 text-center">
 <h1 className="text-3xl font-bold">Sign In</h1>
 <p className="text-balance text-muted-foreground">Enter your email below to sign in to your account</p>
 </div>
 {providers
 .filter((provider) => (typeof provider === 'function' ? provider({}).id : provider.id) !== 'credentials')
 .map((provider) => (
 <Provider
 prefix="Sign in"
 key={typeof provider === 'function' ? provider({}).name : provider.name}
 provider={typeof provider === 'function' ? provider({}) : provider}
 />
 ))}
 <p className="text-gray-300 text-xs text-center">OR</p>
 <form method="POST" className="grid gap-4" action="/api/auth/callback/credentials?kind=in">
 <div className="grid gap-2">
 <Label htmlFor="email">Email</Label>
 <Input name="email" id="email" type="email" placeholder="m@example.com" required />
 </div>
 <div className="grid gap-2">
 <Label htmlFor="password">Password</Label>
 <Input name="password" id="password" type="password" required />
 <CSRFInput />
 </div>
 <Button type="submit" className="w-full">
 Sign In
 </Button>
 </form>
 <div className="mt-4 text-center text-sm">
 Don&apos;t have an account?{' '}
 <Link href="/signup" className="underline">
 Sign up
 </Link>
 </div>
 </div>
 </div>
 )
}

// File: app/signup/page.tsx
 
export const runtime = 'edge'
 
import { CSRFInput } from '@/app/csrf'
import Provider from '@/app/provider'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { auth } from '@/lib/auth'
import providers from '@/lib/providers'
import { unstable_noStore } from 'next/cache'
import Link from 'next/link'
import { redirect } from 'next/navigation'
 
export default async function () {
 unstable_noStore()
 const session = await auth()
 if (session) redirect('/')
 return (
 <div className="border md:border-white/10 flex items-center justify-center py-12">
 <div className="mx-auto grid w-[350px] gap-6">
 <div className="grid gap-2 text-center">
 <h1 className="text-3xl font-bold">Sign Up</h1>
 <p className="text-balance text-muted-foreground">Enter your email below to sign up with an account</p>
 </div>
 {providers
 .filter((provider) => (typeof provider === 'function' ? provider({}).id : provider.id) !== 'credentials')
 .map((provider) => (
 <Provider
 prefix="Sign up"
 key={typeof provider === 'function' ? provider({}).name : provider.name}
 provider={typeof provider === 'function' ? provider({}) : provider}
 />
 ))}
 <p className="text-gray-300 text-xs text-center">OR</p>
 <form method="POST" className="grid gap-4" action="/api/auth/callback/credentials?kind=up">
 <div className="grid gap-2">
 <Label htmlFor="email">Email</Label>
 <Input name="email" id="email" type="email" placeholder="m@example.com" required />
 </div>
 <div className="grid gap-2">
 <div className="flex items-center">
 <Label htmlFor="password">Password</Label>
 </div>
 <Input name="password" id="password" type="password" required />
 <CSRFInput />
 </div>
 <Button type="submit" className="w-full">
 Sign Up
 </Button>
 </form>
 <div className="mt-4 text-center text-sm">
 Don&apos;t have an account?{' '}
 <Link href="/signin" className="underline">
 Sign In
 </Link>
 </div>
 </div>
 </div>
 )
}