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

Does Typescript fail to recognize the "delete" operator?

"Error: The React TypeScript variable has been declared but remains

Guide on validating multiple preselected checkboxes using Angular 8 reactive forms

Show all span elements in a map except for the last one

transition from mapStateToProps to using hooks

filter failing to provide output

How to eliminate file nesting in Visual Studio 2017

Upon completion of a promise in an express middleware and breaking out of a loop, a 404 error is returned

Is it possible to manipulate an Angular #variableName in order to retrieve an ElementRef for an HTML element?

Update the TemplateUrl according to the URL Parameters (GET)

Disallow the use of properties in a nested interface

Angular 16 - ALERT! FirebaseError: The first argument passed to the collection() function must be either a CollectionReference, a DocumentReference, or FirebaseFirestore

What is the method for creating an object type that necessitates a key determined by a variable?

Updating data in Angular reactive forms using asynchronous dropdowns

- "Is it possible to extract values from an optional variable?"

Unable to utilize React Icons component as an object value in typescript

Is it possible to utilize Typescript and Browserify in tandem?

Using scrollIntoView() in combination with Angular Material's Mat-Menu-Item does not produce the desired result

Error TS2322: Cannot assign type 'Promise<Hero | undefined>' to type 'Promise<Hero>'

What is the process to install a npm module from Github and compile it?