I'm curious about the location of the definition for pageProps.session in Next-Auth

Question

I'm curious about the location of the definition for pageProps.session in Next-Auth

Upon reviewing the snippet

import { SessionProvider } from "next-auth/react"
export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

Can you explain the purpose of the session prop and where it is assigned?

typescript next.js next-auth

Answer 1

Answer №1

It may seem surprising, but when a page component includes a function called getServerSideProps, the properties within this function are expected to be passed as props to the page component itself. An example of this can be seen below:

export async function getServerSideProps(context) {
  return {
    props: { foo:'Hello!' },
  }
}

export default function PageComponent(props) {
  return <div>{ props.foo /* = "Hello!" */ }</div>;
}

The unexpected aspect is that these generated props are actually passed to the _app.tsx (or _app.jsx) component as pageProps.

In essence, the structure of the getServerSideProps should follow a pattern similar to the one illustrated below:

import { unstable_getServerSession } from "next-auth/next"
import { authOptions } from "../api/auth/[...nextauth]"

export async function getServerSideProps({ req, res }) {
   const session = await unstable_getServerSession(req, res, authOptions)

   return {
      props: {
         session
      }
   };
}

Answer 2

It may seem surprising, but when a page component includes a function called getServerSideProps, the properties within this function are expected to be passed as props to the page component itself. An example of this can be seen below:

export async function getServerSideProps(context) {
  return {
    props: { foo:'Hello!' },
  }
}

export default function PageComponent(props) {
  return <div>{ props.foo /* = "Hello!" */ }</div>;
}

The unexpected aspect is that these generated props are actually passed to the _app.tsx (or _app.jsx) component as pageProps.

In essence, the structure of the getServerSideProps should follow a pattern similar to the one illustrated below:

import { unstable_getServerSession } from "next-auth/next"
import { authOptions } from "../api/auth/[...nextauth]"

export async function getServerSideProps({ req, res }) {
   const session = await unstable_getServerSession(req, res, authOptions)

   return {
      props: {
         session
      }
   };
}

I'm curious about the location of the definition for pageProps.session in Next-Auth

Answer №1

Similar questions

Tips for utilizing the keyword 'this' within a Promise

Typescript constructor that accepts an object as an argument instead of traditional parameters

Karma Test Requirement: make sure to incorporate either "BrowserAnimationsModule" or "NoopAnimationsModule" when using the synthetic property @transitionMessages within your application

Angular 4: activating a function from a template

Unable to generate webpage source code

How come the JavaScript map() function displays my feature when the forEach() function didn't work? This issue arises while working with React and Next

Why does the Angular page not load on the first visit, but loads successfully on subsequent visits and opens without any issues?

What is the correct method for performing a PUT request in the latest NextJS 13.4 API? (Response, NextAPIResponse, NextResponse) with the updated App Router implementation

Mapping intricate entities to intricate DTOs using NestJS and TypeORM

Error: The JSON file cannot be located by the @rollup/plugin-typescript plugin

Limit the keys in TypeScript to only the elements of an array

Theme customization in Material UI includes the addition of a custom color. However, this custom color is missing from the control values in Story

Accessing external data in Angular outside of a subscription method for an observable

How can I dynamically replace a specific element inside a .map() function with a custom component when the state updates, without replacing all elements at once?

Angular 2: Emptying input field value on click event

When iterating through a table, an error occurs stating that the property "rows" is not available on type HTMLElement (

Utilize Next.js to send an image to an email by leveraging the renderToString function on the API routes

Exploring the differences between Typescript decorators and class inheritance

When attempting to declare a functional component in React utilizing styled-components in TypeScript, an error is encountered stating "No overload matches this call."

Can a Typescript class type be defined without explicitly creating a JavaScript class?