มาลองเล่น NextAuth และ Prisma กัน

☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
   / @mikelopster  

ลองไมค์ สัปดาห์นี้ เราจะพูดถึงการทำ Authentication ผ่าน NextAuth กัน (หนึ่งในหัวข้อที่มีคน Request เข้ามาเยอะมาก 😆) ว่า มันคืออะไร มีการใช้งานยังไงบ้าง พร้อมกับการใช้งานร่วมกับ Database ด้วย Prisma ORM ผ่านการเล่น 3 เคสคือ
1. Sign in และ Sign up ด้วย Email และ Password
2. เพิ่ม Role คู่กับ Session
3. เพิ่ม Google Sign in ที่ใช้ร่วมกับ Email และ Password ได้

รวมถึงความแตกต่างระหว่าง Auth0 (ที่เราพึ่งทำไปไม่นานนี้) และ NextAuth นั้นมีจุดที่แตกต่างกันยังไงบ้าง มาฟังกันในหัวข้อลองไมค์วันนี้กันครับ 😁

หัวข้อ
00:00 แนะนำหัวข้อ
02:40 NextAuth คืออะไร
07:36 เราจะทำอะไรในหัวข้อนี้บ้าง
09:18 Start project Next.js และ PostgreSQL database
13:00 สร้าง table Users สำหรับเก็บ email / password (ผ่าน Prisma)
16:45 สร้าง API สำหรับ sign up
25:08 สร้าง API Sign in ด้วย NextAuth และ องค์ประกอบ Config NextAuth
37:44 สร้างหน้า Login และเพิ่ม Session Provider ของ Next Auth (เพื่อเตรียม Login)
42:11 เชื่อม signIn และ ดึง user ผ่าน session ของ NextAuth
50:30 เพิ่ม logout และ ดักให้กลับไปหน้า Login หากยังไม่ได้ login (จากหน้า Profile)
53:08 เพิ่ม Role เข้า table Users (เพื่อไปใช้งานเรื่อง Role ร่วมกับ NextAuth)
54:13 นำ Role ใส่ใน token และ session ของ NextAuth
56:44 แสดง Role ที่หน้าเว็บ (ผ่าน session)
57:19 การดึงใช้งาน Token / Session ผ่าน Middleware และ Server API
1:01:35 เริ่มต้นเพิ่ม Google Sign in / สร้าง Credential ขึ้นมาก่อน
1:03:30 Config Client id และ client secret ลงใน .env และเพิ่ม GoogleProvider
1:05:02 เพิ่ม table Account ให้ support การเก็บ provider และ token ของ Social Auth
1:10:57 สรุปทั้งหมดและ NextAuth แตกต่างกับ Auth0 อย่างไร

สามารถอ่าน Blog เพิ่มเติมได้ที่
https://mikelopster.dev/posts/next-au...

ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page:   / mikelopster.dev   กันได้เลย

แปะพิกัดของที่ผมใช้
https://shope.ee/8A54c8cfkf ของที่ตั้งอยู่ด้านหลัง
https://shope.ee/6fI75UuLEM osmo pocket 3
https://shope.ee/4VDcVixCW9 ไมค์ shure