NextAuth - Error: The property 'accessToken' is not found in the 'Session' type

Question

NextAuth - Error: The property 'accessToken' is not found in the 'Session' type

I'm encountering a problem when trying to deploy my application. Building it on my local machine works fine, but the build on GitHub is causing issues.

Just so you know, I am using yarn and yarn build for this project.

After doing some research, it seems like the issue might be related to TypeScript, a mistake that I haven't caught yet, or possibly an incorrect configuration in GitHub CI. It's all a bit unclear...

This is a snippet of my code from [...nextauth].ts

import NextAuth, { NextAuthOptions } from "next-auth"
...
// The rest of the code has been omitted for brevity

The specific error message I'm getting is:

Failed to compile.

./src/pages/api/auth/[...nextauth].ts:99:15
Type error: Property 'accessToken' does not exist on type 'Session'.

   97 |     async session({ session, token }) {
   98 |       session.user = token.user!,
>  99 |       session.accessToken = token.accessToken
      |               ^
  100 |       session.error = token.error
  101 | 
  102 |       return session
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Process completed with exit code 1.

EDIT: Based on the feedback I received, it appears that the issue may be related to the version of next auth being used.

typescript github deployment build next-auth

Answer 1

Answer №1

To begin, create a new folder named types at the root of your project. Inside this folder, add a file called next-auth.d.ts containing the code below:

// my-project/types/next-auth.d.ts

import NextAuth from 'next-auth'

declare module 'next-auth' {
  /**
   * Result provided by `useSession` and `getSession`, also accessible as a prop in the `SessionProvider` React Context
   */
  interface Session {
    accessToken?: string
  }
}

After this step, you can proceed without encountering any errors:

// my-project/pages/api/auth/[...nextauth].ts

export const authOptions: AuthOptions = {
  // ...
  callbacks: {
    async jwt({ token, account }) {
      if (account) {
        token.id_token = account.id_token
        token.provider = account.provider
        token.accessToken = account.access_token
      }
      return token
    },
    async session({ session, token }) {
      session.accessToken = token.accessToken as string
      return session
    },
  }
  // ...
}

Please note that it is possible to define the module inside the [...nextauth].ts file as well.

Additionally, you might need to specify extra properties for the JWT interface:

// my-project/types/next-auth.d.ts

declare module 'next-auth/jwt' {
  interface JWT {
    id_token?: string
    provider?: string
    accessToken?: string
    // ... other properties you may require
  }
}

Answer 2

To begin, create a new folder named types at the root of your project. Inside this folder, add a file called next-auth.d.ts containing the code below:

// my-project/types/next-auth.d.ts

import NextAuth from 'next-auth'

declare module 'next-auth' {
  /**
   * Result provided by `useSession` and `getSession`, also accessible as a prop in the `SessionProvider` React Context
   */
  interface Session {
    accessToken?: string
  }
}

After this step, you can proceed without encountering any errors:

// my-project/pages/api/auth/[...nextauth].ts

export const authOptions: AuthOptions = {
  // ...
  callbacks: {
    async jwt({ token, account }) {
      if (account) {
        token.id_token = account.id_token
        token.provider = account.provider
        token.accessToken = account.access_token
      }
      return token
    },
    async session({ session, token }) {
      session.accessToken = token.accessToken as string
      return session
    },
  }
  // ...
}

Please note that it is possible to define the module inside the [...nextauth].ts file as well.

Additionally, you might need to specify extra properties for the JWT interface:

// my-project/types/next-auth.d.ts

declare module 'next-auth/jwt' {
  interface JWT {
    id_token?: string
    provider?: string
    accessToken?: string
    // ... other properties you may require
  }
}

Answer 3

Answer №2

Encountering a recent problem today led me to devise a solution by extending the DefaultSession type from next-auth:

interface SessionExtension extends DefaultSession {
  accessToken: string;
  refreshToken: string;
}

While this solution may not be applicable to all scenarios, I hope it proves helpful!

Edit: Further Details

The issue I encountered was within my apollo.ts file (utilizing Apollo and graphql with a Rails backend). A PR on October 9th, 2022 brought changes to the Default Session interface (

packages/next-auth/src/core/types.ts:423

) modifying it from

export interface DefaultSession extends Record<string, unknown> {...

to

export interface DefaultSession {...

. This alteration removed the extension capability from Record<string, unknown> in the DefaultSession interface, preventing us from customizing the provided type definition. By adjusting our code as follows:

import { type DefaultSession } from 'next-auth';

...

interface SessionExtension extends DefaultSession {
  accessToken: string;
  apiToken: string;
  refreshToken: string;
}

...


const session = (await getSession()) as SessionExtension;

...

We manually modified the properties allowed by Default Session to access additional necessary fields.

Answer 4

Encountering a recent problem today led me to devise a solution by extending the DefaultSession type from next-auth:

interface SessionExtension extends DefaultSession {
  accessToken: string;
  refreshToken: string;
}

While this solution may not be applicable to all scenarios, I hope it proves helpful!

Edit: Further Details

The issue I encountered was within my apollo.ts file (utilizing Apollo and graphql with a Rails backend). A PR on October 9th, 2022 brought changes to the Default Session interface (

packages/next-auth/src/core/types.ts:423

) modifying it from

export interface DefaultSession extends Record<string, unknown> {...

to

export interface DefaultSession {...

. This alteration removed the extension capability from Record<string, unknown> in the DefaultSession interface, preventing us from customizing the provided type definition. By adjusting our code as follows:

import { type DefaultSession } from 'next-auth';

...

interface SessionExtension extends DefaultSession {
  accessToken: string;
  apiToken: string;
  refreshToken: string;
}

...


const session = (await getSession()) as SessionExtension;

...

We manually modified the properties allowed by Default Session to access additional necessary fields.

Answer 5

Answer №3

It seems like the issue might be with the jwt callback. You can try rearranging the props in the following order:

async jwt({ token, account, user }) {
  // Initial sign in
  if (account && user) {
    return {
      accessToken: account.access_token,
      accessTokenExpires: Date.now() + account!.expires_at! * 1000,
      refreshToken: account.refresh_token,
      user,
    }
  }

  // Return previous token if the access token has not expired yet
  if (Date.now() < token.accessTokenExpires!) {
    return token
  }

  // Access token has expired, try to update it
  return refreshAccessToken(token)
}

Answer 6

It seems like the issue might be with the jwt callback. You can try rearranging the props in the following order:

async jwt({ token, account, user }) {
  // Initial sign in
  if (account && user) {
    return {
      accessToken: account.access_token,
      accessTokenExpires: Date.now() + account!.expires_at! * 1000,
      refreshToken: account.refresh_token,
      user,
    }
  }

  // Return previous token if the access token has not expired yet
  if (Date.now() < token.accessTokenExpires!) {
    return token
  }

  // Access token has expired, try to update it
  return refreshAccessToken(token)
}

NextAuth - Error: The property 'accessToken' is not found in the 'Session' type

Answer №1

Answer №2

Answer №3

Similar questions

Setting up NestJs with TypeORM by utilizing environment files

How can I call a method from a class using Typescript when getting an error saying that the property does not exist on the

Setting the default value for ngModel does not receive any information from the model

What are the necessary steps to launch Next.js without relying on Vercel's platform?

What is the best way to automatically build a Single Page Application when deploying to Heroku?

Is there a way for me to access the user's gender and birthday following their login using their Google account details?

Updating the value in React context does not result in the value being updated

The error message indicated that a Promise<string> was expected, but instead a Promise<string|number> was received

Having trouble with the removeEventListener OnDestroy not functioning properly in Angular 6 using Javascript?

A guide on including a class to a DOM element in Angular 6 without relying on Jquery

Can a substring within a string be customized by changing its color or converting it into a different HTML tag when it is defined as a string property?

In React, the edit mode fails to display class attributes

Utilizing ReactJS and TypeScript to retrieve a random value from an array

When attempting to access http://localhost:3000/traceur in Angular 2 with the angular-in-memory-web-api, a 404 (Not Found) error

React / NextJS: Repeating Audiowave Component

Issue encountered when attempting to access disk JSON data: 404 error code detected

Module or its corresponding type declarations not found in the specified location.ts(2307)

When using Typescript type aliases, make sure to let Intellisense display the alias name instead of the source

ParcelJs is having trouble resolving the service_worker path when building the web extension manifest v3

Displaying data on the user interface in Angular by populating it with information from the form inputs