What is the procedure to obtain a session object on the server side in next.js version 14?

Question

What is the procedure to obtain a session object on the server side in next.js version 14?

I am currently utilizing version 14 of next.js with its app routing feature and NextAuth.

My goal is to secure the API, however, I encounter a null object when using the getServerSession( authOptions ) method while attempting to access a protected endpoint through Postman at

http://localhost:3000/api/user/clotdcsk0001kvjmg8bvbkxy7

.

I have attempted passing a Bearer Token in the Authorization part of the request, which corresponds to the next-auth.session-token cookie. While this allows me to bypass the middleware protection and reach the endpoint, I still cannot retrieve the session object within the GET method for custom logic.

Below is an excerpt from my /api/user/[id]/route.ts file.

export async function GET ( req : NextRequest, ds : DynamicSegment ) {

   const session = await getServerSession( options )

   console.log(session) //prints null
   
   // Custom logic to handle the request...
  
}

Interestingly, when I employ a similar approach of using the getServerSession method in a page.tsx file to obtain the session object, everything works smoothly (via the explorer). What steps am I overlooking to successfully interact with a session object when making requests from Postman?

javascript session next.js postman next-auth

Answer 1

Answer №1

After some investigation, I learned that the next step in making API requests is to include the cookie for next-auth.session-token when calling from a browser or Postman.

let response = await fetch(`/api/users/${userId}`, {
  method: "GET",
  headers: { 
    "Content-Type": "application/json",
    "Cookie": `next-auth.session-token=${sessionToken};path=/;expires=Session`    
  },
   cache: 'no-store',
});

The sessionToken mentioned above is obtained from

page.tsx

import { cookies } from 'next/headers'
   
   // ...
   
   // Accessing the sessionToken object
   const cookieStore = cookies()
   let sessionTokenCookie = cookieStore.get('next-auth.session-token')
   let sessionToken = sessionTokenCookie.value;

Answer 2

After some investigation, I learned that the next step in making API requests is to include the cookie for next-auth.session-token when calling from a browser or Postman.

let response = await fetch(`/api/users/${userId}`, {
  method: "GET",
  headers: { 
    "Content-Type": "application/json",
    "Cookie": `next-auth.session-token=${sessionToken};path=/;expires=Session`    
  },
   cache: 'no-store',
});

The sessionToken mentioned above is obtained from

page.tsx

import { cookies } from 'next/headers'
   
   // ...
   
   // Accessing the sessionToken object
   const cookieStore = cookies()
   let sessionTokenCookie = cookieStore.get('next-auth.session-token')
   let sessionToken = sessionTokenCookie.value;

Answer 3

Answer №2

Feel free to experiment with the following code snippet:

// Utilizing NextAuth
export const handler = NextAuth(customAuthOptions);
export { handler as GET, handler as POST };

// Implementing in page.js 
import { customAuthOptions } from "../api/auth/[...nextauth]/route";

const userSession = await getServerSession(customAuthOptions);

Answer 4

Feel free to experiment with the following code snippet:

// Utilizing NextAuth
export const handler = NextAuth(customAuthOptions);
export { handler as GET, handler as POST };

// Implementing in page.js 
import { customAuthOptions } from "../api/auth/[...nextauth]/route";

const userSession = await getServerSession(customAuthOptions);

What is the procedure to obtain a session object on the server side in next.js version 14?

Answer №1

Answer №2

Similar questions

The click event will not be triggered if the element is removed by my blur event

Pattern for Ajax callback in Javascript

Problem with Metadata Changes in Next.js: Metadata Getting Reset After Rebuilding .next Directory

Ways to showcase information from an angular service

To combine arrays A and B within a React useState object, simply pass them as arguments when initializing the state

CORS blocking Axios POST request to Heroku causing a Network Error 503

Error encountered when trying to access children components in Typescript, even though React.FC is being

Issue with third-party react module (effector) causing Webpack error

Sending a sound recording to the express js server with the help of multer

Tips for converting a date string to a date object and then back to a string in the same format

Error message: "An issue occurred: Unable to access undefined properties (specifically, borderRadius) in MUI react."

What is the best way to display an alert when the button is clicked repeatedly?

Is it possible to utilize the layout of a parent route for the loading screen of a sub route?

Using Javascript outside of the AngularJS environment

tips for navigating through an AngularJS $resource instance

What is the best way to indicate a particular element within a subdocument array has been altered in mongoose?

Using Vue's $emit method within a Promise

What is the best method for integrating UL / LI into JSON to HTML conversion?

Using a pool.query with async/await in a for-of loop for PostgreSQL

Adding a fresh element to an object array in TypeScript