NextJS集成Google OAuth持续出现redirect_uri_mismatch等错误求助

问题重现 #

尝试集成NextJS与NextAuth Google OAuth时，无论是否手动配置authorization参数，点击「Sign in with Google」始终返回redirect_uri_mismatch错误，已核对回调地址、更换测试用户、重建凭据等操作均无效。

解决方案 #

1. 移除GoogleProvider中手动的authorization配置 #

NextAuth会自动生成正确的redirect_uri、response_type和scope参数，手动指定反而可能导致不匹配。修正后的app/api/auth/[...nextauth]/route.ts代码如下：

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    })
  ]
});

export { handler as GET, handler as POST }

2. 配置NEXTAUTH_URL环境变量 #

在项目根目录的.env文件中添加以下内容，确保NextAuth能正确生成回调地址：

GOOGLE_CLIENT_ID=你的Google客户端ID
GOOGLE_CLIENT_SECRET=你的Google客户端密钥
NEXTAUTH_URL=http://localhost:3000

注意：本地开发必须使用http://localhost:3000，不要加末尾斜杠；生产环境替换为你的实际域名。

3. 检查Google Cloud控制台的凭据配置 #

• 确认凭据类型为OAuth 2.0 客户端ID，应用类型选择Web应用（不要选桌面应用或其他类型）
• 在「授权重定向URI」中严格添加http://localhost:3000/api/auth/callback/google，确保与NEXTAUTH_URL生成的地址完全一致（包括协议、域名、端口、路径，无多余字符）
• 确认OAuth同意屏幕已配置完成，测试用户已添加到白名单

4. 重启开发服务器并验证 #

修改配置后，重启NextJS开发服务器，确保环境变量和代码变更生效。再次尝试登录时，检查浏览器地址栏中的redirect_uri参数是否与Google Cloud配置的完全一致。

额外排查点 #

• 检查.env文件中的密钥是否复制正确，避免多余空格或换行符
• 使用隐身窗口测试，排除浏览器缓存或Cookie干扰
• 确认Google Cloud项目已启用「People API」（NextAuth需要该API获取用户信息）

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