Next.js 13使用GoogleProvider时Next-auth出现state cookie缺失问题

一、拦截已认证用户访问登录页 #

你的登录页设置为根路径/，只需在该页面中判断用户是否已登录，若已登录则直接重定向到错误页面（比如/error），从根源避免重复登录操作。

客户端判断（React组件场景） #

在根页面组件中使用useSession钩子实现拦截：

import { useSession } from "next-auth/react"
import { useEffect } from "react"
import { useRouter } from "next/router"

export default function Home() {
  const { data: session } = useSession()
  const router = useRouter()

  useEffect(() => {
    if (session) {
      router.push("/error")
    }
  }, [session, router])

  // 原登录页内容（表单、Google登录按钮等）
  return (
    <div>
      {/* 你的登录界面代码 */}
    </div>
  )
}

服务端判断（SSR/ISR页面场景） #

如果是服务端渲染页面，使用getServerSession在服务端完成拦截：

import { getServerSession } from "next-auth/next"
import { authConfig } from "../path/to/auth"
import { redirect } from "next/navigation"

export default async function Home() {
  const session = await getServerSession(authConfig)
  if (session) {
    redirect("/error")
  }

  // 原登录页内容
  return (
    <div>
      {/* 你的登录界面代码 */}
    </div>
  )
}

二、优化NextAuth配置强化安全性 #

同时调整authConfig的部分配置，确保state参数和会话处理更严谨：

export const authConfig: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
      authorization: {
        params: {
          access_type: "offline",
          response_type: "code",
        },
      },
    }),
    // ... 其他Provider配置
  ],
  pages: {
    signIn: "/",
    signOut: "/",
  },
  // 添加会话配置与密钥
  session: {
    strategy: "jwt",
    maxAge: 24 * 60 * 60,
  },
  secret: process.env.NEXTAUTH_SECRET,
  // ... 现有callbacks配置
}

三、补充说明 #

• 你需要自行创建/error页面，提示用户"已处于登录状态，无需重复登录"即可。
• 拦截已认证用户访问登录页是解决该问题的核心方案，既避免了state cookie缺失的报错，也符合正常的用户流程逻辑。

内容的提问来源于stack exchange，提问作者Daniel Craciun