Next.js 13中Next-Auth谷歌认证失败重定向参数丢失问题求助

问题核心 #

你在Next.js中用NextAuth实现谷歌认证时遇到两个关键问题：

• 认证失败重定向到/login?error=xxx时，Login组件原本能正常获取searchParams，但根布局layout.tsx中session为空时直接渲染Login组件，未传递参数导致丢失error信息。
• 根布局中尝试获取searchParams始终为null，因为Next.js App Router的根布局组件无法直接接收searchParams参数，只有页面组件（如app/login/page.tsx）才能拿到该参数。

解决方案 #

1. 重构根布局的受保护路由逻辑 #

移除根布局中直接渲染Login组件的代码，改用路由重定向+路径判断处理未授权访问，让Login页面作为独立路由存在，保留它获取searchParams的能力。

修改后的layout.tsx代码：

import './globals.css'
import { redirect } from 'next/navigation'
import { Poppins } from 'next/font/google'
import Sidebar from './components/Sidebar'
import Topbar from './components/Topbar'
import Footer from './components/Footer'
import { NextAuthProvider } from "./providers";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { headers } from 'next/headers'

const fonts = Poppins({
  weight: ['400'],
  subsets: ['latin']
})

export const metadata = {
  title: 'Khaata',
  description: 'Devsinc Khaata',
}

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const session = await getServerSession(authOptions);
  const headersList = headers();
  const pathname = headersList.get('x-nextjs-pathname') || '';

  // 未登录且当前不在/login页面，重定向到/login
  if (!session && pathname !== '/login') {
    redirect('/login');
  }

  return (
    <html lang="en">
      <body className={`${fonts.className} m-0 text-base antialiased font-normal dark:bg-slate-900 leading-default bg-gray-50 text-slate-500`}>
        <NextAuthProvider>
          {/* 已登录时渲染主布局 */}
          {session && (
            <>
              <div className="absolute w-full bg-blue-500 dark:hidden min-h-75"></div>
              <Sidebar />
              <main className="relative h-full max-h-screen transition-all duration-200 ease-in-out xl:ml-68 rounded-xl">
                <Topbar />
                <div className="w-full px-6 py-6 mx-auto">
                  {children}
                </div>
                <Footer />
              </main>
            </>
          )}
          {/* 未登录但当前在/login页面，直接渲染children（即Login组件） */}
          {!session && children}
        </NextAuthProvider>
      </body>
    </html>
  )
}

2. 保留Login页面的原有逻辑 #

你的app/login/page.tsx代码无需修改，它作为独立页面组件，能正常接收searchParams并处理错误信息：

import { LoginButton } from "../components/buttons.component";

type LoginPagePropsType = {
  searchParams?: {
    error: string
  }
}

async function Login({ searchParams }: LoginPagePropsType) {
  console.log("searchParams", searchParams);

  const error = searchParams?.error
  console.log("Error", error);

  if (error) {
    return (
      <div className="min-h-screen bg-gray-100 flex items-center justify-center">
        <div className="bg-white p-8 rounded-lg shadow-md">
          <h2 className="text-red-500 text-xl mb-4">认证失败</h2>
          <p>请检查您的谷歌账号权限，或稍后重试</p>
          <div className="mt-4">
            <LoginButton />
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
      <div className="relative py-3 sm:max-w-xl sm:mx-auto">
        <div className="absolute inset-0 bg-gradient-to-r from-teal-400 to-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
        <div className="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20">
          <h1 className="text-2xl font-semibold text-center text-gray-800 mb-6">Login to Your Account</h1>
          <div className="w-full px-6 py-2  flex justify-center" >
            <LoginButton />
          </div>
        </div>
      </div>
    </div>
  );
}

export default Login;

关键说明 #

• 根布局无法获取searchParams：App Router中，searchParams是页面组件的专属props，根布局（RootLayout）无法直接拿到，所以之前的尝试会返回null。
• 路由重定向的优势：通过判断当前路径和session状态，将未授权用户重定向到/login页面，而非直接在布局中渲染Login组件，这样Login页面作为独立路由，能完整保留URL中的参数。
• 路径获取方式：用headers().get('x-nextjs-pathname')获取当前路径，这是Next.js服务器组件中获取路径的可靠方式。

内容的提问来源于stack exchange，提问作者Shahid Arshad