oauth2.0 Next-Auth与谷歌获取`http://localhost:3000/api/auth/error`错误在NextJS应用程序路由器

mspsb9vt  于 2023-08-02  发布在  其他
关注(0)|答案(1)|浏览(153)

使用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

  1. import NextAuth, { Account, NextAuthOptions, Profile } from "next-auth";
  2. import GoogleProvider from "next-auth/providers/google";
  3. export const authOptions: NextAuthOptions = {
  4. providers: [
  5. GoogleProvider({
  6. clientId: process.env.NEXT_PUBLIC_GOOGLE_client_id as string,
  7. clientSecret: process.env.NEXT_PUBLIC_GOOGLE_client_secret as string,
  8. authorization: {
  9. params: {
  10. prompt: "consent",
  11. access_type: "offline",
  12. response_type: "code"
  13. }
  14. },
  15. }),
  16. ],
  17. callbacks: {
  18. async signIn({account, profile}:{account: Account | null; profile?: Profile | undefined;}) {
  19. const isAccount = account && profile;
  20. if (isAccount && account.provider === "google") {
  21. // return profile.email_verified && profile.email.endsWith("@example.com");
  22. return true;
  23. }
  24. return true; // Handle other providers differently
  25. }
  26. }
  27. }
  28. export default NextAuth(authOptions);

字符串

登录组件

  1. import { signIn } from "next-auth/react";
  2. export default function LoginPage() {
  3. return (
  4. <div>
  5. <button
  6. onClick={() => {
  7. signIn();
  8. }}
  9. >
  10. Sign in
  11. </button>
  12. </div>
  13. );
  14. }

问题

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

  1. This page isnt workingIf the problem continues, contact the site owner.
  2. HTTP ERROR 405

提问

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

thigvfpy

thigvfpy1#

我想明白了。这是因为我遵循页面/路由器指南。应用路由器指南
代码应该是这样的:

  1. import NextAuth, { Account, NextAuthOptions, Profile } from "next-auth"
  2. import GoogleProvider from "next-auth/providers/google";
  3. const handler = NextAuth({
  4. // Configure one or more authentication providers
  5. providers: [
  6. GoogleProvider({
  7. clientId: process.env.NEXT_PUBLIC_GOOGLE_client_id as string,
  8. clientSecret: process.env.NEXT_PUBLIC_GOOGLE_client_secret as string,
  9. authorization: {
  10. params: {
  11. prompt: "consent",
  12. access_type: "offline",
  13. response_type: "code"
  14. }
  15. },
  16. }),
  17. ],
  18. callbacks: {
  19. async signIn({account, profile}:{account: Account | null; profile?: Profile | undefined;}) {
  20. const isAccount = account && profile
  21. if (isAccount && account.provider === "google") {
  22. // return profile.email_verified && profile.email.endsWith("@example.com")
  23. return true
  24. }
  25. return true // Do different verification for other providers that don't have `email_verified`
  26. }
  27. }
  28. })
  29. // export default NextAuth(authOptions)
  30. export { handler as GET, handler as POST }

字符串

展开查看全部

相关问题