Next Auth useSession 在第一次渲染时没有得到 session

Question

我正在尝试使用 NextJS v13 和 Next Auth v4 构建网站。 每当加载页面/组件时，在使用useSession挂钩时，第一次渲染时不会返回 session，因此，许多组件无法正常工作......

例如，以下代码应为经过身份验证的用户加载问题：

'use client'
import { useEffect, useState } from 'react'
import { Question } from '@prisma/client'
import { useSession } from 'next-auth/react'

function QuestionPage() {
  const { data: session } = useSession() // this is null
  const [questions, setQuestions] = useState<Question[]>([])
  const [questionStatus, setQuestionStatus] = useState('');

  useEffect(() => {
    console.log('Session: ', session)
    if (!session) return;

    setQuestionStatus('Loading questions...');

    fetch('/api/questions')
        .then((res) => res.json())
        .then((data) => {
            setQuestions(data.questions)
            setQuestionStatus('');
        })
  }, [])

  return (
    <div>
      <p>{questionStatus}</p>
      {questions && questions.map(question => {
         <p key={question.id}>{question.title}</p>
      })}
    </div>
  )
}

这是我包装主应用程序的ProviderWrapper组件：

'use client'
import QuestionContextWrapper from '@/context/QuestionContext'
import { SessionProvider } from 'next-auth/react'

export const metadata = {
  title: 'My App',
  description: 'My description',
}

export default function ProvidersWrapper({ children }: { children: React.ReactNode }) {
  return (
    <SessionProvider>
      <QuestionContextWrapper>
        {children}
      </QuestionContextWrapper>
    </SessionProvider>
  )
}

这是layout.tsx文件：

import './globals.css'
import Header from '@/components/Header'
import ProvidersWrapper from './ProvidersWrapper'
import Footer from '@/components/Footer'

export const metadata = {
  title: 'My app',
  description: 'My description',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <ProvidersWrapper>
          <Header />
          {children}
          <Footer />
        </ProvidersWrapper>
      </body>
    </html>
  )
}

任何人都知道为什么next-auth会这样？

Answer 1

初始负载 session 将是未定义的，因为它没有传递给提供者。 尝试将现有的 session传递给提供商，如下所示。

export default function ProvidersWrapper({ children, session }: { children: React.ReactNode }) {
  return (
    <SessionProvider baseUrl={/* BASE_URL */} refetchInterval={60 * 5} session={session}>
      <QuestionContextWrapper>{children}</QuestionContextWrapper>
    </SessionProvider>
  );
}

ProvidersWrapper.getInitialProps = async (context) => {
  const { ctx } = context;
  const session = await getSession(ctx);

  return {
    session,
  };
};

Answer 2

经过一些研究并且由于@Thusithz 的回答，我发现本指南使用 Next Auth 和 TypeScript 实施正确的身份验证。所以我将我的代码更改为以下并且它有效。

我已将/src/components/PriverWrapper.tsx重命名为src/context/AuthProvider.tsx并将代码也更改为以下内容：

'use client'
import { Session } from 'next-auth'
import { SessionProvider } from 'next-auth/react'

export const metadata = {
  title: 'My App',
  description: 'My description',
}

export interface AuthContextProps {
  children: React.ReactNode
  session: Session
}

export default function AuthContext({ children }: AuthContextProps) {
  return <SessionProvider>{children}</SessionProvider>
}

然后将其应用于/src/app/layout.tsx文件，使用AuthProvider包装节点并传递session变量：

import './globals.css'
import Header from '@/components/Header'
import AuthProvider from '@/context/AuthContext'
import Footer from '@/components/Footer'
import { Session } from 'next-auth'

async function getSession(cookie: string): Promise<Session> {
  const response = await fetch(`${process.env.NEXTAUTH_URL}/session`, {
    headers: {
      cookie,
    }
  })

  const session = await response.json()

  return Object.keys(session).length > 0 ? session : null
}

export const metadata = {
  title: 'My app',
  description: 'My description',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const session = await getSession(headers().get('cookie') ?? '');
  return (
    <html lang="en">
      <body>
        <AuthContext session={session}>
          <Header />
          {children}
          <Footer />
        </AuthContext >
      </body>
    </html>
  )
}

所以，这按预期工作。