Next+Nextauth 获取用户会话作为 ServerSideProp

Question

我正在尝试通过在 next.js 项目中使用 nextauth 来实现 Facebook 登录和会话。一旦用户通过身份验证，我想检索会话并将其作为服务器端道具传递给我的组件，以避免不必要的加载时间

我的[...nextauth.js]文件

import NextAuth from "next-auth"
import FacebookProvider from "next-auth/providers/facebook";

export default NextAuth({
  // Configure one or more authentication providers
  secret: process.env.SECRET,
  providers: [
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
    }),
    // ...add more providers here
  ],
})

我仔细检查了我的环境变量 FACEBOOK_CLIENT_ID FACEBOOK_CLIENT_SECRET NEXTAUTH_URL 和 SECRET

我的_app.js文件

import "../styles/globals.css";
import { SessionProvider } from "next-auth/react"

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

在我的 index.js 组件中，我正在处理登录

import { useSession, signIn, signOut,getSession } from "next-auth/react"
import Head from 'next/head'
import Header from '../components/Header'
import Login from '../components/Login'

export default function Home({session}) {
  if (!session) return <Login></Login>
  return (
    <div >
      <Head>
        <title>Facebook</title>
      </Head>
      <h1>Signed in as {session.user.email}</h1>
      <Header/>
      <main>
        {/* Sidebar */}
         {/* feed */}
         {/* widgets */}
      </main>
    </div>
  )
  
}
export async function getServerSideProps(context) {
  const session = await getSession(context)
  return {
    props: { session }
  }
}

在mi Login.js组件中我只是使用next auth

提供的signIn方法

事情是：

当我尝试使用 getServerSideProps 检索会话时，它没有为我提供会话并且我无法访问主页，但是如果我改为使用组件内部的自定义挂钩，我会得到一个会话和所有内容工作正常，但我认为如果我将会话作为服务器端道具传递会更好

const session = await getSession() //this works but is client-side

有什么我遗漏的吗？我已阅读文档并按照步骤操作，但效果不佳
此外next-auth/react和next-auth/client有区别吗？我在这个项目中安装了 "next-auth": "^4.0.0-beta.7" 包

如果有人能阐明这个主题以及为什么我不能将会话作为服务器端道具获取，我将不胜感激。

Answer 1

我想我明白了，只是改变了 SessionProvider 在 _app.js

上获取会话的方式

import { SessionProvider } from "next-auth/react"

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

Next+Nextauth 获取用户会话作为 ServerSideProp

Next+Nextauth Get user's session as a ServerSideProp

javascript

session

reactjs