使用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身份验证?
1条答案
按热度按时间thigvfpy1#
我想明白了。这是因为我遵循页面/路由器指南。应用路由器指南
代码应该是这样的:
字符串