我正在尝试使用next-auth实现Google OAuth。我的问题是，当我尝试使用Google作为提供商登录时，当我单击按钮时，它会将我重定向到http：//localhost：3000/api/auth/error：图片error path。我想做的是，当你点击“使用Google登录”按钮时，它会将你重定向到Google的OAuth页面。

控制台错误：

[next-auth][error][CLIENT_FETCH_ERROR]https://next-auth.js.org/errors#client_fetch_error尝试获取资源时出现网络错误。对象{错误：联系我们“/API/auth/providers”，消息：“尝试获取资源时出现NetworkError。”}

我尝试过的：

• 重置我的GOOGLE_CLIENT_ID和GOOGLE_CLIENT_SECRET以及NEXTAUTH_SECRET
• 正在添加“secret：NEXTAUTH_SECRET”作为我的[... nextauth].ts文件的提供程序的选项，尽管根据文档它是不需要的
• 将localhost：3000/API/auth/callback/google直接输入到URL中，这起作用了，我能够在我的主页中访问我的会话对象。它把我送到这里OAuth Page
• 将next-auth从4.14.0更新为4.15.0
• 已从http：//localhost：3000清除cookie和会话
• 在Vercel上部署了适当的环境变量，并将域添加到Google凭据中，然后尝试从我的手机和PC上登录，无论有无WiFi。
• 已尝试使用FireFox、FireFox隐身模式、Google Chrome、Google Chrome隐身模式登录
• 已尝试使用不带任何参数的signIn（）
• 花了几个小时尝试StackOverflow和Nextjs官方github问题部分给出的许多可能的解决方案
  /client/pages/API/auth/[...nextauth].ts：

import NextAuth, { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
  ],
};

export default NextAuth(authOptions);

/client/pages/login.tsx OAuth组件，其中props传递给按钮：

<OAuth
    company={"Google"}
    handleLogin={() =>
      signIn("google", { callbackUrl: "http://localhost:3000/" })
    }
  />

/client/.env文件：

GOOGLE_CLIENT_ID=***********
GOOGLE_CLIENT_SECRET=***********

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=122a918b879a0d7e331c0795f435d084

在我的Google Developers Credentials中，我有

• http：//localhost：3000/api/auth/callback/google在Authorized redirect URI部分
• http：//localhost：3000在Authorized JavaScript origins部分
  --编辑：找到修复。--
  解决方案：

<OAuth
    company={"Google"}
    handleLogin={(e) => {
      e.preventDefault();
      signIn("google", { callbackUrl: REDIRECT_URL_AFTER_SIGN_IN });
    }}
  />