Next-auth offers typings for the parameters of callback functions

Question

Next-auth offers typings for the parameters of callback functions

When utilizing next-auth with TypeScript, I am attempting to define callback functions for jwt and session as shown below.

callbacks: {
async jwt({ token, account }) {
  if (account) {
    token.accessToken = account.access_token
  }
  return token
},
async session({ session, token, user }) {
  console.log('jwt callback')
  // Send properties to the client, like an access_token from a provider.
  session.accessToken = token.accessToken
  return session
},

}, However, TypeScript is presenting type errors for the parameters of these functions. Is there a method to specify types for them? https://i.sstatic.net/xBzwZ.png

typescript next.js callback next-auth

Answer 1

Answer №1

Here is the solution I implemented:

    callbacks: {
        async jwt({ token, account }: {token: JWT, 
            account: Account}): Promise<JWT> {
            if (account) {
                token.accessToken = account.access_token
            }
            return token
        },
        async session({ session, token, user }: {session: Session, token: JWT, user: User}): Promise<Session>{
            session.accessToken = token.accessToken
            return session
    }

In addition to the above code, you need to define some custom types. You can do this by copying the following code snippet and placing it in types/next-auth.d.ts.

import NextAuth, { Account, DefaultSession, User } from "next-auth"
import { JWT } from "next-auth/jwt"

declare module "next-auth" {
    interface Session {
        accessToken?: Account.accessToken
    }
}


declare module "next-auth/jwt" {
    interface JWT {
        accessToken?: Account.accessToken
    }
}

Explanation: Essentially, we utilize existing types provided by next-auth like Session, JWT, and Account. However, these types might not have all the required properties, hence the need for augmentation.

Answer 2

Here is the solution I implemented:

    callbacks: {
        async jwt({ token, account }: {token: JWT, 
            account: Account}): Promise<JWT> {
            if (account) {
                token.accessToken = account.access_token
            }
            return token
        },
        async session({ session, token, user }: {session: Session, token: JWT, user: User}): Promise<Session>{
            session.accessToken = token.accessToken
            return session
    }

In addition to the above code, you need to define some custom types. You can do this by copying the following code snippet and placing it in types/next-auth.d.ts.

import NextAuth, { Account, DefaultSession, User } from "next-auth"
import { JWT } from "next-auth/jwt"

declare module "next-auth" {
    interface Session {
        accessToken?: Account.accessToken
    }
}


declare module "next-auth/jwt" {
    interface JWT {
        accessToken?: Account.accessToken
    }
}

Explanation: Essentially, we utilize existing types provided by next-auth like Session, JWT, and Account. However, these types might not have all the required properties, hence the need for augmentation.

Next-auth offers typings for the parameters of callback functions

Answer №1

Similar questions

ServiceStack request without the use of quotation marks in the JSON body

Tips for handling external .d.ts dependencies when releasing an NPM package

Setting up subdocuments using Typegoose to initialize models

Creating a functional component in React using TypeScript with an explicit function return type

The problem with the Custom Select Component: Error Arises When Utilizing the Generic Type <T,> with a Comma as Opposed to <T> Without a Comma

Incorporating the selected color scheme into a personalized MUI button design

What is the best way to search for and sort through the data in this particular scenario?

Front-end now handles Axios requests instead of the server

Error: Unable to access 'clientModules' property as it is undefined

What is the correct way to properly parse JSON attributes containing slashes?

The program encountered an issue: Initialization must be completed before utilizing hooks

Encountering an issue with importing an enum: An error is triggered stating 'Variable implicitly has type 'any' in certain areas where its type remains undetermined.'

Mapping of generic types in typescript

Error when rendering in Next.js

Obtain the promise value before returning the observable

Automated Excel Script for Deleting Rows Containing Highlighted Cells

Using SCSS variables in TypeScript inside a Vue project

Unrestricted Angular Audio Playback without CORS Restrictions

Executing invisible reCAPTCHA2 in Angular 6: A step-by-step guide

Building custom MDX components with attribute-based data manipulation techniques