ส่วนเสริม เมื่อเจอปัญหา Login ผ่าน Google ไม่ได้ Error 400: redirect_uri_mismatch

ปัญหา Error 400: redirect_uri_mismatch คืออะไร

ปัญหา Login ผ่าน Google ไม่ได้ Error 400: redirect_uri_mismatch

Error 400: redirect_uri_mismatch เป็นข้อผิดพลาดที่พบบ่อยเมื่อทำ Google OAuth Authentication ซึ่งหมายความว่า URL ที่ Google พยายามส่งผู้ใช้กลับไปหลังจาก login ไม่ตรงกับ URL ที่ลงทะเบียนไว้ใน Google Cloud Console

สาเหตุของ Error 400: redirect_uri_mismatch คืออะไร ?

1. Redirect URI ไม่ตรงกัน

  • URL ในโค้ดของคุณ เช่น http://localhost:3000/auth/callback
  • แต่ใน Google Console ลงทะเบียนเป็น http://localhost:3000/callback
  • ต้องตรงกันทุกตัวอักษร รวมถึง trailing slash (/) ด้วย

2. Protocol ไม่ตรงกัน

  • ในโค้ดใช้ https:// แต่ใน Console ลงทะเบียน http:// หรือกลับกัน

3. ลืมเพิ่ม URI ใน Google Console

  • ใช้หลาย environment (dev, staging, production) แต่ลงทะเบียนไม่ครบ

วิธีสังเกตระบบจะแสดงข้อความ Access blocked: This app’s request is invalid เมื่อพยายามลอง Login โดยสามารถตรวจสอบและแก้ไขได้ดังนี้ (ต้องตรวจสอบและทำทั้งสองวิธี)

วิธีการแก้ไขโดยการเพิ่ม Authorized redirect URI ใน Google Project

การตรวจสอบ redirect uri ที่ถูกต้อง
ตัวอย่างการใส่ redirect_uri

เมื่อเจอ Error แบบนี้ให้กด Link Error details แล้วก็อปปี้ redirect_uri ที่ถูกต้องตามภาพเพื่อไปใส่ใน Authorized redirect URIs ตามการ Setup Google Cloud OAuth

วิธีการแก้ไขโดยการเพิ่ม NEXTAUTH_URL ให้ตรงกับ Port ที่ใช้งานในปัจจุบัน

การเกิด Error 400: redirect_uri_mismatch อาจจะเกิดขึ้นเพราะใส่ข้อมูล NEXTAUTH_URL ในไฟล์ .env ไม่ถูกต้อง โดย NEXTAUTH_URL จะต้องนำ URL จาก Port 3000 มาใส่ข้อมูล