Next Auth + Postgre + Vercel - 部署后错误

Question

我有一个项目，正在使用 Nextjs、Next auth、postgre 和 prisma。本地一切工作正常，但部署后我无法从会话中获取用户数据或用户 ID 以便进一步使用功能。

回购链接：https://github.com/Crazyhaller/play-me

在 app/dashboard/page.tsx 中本地运行时，我能够获取 CreatorId，但在部署版本中其为 null。

有人可以花几分钟看看我的问题，看看他们是否可以提供帮助！

[...nextauth]route.ts 的代码 -

import { prismaClient } from '@/app/lib/db'
import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET ?? 'secret',
  callbacks: {
    async signIn(params) {
      if (!params.user.email) {
        return false
      }
      try {
        await prismaClient.user.create({
          data: {
            email: params.user.email,
            provider: 'Google',
          },
        })
      } catch (error) {
        console.log(error)
      }
      return true
    },
  },
})

export { handler as GET, handler as POST }

api/user/route.ts 的代码 -

/* eslint-disable @typescript-eslint/no-unused-vars */
import { prismaClient } from '@/app/lib/db'
import { getServerSession } from 'next-auth'
import { NextRequest, NextResponse } from 'next/server'

export const GET = async (req: NextRequest) => {
  const session = await getServerSession()
  // TODO: You can get rid of the db call here
  const user = await prismaClient.user.findFirst({
    where: {
      email: session?.user?.email ?? '',
    },
  })

  if (!user) {
    return NextResponse.json(
      {
        message: 'Unauthenticated',
      },
      {
        status: 403,
      }
    )
  }
  return NextResponse.json({
    user,
  })
}

// dont static render
export const dynamic = 'force-dynamic'

仪表板/page.tsx 的代码 -

'use client'
import { useEffect, useState } from 'react'
import StreamView from '../components/StreamView'

export default function Component() {
  const [creatorId, setCreatorId] = useState<string | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    async function fetchUserData() {
      try {
        const response = await fetch('/api/user')
        const data = await response.json()
        console.log('User data:', data)
        console.log('User id:', data.user?.id)
        setCreatorId(data.user?.id || null)
      } catch (e) {
        console.error('Error fetching user data:', e)
      } finally {
        setLoading(false)
      }
    }

    fetchUserData()
  }, [])

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-900 text-neon-blue text-2xl font-bold">
        Loading...
      </div>
    )
  }

  return <StreamView creatorId={creatorId!} playVideo={true} />
}

我尝试使用 neon tech 的 postgre 数据库在 vercel 上添加所有正确的环境变量，并将部署的 vercel 链接添加到 google api 控制台。当用户登录时在本地运行时，我能够获取 CreatorId 变量，但在部署版本中无法获取。

Answer 1

• 您可以提供控制台中可用的日志吗？
• 检查“网络”选项卡，请求是否提供客户端 ID？
• 在 React devtools 中检查状态是否包含客户端 ID。
• 检查

  postinstall

  脚本是否在部署中运行？.