Next.js 14 accessing session information from component

Question

I have a next.js 14 project with these tools:

• Typescript
• Vercel (with a postgres db)
• Prisma
• App router
• Next auth (v5.0 beta)
• Server actions & react server components

I'm fairly new to next.js programming, and I set up authentication following the official next.js tutorial (https://nextjs.org/learn/dashboard-app/getting-started).

However, I don't know exactly how to access user data once the user is logged in. Apparently, next-auth stores the user info in the session, and I can access it through it. However, I'm a bit lost on how to implement it.

I managed to hack this together:

import type { NextPageContext } from 'next';
import { getSession } from 'next-auth/react';

export async function getServerSideProps(context: NextPageContext) {
    const session = await getSession(context);
    return {
        props: { session }, // Pass the session to the component as props
    };
}

export default function AccountSettings ({ session }) {

    return (
        <div>
            <div className="px-4 sm:px-0">
                <img
                    className="inline-block h-14 w-14 rounded-full"
                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                    alt=""
                />
            </div>
            <div className="mt-6 border-t border-gray-100">

                <dl className="divide-y divide-gray-100">
                    <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                        <dt className="text-sm font-medium leading-6 text-gray-900">Full name</dt>
                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                            { session?.user?.name ?? 'Name not available' }
                        </dd>
                    </div>
                    <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                        <dt className="text-sm font-medium leading-6 text-gray-900">Email address</dt>
                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                            { session?.user?.email ?? 'Email not available' }
                        </dd>
                    </div>
                </dl>

            </div>
        </div>
    )
}

However, the AccountSettings component tells me that session is not a correct prop to use there. Can you help me figure out how to do it? If this code is not the right way to do it, please, feel free to suggest your own version. Just, keep in mind the tooling that I'm using (described above).

Many thanks!

Answer 1

According to https://next-auth.js.org/configuration/nextjs#in-getserversideprops you can use getServerSession to get the session and pass it to the component by returning it

import { authOptions } from 'pages/api/auth/[...nextauth]'
import { getServerSession } from "next-auth/next"

export async function getServerSideProps(context) {
  const session = await getServerSession(context.req, context.res, authOptions)

  if (!session) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }

  return {
    props: {
      session,
    },
  }
}