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

【问题标题】：Next+Nextauth Get user's session as a ServerSidePropNext+Nextauth 获取用户会话作为 ServerSideProp
【发布时间】：2021-12-31 03:04:13
【问题描述】：

我正在尝试通过在 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" 包

如果有人能对这个话题有所了解，以及为什么我不能将会话作为服务器端道具，我将不胜感激。

【问题讨论】：

快速更新，在 getServerSideProps 中执行 console.log(session) 会正确抛出会话对象，问题是索引组件没有以某种方式接收它

标签： javascript reactjs session

【解决方案1】：

我想我明白了，只是改变了 SessionProvider 在 _app.js 上获取会话的方式

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

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

【讨论】：