使用next-auth在Next.js中进行Google OAuth认证无法正常工作

我已经设置了一个Next.js应用程序，并尝试使用next-auth库实现Google OAuth身份验证。尽管遵循了documentation，但我似乎无法让它工作。

设置

我在Google Developer Console上创建了OAuth 2.0客户端凭据。有了这些凭据，我试图使用next-auth创建一个带有Google身份验证提示的登录名。

API路由

文件路径：app/(index)/api/auth/[...nextauth]/route.ts个

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

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
        clientId: process.env.NEXT_PUBLIC_GOOGLE_client_id as string,
        clientSecret: process.env.NEXT_PUBLIC_GOOGLE_client_secret as string,
        authorization: {
            params: {
              prompt: "consent",
              access_type: "offline",
              response_type: "code"
            }
          },
      }),
  ],
  callbacks: {
    async signIn({account, profile}:{account: Account | null; profile?: Profile | undefined;}) {
        const isAccount = account && profile;
        if (isAccount && account.provider === "google") {
            // return profile.email_verified && profile.email.endsWith("@example.com");
            return true;
        }
        return true; // Handle other providers differently
    }
  }
}

export default NextAuth(authOptions);

字符串

登录组件

import { signIn } from "next-auth/react";

export default function LoginPage() {
  return (
    <div>
      <button
        onClick={() => {
          signIn();
        }}
      >
        Sign in
      </button>
    </div>
  );
}

型

问题

当我点击“登录”按钮时，页面重定向到http://localhost:3000/api/auth/error。我得到错误消息：

This page isn’t workingIf the problem continues, contact the site owner.
HTTP ERROR 405

型

提问

我错过了什么或做错了什么？如何使用next-auth在我的Next.js应用程序中使用Google OAuth身份验证？