Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

calling getToken from GetServerSideProps

See original GitHub issue

Question 💬

Context

I have configured NextAuth to add the account.access_token to my jwt token on login/signup.
I want to pass the token to my data API (separate environment) in GetServerSideProps to get my hands on the data I need to render the page.
I’ve spent a large amount of time trawling the forums, trying to find the answer myself before posting on here.

Problem?

So my problem is that getToken() expects a req param of NextRequest | NextApiRequest, but inside GetServerSideProps the context.req prop has a type of IncomingMessage & { cookies: NextApiRequestCookies }, so understandably it throws the toys when I try and make the call to getToken using it.

Existing Workarounds

To get around this issue, my current bag of options are:

Call getToken with context.req as any - this works fine, but casting to any tears at my soul.
Add account.access_token to the session (in addition to the token) so I can get hold of it via getSession(). This works, but I dislike conceding to add the access token in to more places than it absolutely needs to be.
Call the decode method from next-auth/jwt manually and extract the token.

Question

How should I get hold of the decoded JWT token in GetServerSideProps when using Typescript? I don’t believe for a second that I have exposed any sort of flaw in the NextAuth code, and I doubt I’m the first person to want to do this, so there’s gotta be something obvious I’m missing here.

How to reproduce ☕️

import { GetServerSideProps } from 'next';
import { getToken } from 'next-auth/jwt';

const SomeComponent = (props: { someData: SomeData }) => (
  <div>{props.someData}</div>
);

export const getServerSideProps: GetServerSideProps = async context => {
  const token = await getToken({
    req: context.req,
    secret: SECRET_VALUE,
  });

  const someData = await getSomeData(token?.accessCode);

  return {
    props: {
      someData,
    },
  };
};

export default SomeComponent;