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

ปัญหา 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

เมื่อเจอ 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 มาใส่ข้อมูล

คำถามที่พบบ่อย (FAQ)

Error 400: redirect_uri_mismatch คืออะไร?

คือข้อผิดพลาดที่เกิดขึ้นระหว่าง Google OAuth Authentication หมายความว่า URL ที่ Google พยายามส่งผู้ใช้กลับมาหลัง Login ไม่ตรงกับ URL ที่ลงทะเบียนไว้ใน Google Cloud Console

ทำไม Login Google ถึงขึ้น Access blocked: This app’s request is invalid?

ข้อความนี้คือ Error 400: redirect_uri_mismatch นั่นเอง เกิดจาก Redirect URI ในโค้ดกับที่ลงทะเบียนใน Google Cloud Console ไม่ตรงกัน ต้องแก้ทั้งใน Google Console และไฟล์ .env

Redirect URI ต้องตรงกันแค่ไหน?

ต้องตรงกันทุกตัวอักษร รวมถึง protocol (http/https), path, และ trailing slash (/) ด้วย เช่น http://localhost:3000/auth/callback กับ http://localhost:3000/auth/callback/ ถือว่าไม่ตรงกัน

ใช้หลาย environment แล้วเกิด Error นี้ต้องทำอย่างไร?

ต้องลงทะเบียน Authorized redirect URI ใน Google Cloud Console ให้ครบทุก environment เช่น localhost, staging URL และ production URL

NEXTAUTH_URL ต้องตั้งค่าอย่างไรให้ถูกต้อง?

NEXTAUTH_URL ในไฟล์ .env ต้องตรงกับ URL และ Port ที่ใช้งานจริงในขณะนั้น เช่น ถ้า GitHub Codespaces รัน Port 3000 ก็ต้องนำ URL จาก Port นั้นมาใส่ให้ถูกต้อง

ทำแค่อย่างใดอย่างหนึ่งแก้ได้ไหม?

ไม่ได้ครับ ต้องตรวจสอบและแก้ไขทั้งสองวิธีควบคู่กัน คือทั้งเพิ่ม Authorized redirect URI ใน Google Console และตั้งค่า NEXTAUTH_URL ในไฟล์ .env ให้ถูกต้อง