• js
  • next
  • next-auth
  • auth.js

การย้ายจาก NextAuth.js v4 ไปยัง Auth.js v5

คู่มือการย้ายการเชื่อมต่อ Logto จาก NextAuth.js v4 ไปยัง v5

Sijie
Sijie
Developer

NextAuth.js เวอร์ชัน 5 เป็นการเขียนใหม่ครั้งใหญ่ของแพ็กเกจ next-auth ซึ่งมีการอัปเดตที่ทำให้เกิดการเปลี่ยนแปลงที่ส่งผลต่อการเชื่อมต่อหลาย ๆ อย่าง รวมถึง Logto คู่มือนี้จะแนะนำคุณในกระบวนการย้ายการเชื่อมต่อ Logto ของคุณจาก NextAuth.js v4 ไปยัง Auth.js v5

เราเพิ่งอัปเดต คู่มือเริ่มต้นอย่างรวดเร็วของ NextAuth ลองดูเลย!

การทำความเข้าใจกับการเปลี่ยนแปลง

Auth.js v5

NextAuth.js v5 นำการเปลี่ยนแปลงที่ส่งผลกระทบมากมาย โดยการเปลี่ยนแปลงหลักที่ส่งผลต่อวิธีการที่คุณเชื่อมต่อ Logto กับแอปพลิเคชันของคุณคือการเปลี่ยนแปลงใน "OIDC/OAuth Providers" ในเอกสารอย่างเป็นทางการกล่าวว่า "Auth.js ตอนนี้สร้างขึ้นบน @auth/core ที่มีการปฏิบัติตามข้อกำหนดของ OAuth/OIDC ที่เข้มงวดกว่าเดิม ซึ่งอาจทำให้ OAuth providers บางรายใช้งานไม่ได้อีกต่อไป" สำหรับผู้ใช้ Logto หมายความว่าคุณต้องอัปเดตการกำหนดค่าของ provider

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนแปลง คุณสามารถดูได้ที่ คู่มือการย้ายอย่างเป็นทางการ

การกำหนดค่าของ Logto provider

การกำหนดค่าสำหรับ Logto provider ได้รับการอัปเดต:

  • ประเภทถูกเปลี่ยนจาก oauth เป็น oidc
  • จุดสิ้นสุด wellKnown ถูกลบออกและคุณต้องระบุฟิลด์ issuer แทน
  • ไม่จำเป็นต้องระบุอัลกอริธึมการลงนาม id_token แล้ว ตอนนี้สนับสนุน ES384 และจะถูกตรวจจับโดยอัตโนมัติ

คู่มือการย้ายแบบทีละขั้นตอน

อัปเดตการกำหนดค่า provider ในไฟล์ pages/api/auth/[...nextauth].js ของคุณโดยใช้แม่แบบการกำหนดค่าใหม่:

ขั้นตอนที่ 1: เปลี่ยนประเภท provider

เปลี่ยนประเภท provider จาก oauth เป็น oidc

ขั้นตอนที่ 2: เพิ่มฟิลด์ issuer

เพิ่มฟิลด์ issuer ในการกำหนดค่าของ provider คุณสามารถรับค่า issuer จากหน้า Logto Application Details ในฟิลด์ "Issuer endpoint" ควรมีลักษณะเป็น https://xxxx.logto.app/oidc หากคุณใช้บริการ Logto cloud

จากนั้นคุณสามารถลบฟิลด์ wellKnown ได้

ขั้นตอนที่ 3: ลบอัลกอริธึมการลงนาม id_token_signed_response_alg

คุณไม่จำเป็นต้องระบุอัลกอริธึมการลงนาม id_token_signed_response_alg ในการกำหนดค่าของ provider อีกต่อไป ขณะนี้สนับสนุน ES384 และจะถูกตรวจจับโดยอัตโนมัติ

อัปเดตโปรเจกต์

หลังจากอัปเดตการกำหนดค่า provider คุณต้องอัปเดตแพ็กเกจ next-auth เป็น v5 ทำตาม คู่มือการย้ายอย่างเป็นทางการ เพื่ออัปเดตแพ็กเกจและตรวจสอบให้แน่ใจว่าแอปพลิเคชันของคุณทำงานได้ตามคาด ตรวจสอบให้แน่ใจว่าคุณอ้างอิง คู่มือเริ่มต้นอย่างรวดเร็วของ NextAuth ด้วย