使用next-auth对接谷歌认证时提示Client_Id无效如何解决？

问题根因 #

你代码中读取Google客户端ID的环境变量名，和.env.local中实际配置的变量名不匹配，导致NextAuth读取到的clientId为空，触发参数缺失报错。

具体对应错误点 #

• 你的[...nextauth].js中GoogleProvider配置的是clientId: process.env.GOOGLE_ID
• 但你的.env.local里配置的是带NEXT_PUBLIC_前缀的NEXT_PUBLIC_GOOGLE_ID
• 两套命名不统一，Node.js服务端读取process.env.GOOGLE_ID时得到的是undefined，传给谷歌OAuth接口的client_id参数为空，就返回了400错误。

修复方案 #

二选一即可，优先选方案1避免凭证泄露：

• 方案1：修改.env.local中的变量名，去掉NEXT_PUBLIC_前缀

  GOOGLE_ID=MY_GOOGLE_ID
  GOOGLE_SECRET=MY_GOOGLE_SECRET
  

  说明：NEXT_PUBLIC_前缀的环境变量会被注入到前端客户端代码，敏感的OAuth凭证不要加此前缀，避免信息泄露。
• 方案2：修改[...nextauth].js中读取的环境变量名，匹配你当前的配置

  Providers.Google({
    clientId: process.env.NEXT_PUBLIC_GOOGLE_ID,
    clientSecret: process.env.GOOGLE_SECRET,
  })
  

修复后重启Next.js开发服务，新的环境变量就会生效，报错即可解决。

内容的提问来源于stack exchange，提问作者Chrissy