使用NextAuth实现谷歌授权失败，请求排查问题原因

问题1：点击登录触发302重定向至主页，无会话数据 #

原因分析 #

初始配置中pages.signIn设为"/"，导致NextAuth跳过默认的登录回调流程，直接跳转主页，无法完成会话的创建与存储。同时，若未在_app.tsx中包裹SessionProvider，useSession也无法正确读取会话数据。

解决方案 #

1. 移除pages.signIn配置，使用NextAuth默认登录页面（或配置专门登录页并确保其处理回调逻辑）
2. 在_app.tsx中添加SessionProvider全局包裹组件，保证会话能被全局读取

修正后的初始版本api/auth/[...nextauth].ts：

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

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

添加SessionProvider的_app.tsx示例：

import { SessionProvider } from "next-auth/react";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

问题2：修改配置后出现「redirect_uri与应用注册时的回调URL不匹配」400错误 #

原因分析 #

修改后的代码存在多处语法错误，导致NextAuth配置失效，生成错误的回调URL：

• providers数组后多余闭合的})，破坏配置结构
• callback拼写错误，应为复数callbacks
• secret引用未定义的JWT_SECRET，应使用.env中的NEXTAUTH_SECRET
• 谷歌云控制台注册的回调URL与NEXTAUTH_URL拼接的实际路径不一致

解决方案 #

1. 修正配置文件的语法错误，确保结构正确
2. 检查谷歌云控制台的OAuth 2.0客户端ID配置，添加正确的回调URL：http://localhost:3000/api/auth/callback/google
3. 确保.env中的NEXTAUTH_URL无多余斜杠，与控制台配置完全一致

修正后的api/auth/[...nextauth].ts：

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

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!
    })
  ],
  callbacks: {
    async session({ session, token }) {
      if (session.user?.name) {
        session.user.tag = session.user.name.split(" ").join("").toLowerCase();
      }
      session.user.uid = token.sub!;
      return session;
    }
  },
  secret: process.env.NEXTAUTH_SECRET!
});

谷歌控制台配置检查要点 #

• 进入谷歌云控制台 → API和服务 → 凭据 → 找到对应OAuth 2.0客户端ID
• 在「已授权的重定向URI」中添加http://localhost:3000/api/auth/callback/google
• 确保URI与NEXTAUTH_URL完全匹配（包括协议、端口号）

内容的提问来源于stack exchange，提问作者XAZG Неизвестный