getSession({req}) not working in api route

[louisjrdev]

Question 💬

Hello!

I have an api route which I am trying to protect by getting the session using const session = await getSession({req}).

However, it always returns null; Any help diagnosing the issue here is much appreciated, I have looked through the example app and I really can't see what I am doing differently that would cause this.

How to reproduce ☕️

My api route is as follows:

import { getSession } from "next-auth/react";

const { CosmosClient } = require("@azure/cosmos");

export default async (req, res)  => {
    const session = await getSession({req});
    console.log(session); //null
}

[...nextauth].js

import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"

export default NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    })
  ],
})

_app.js

import { SessionProvider } from "next-auth/react"
import { useSession, signIn, signOut } from "next-auth/react"

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

function User() {
  const { data: session } = useSession()
  if (session) { 
    return (
      <>        
        Signed in as {session.user.email} <br />        
        <button onClick={() => signOut()}>Sign out</button>      
      </>
    )
  } 
  return (
    <>      
      Not signed in <br />      
      <button onClick={() => signIn()}>Sign in</button>    
    </>
  )
}

It is worth noting that the sign in / sign out works correctly and shows my email when I am logged in at the same time that getSession() in my api route returns null

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[1finedev]

i hope you are not accessing the api using postman or something related ?

[louisjrdev]

@Klin-Coders Nope, just a plain ol' fetch in getServerSideProps of one of my pages

[1finedev]

firstly its is not advised to call your api routes using getServerSideProps...

but do you mind showing how you are using it in getServerSideProps??
to see if i can help maybe?

[louisjrdev]

@Klin-Coders

firstly its is not advised to call your api routes using getServerSideProps...

As far as I can see, this is not discouraged, it is a valid use case and NextJS nor Next Auth mention anything to suggest you cannot / should not do data fetching in getServerSideProps.

This is my function

export async function getServerSideProps(ctx){
    let session = await getSession(ctx);
    console.log("Session", session); // Not null here
    let response = await fetch(process.env.NEXT_PUBLIC_HOST+`/api/orders/getAll?page=${ctx.query.page}`);
    if(response.status == 200){
        var blob = await response.blob();
        var json = await blob.text();
        var responseJson = JSON.parse(json);
        return { props: { data: responseJson, session: session } };
    }else{
        return { props: { data: {}, session: session } };
    }
  }

[1finedev]

I do not see a reason why it should be null, this seems clean
i would log my req object and see if all the necessary credentials are being sent to the api route
sorry i cannot be of much help, lets wait for the pros

but then here is the link to the NextJS docs that explains why you should not call your api routes from getServerSideProps

getServerSideProps or API Routes

It can be tempting to reach for an API Route when you want to fetch data from the server, then call that API route from getServerSideProps. This is an unnecessary and inefficient approach, as it will cause an extra request to be made due to both getServerSideProps and API Routes running on the server.

Take the following example. An API route is used to fetch some data from a CMS. That API route is then called directly from getServerSideProps. This produces an additional call, reducing performance. Instead, directly import the logic used inside your API Route into getServerSideProps. This could mean calling a CMS, database, or other API directly from inside getServerSideProps.

[vince844]

Unless someone wants to hide the real api url

[louisjrdev]

@Klin-Coders That is actually helpful, perhaps next-auth just doesn't support getSession() when calling the api route from getServerSideProps.

I have instead moved my CRUD code to a service, for which I can call in getServerSideProps and when I need to make client side calls (useEffect) I still hit an API endpoint, but just re-use the service I wrote.

Thank you! It would still be good to get an answer however, on whether the initial scenario i was trying should be possible.

[1finedev]

yes we wait, maybe others will have a better insight

[balazsorban44]

This should work as expected. See:

https://next-auth-example.vercel.app/api-example

https://github.com/nextauthjs/next-auth-example/blob/main/pages/api/examples/session.ts

@Klin-Coders is correct though #4620 (comment)

We are working on a better API that does not rely on fetching API routes, as it can degrade performance as outlined in the Next.js docs: https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props#getserversideprops-or-api-routes

There is a currently undocumented getServerSession exported from next-auth/next, but we might still iterate on the API before marking it stable. See also: #1535

[louisjrdev]

@balazsorban44 I am not seeing anywhere in the example where getServerSideProps is making a call to a protected api endpoint with a getSession() call in it, am I missing something? I think that exact use case is where it is failing.

I did give the getServerSession a try, but that also did not work.

Thank you

[balazsorban44]

The initial description/issue title did not mention getServerSideProps.

A reproduction repository would be very heplful.

[louisjrdev]

Hi @balazsorban44 please take a look at this repro https://github.com/louisjrdev/next-auth-bug-repro visit http://localhost:3000/api-example and username of admin and password of pass. It is based on the next-auth example project with minor tweaks to reproduce the issue I am having.

[louisjrdev]

You should see somthing like this

[iMrDJAi]

Similar issue here with getToken({req}): #4640

[reebalazs]

For the record, I had a similar scenario. I upgraded from 4.1.0 => 4.23.1 and the code working earlier, suddenly broke with getSession returning null on the server. (I use this code to explicitly check the user permissions from the api routes.)

I replaced all getSession calls in the api routes to getServerSession and it fixed my problem.

@balazsorban44 I'm not sure if this can be considered a regression or this is as-it-should-work, the documentation hints that it's better to use getServerSession in the API routes but also that getSession should work as well, unless I misunderstood. But even if it's not the case and getServerSession should be enforced server-side, it would be fine, it would be just good to know for sure.

[Inzendis]

Im having issues for the API route.

import { getServerSession } from "next-auth";
import { options } from "@/api/auth/[...nextauth]/options";
export async function GET(request: Request, response: Response) {
  try {
    const session = await getServerSession(request, response, options);

Argument of type '[Request, Response, AuthOptions]' is not assignable to parameter of type
'GetServerSessionParams<AuthOptions>'.
Type '[Request, Response, AuthOptions]' is not assignable to type '[IncomingMessage & { cookies: Partial<{ [key: string]:
string; }>; }, ServerResponse<IncomingMessage>, AuthOptions] | [...]' 

On pages I do:
const data = await getServerSession(options);
And works great, but for API it is giving me errors. And if I try the middleware way, I get another error

 SyntaxError: Unexpected token < in JSON at position 0
  at JSON.parse (<anonymous>)
  at AsyncResource.runInAsyncScope (node:async_hooks:203:9)

      async function getPersonalInfoSettings(id: string) {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/userPersonalInfoSettings?id=${id}`,
    { cache: "no-cache", method: "GET" }
  );

  if (!response.ok) {
    throw new Error("failed to fetch user");
  }
  return response.json();
}

Im very new to this, but I need a way to protect my API routes.

The api routes fetch works as intended if I drop all protection.

[Inzendis]

I fixed it, maybe. Had to do some digging.

const getSession = async () => {
  const session = await getServerSession(options);
  console.log("hello", session?.user?.email);
  return session?.user;
};
export async function GET(request: NextRequest, response: NextRequest) {
  try {
    const session = await getSession();
    if (!session) {
      return NextResponse.json({ error: "No session" }, { status: 500 });
    }
    const { searchParams } = new URL(request.url);

So use getServerSession like normal.

And in the Server Component (Next.JS 13 App Dir)

import { headers } from "next/headers";
async function getPersonalInfoSettings(id: string) {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/userPersonalInfoSettings?id=${id}`,
    { cache: "no-cache", method: "GET", headers: headers() }
  );

  if (!response.ok) {
    throw new Error("failed to fetch user");
  }
  return response.json();
}

You need to pass the headers. Im no expert but you need to pass the headers because they are in the client side not server side.

[vince844]

This worked for me as well. Many thanks 👍

[PrasanthCoder]

This worked for me. Thank you very much. I wasted a lot of hours on this.

[tahsinamio]

This worked for me after many hours. These stuff should not be this quirky.