getSession() not working in a graphql endpoint with apollo-server-micro

[JulianBuse]

Question 💬

Hi,

I'm setting up a project with next.js next-auth and graphql, but next-auth can't authenticate requests with getSession to the graphql endpoint. It works fine everywhere else, and the problem only appears when deployed to vercel, not when developing locally. I presume this has to do with how micro handles requests, and that the interface is different. What can I do to get it working. Can I pass the token manually? I did not find a function that authenticated a token manually.

import { ApolloServerPluginLandingPageGraphQLPlayground, ContextFunction } from 'apollo-server-core';
import { PrismaClient } from '@prisma/client';
import { graphqlSchema } from './../../graphql/schema';
import { ApolloServer } from "apollo-server-micro"
import { PageConfig } from 'next';
import Cors from "micro-cors"
import { Context, context } from '../../graphql/context';
import { getSession } from 'next-auth/react';
import prisma from '../../lib/prisma';
import { MicroRequest } from 'apollo-server-micro/dist/types';

const server = new ApolloServer({
    schema: graphqlSchema,
    context: async (ctx: {req: MicroRequest}): Promise<Context> => {
        const session = await getSession(ctx)
        console.log("GRAPHQL_SESSION", session)
        return {prisma, session}
    }
})

const startServer = server.start()

export const config: PageConfig = {
    api: {
        bodyParser: false
    }
}

const cors = Cors()

export default cors(async (req, res) => {
    if (req.method === "OPTIONS") {
        res.end();
        return false;
      }
    
      await startServer;
      await server.createHandler({ path: "/api/graphql" })(req, res)
})

How to reproduce ☕️

You can clone the repo at https://github.com/JulianBuse/todo.

There are a few environment variables that need to be filled out in .env:
a prisma compatible mysql database url: DATABASE_URL
a secret: SECRET
a github oauth app secret: GITHUB_SECRET
a github oauth app id: GITHUB_ID
and the NEXTAUTH_URL, which in the .env file should just be .env

this will work in local development(at least it does for me), but when I deploy it to vercel, the /api/graphql endpoint does not recognize that I am logged in.

I am developing on an m1 pro macbook.

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[vipinlahoti]

Facing the same issue,getSession is always null in apollo context for loggedin user.

[Mamsheikh]

I am currently facing the same issue. getSession works fine locally but when I deployed to vercel returns null alwayos

[wessankey]

Any chance you reached a resolution on this? I'm running into the same problem (and the selected answer did not fix it for me).

[ephraimduncan]

This isn't a next-auth problem. This is related to the Apollo GraphQL Playground. The playground does not send credentials unless explicitly stated with "request.credentials": "include".

const apolloServer = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [
    ApolloServerPluginLandingPageGraphQLPlayground({
      settings: {
        "request.credentials": "include",
      },
    }),
  ],
  context: async ({ req, res }) => {
    const session = await getSession({ req });

    return { session };
  },
});

[vipinlahoti]

Tried with "request.credentials": "include", still getSession is null
"@apollo/client": "^3.5.9",
"apollo-server-micro": "^3.6.3",
"next-auth": "^4.2.1",

[5starkarma]

Doesn't work for me either

[osvaldovega]

I have the same issue and I tried this possible solution but it is not working.

The version of the packages that I'm using is the following:

"next": "^12.2.2",
"next-auth": "^4.20.1",
"apollo-server-micro": "^3.12.0",
"micro": "^10.0.1",
"micro-cors": "^0.1.1",

For me is clear that when using the getSession function from next-auth in any other part of the Nextjs code the session returns with data but when we pass the req IncomingMessage from the Apollo server micro, something is not there that cause that the session always returns null.

context = async ({ req }: { req: IncomingMessage }) => {
  const session = await getSession({ req });
  console.log('session => ', session);     // return always is null
  return {... };
};

thx

[Marhatta]

Update to node v18

[gaganbiswas]

I was trying to get the session information of the currently logged in user in my ApolloServer context but was getting null as response from the getSession() function. So, I created my own function to basically get the session data from my NextAuth endpoint form the apollo server context.

src/index.ts

context: async ({ req }): Promise<GraphQLContext> => {
  const session = await getServerSession(req.headers.cookie);
  return { session: session as Session, prisma };
}

getServerSession.ts

import fetch from "node-fetch";

export const getServerSession = async (cookie: string) => {
  const res = await fetch('http://localhost/api/auth/session',{
    headers: { cookie: cookie },
  });
  const session = await res.json();
  return session;
};

I hope this helps everyone who is trying to get the session information in apollo server context while using next-auth for authentication purposes.

[itzrizvi]

Hi @gaganbiswas I thought I'd be working on deploy as well. I just deployed my Apollo v4 backend on Render everything works fine but my endpoints are returning "Not Authorized" as I'm not getting any session data. But interesting part is when I try to get it with browser directly like
https://imessage-frontend-henna.vercel.app/api/auth/session I get the session data. In fact I logged the req.headers It has no property called cookie on the headers object.

Can you anyone please help me here?

index.ts

import { ApolloServer } from "@apollo/server";
import { expressMiddleware } from "@apollo/server/express4";
import { ApolloServerPluginDrainHttpServer } from "@apollo/server/plugin/drainHttpServer";
import { ApolloServerPluginLandingPageLocalDefault } from "@apollo/server/plugin/landingPage/default";
import express from "express";
import http from "http";
import cors from "cors";
import pkg from "body-parser";
const { json } = pkg;
import typeDefs from "./graphql/typeDefs";
import resolvers from "./graphql/resolvers";
import { makeExecutableSchema } from "@graphql-tools/schema";
import dotenv from "dotenv";
import { getServerSession } from "./utils/getServerSession";
import { GraphQLContext, Session, SubscriptionContext } from "./utils/types";
import { PrismaClient } from "@prisma/client";
import { WebSocketServer } from "ws";
import { useServer } from "graphql-ws/lib/use/ws";
import { PubSub } from "graphql-subscriptions";
import cookieParser from "cookie-parser";
dotenv.config();

interface MyContext {
  //   token: String;
}

const corsOptions = {
  origin: [
    `${process.env.CLIENT_ORIGIN}`,
    `${process.env.CLIENT_ORIGIN_LOCAL}`,
  ],
  credentials: true,
};
// Context Params
const prisma = new PrismaClient();
// Pubsub
const pubsub = new PubSub();

const app = express();
const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
});

const httpServer = http.createServer(app);

const wsServer = new WebSocketServer({
  server: httpServer,
  path: "/graphql/subscriptions",
});

// WebSocketServer start listening.
const serverCleanup = useServer(
  {
    schema,
    context: (ctx: SubscriptionContext): Promise<GraphQLContext> => {
      if (ctx.connectionParams && ctx.connectionParams.session) {
        const { session } = ctx.connectionParams;
        return Promise.resolve({ session, prisma, pubsub });
      }
      return Promise.resolve({ session: null, prisma, pubsub });
    },
  },
  wsServer,
);

const server = new ApolloServer<MyContext>({
  schema,
  csrfPrevention: true,
  cache: "bounded",
  plugins: [
    {
      async serverWillStart() {
        return {
          async drainServer() {
            await serverCleanup.dispose();
          },
        };
      },
    },
    ApolloServerPluginDrainHttpServer({ httpServer }),
    ApolloServerPluginLandingPageLocalDefault({
      embed: true,
      includeCookies: true,
    }),
  ],
});
await server.start();
app.use(
  "/graphql",
  cors<cors.CorsRequest>(corsOptions),
  cookieParser(),
  json(),
  expressMiddleware(server, {
    context: async ({ req }): Promise<GraphQLContext> => {
      console.log("COOKIE", req.headers.cookie);
      console.log("HEADERS", req.headers);
      const session = await getServerSession(req.headers.cookie);
      //   const session = (await getSession({ req })) as Session | null;
      console.log("INDEX", session);
      return { session: session as Session, prisma, pubsub };
    },
  }),
);

await new Promise<void>((resolve) =>
  httpServer.listen({ port: process.env.PORT }, resolve),
);
console.log(
  `🚀 Server ready at http://localhost:4000/graphql \nTimestamp: ${new Date(
    Date.now(),
  )}`,
);

getServerSession.ts

import fetch from "node-fetch";
export const getServerSession = async (cookie: string) => {
  const res = await fetch(`${process.env.SESSION_URL}`, {
    headers: { cookie: cookie },
  });
  const session = await res.json();
  return session;
};

I have checked the ENV's so many times to see if there's any mistakes. Thanks in advance

[gaganbiswas]

@itzrizvi Have you like checked using any other platforms instead of render?

[itzrizvi]

@gaganbiswas Not yet!! I'll check that too. But I just found cookies from my nextjs client request are not coming to my backend. I think it's for cross domain issue not sure really. On my local it work fine but when I deploy the cookies are not available from my backend. So the issue is not the session function. Issue is on my client I think!!!

[gaganbiswas]

@itzrizvi I have never used render. I had previously used cyclic to deploy my app and everything was working fine. I have even used ngrok and my app was working fine.

I think it's for cross domain issue not sure really.

This might be the case. But I am not really sure. I currently have some more projects, but if I get time will look into the matter and let you know.

[itzrizvi]

@gaganbiswas Thank you for your concern. Have fun!!