how to custom session field and user field? (CredentialsProvider) [ts language]

Describe the feature

Hi, i’m read doc & try set custom session field and user field

i want set some field in user

{
  accessToken: 'dddddddLZ_pCi1bLqdac3sdfdsfdsfdsfdsf6Jxlw0VyVCzHDopjXuYAviolnA',
  accessTokenExpiresIn: 604800,
  refreshToken: '7c43400b-xxxx-xxxx-xxxx-99b0f91bd570',
  user: {
    id: '7c43400b-xxxx-xxxx-xxxx-99b0f91bd570',
    createdAt: '2021-05-19T17:24:50.579279+07:00',
    displayName: 'test',
    avatarUrl: 'https://s.gravatar.com/avatar/ac44930a62044d038e16f027629b9206?r=g&default=blank',
    locale: 'en',
    email: '[e-mail]',
    isAnonymous: false,
    defaultRole: 'admin',
    metadata: { permissions: ['xx'] },
    emailVerified: true,
    phoneNumber: null,
    phoneNumberVerified: false,
    activeMfaType: null,
    roles: [ 'me', 'user' ]
  }
}

Additional information

No response

[BracketJohn]

Oh damn - yeah, that’s unfortunate. We’ll look into this and improve it! I’ve opened #112 to work on this.

And I will close this issue now, as the original author does not respond anymore. Let’s continue discussion on the typing in #112

[JoaoPedroAS51]

Oh I see, my bad. I read “ts” and misunderstood the question 😅 So, to extend the session with accessToken for example, you must add jwt and session callbacks. And to define the user object, add profile callback to you provider. Something like this:

// file: ~/server/api/auth/[...].ts
export default NuxtAuthHandler({
  ...
  providers: [
    CredentialsProvider({
      ...
      // Here you define user object
      profile(profile, tokens) {
        return {
           ...
        }
      },
    })
  ],
  callbacks: {
   // Props defined here can be accessed in session callback and will be returned by getToken
    jwt: ({ token, account, user }) => {
      if (account && user) {
        token.accessToken = account.access_token
        // The `user` is the data defined in `profile` callback
        token.user = user
      }

      return token
    },
    
    // Session retuned by useSession and getSession
    session: ({ token, session }) => {
      if (token) {
        session.user = token.user
        session.accessToken = token.accessToken
      }

      return session
    },
  },
})

// file: ~/types/next-auth.d.ts
declare module 'next-auth' {
  /*
   * Returned by useSession and getSession
   */
  interface Session {
    accessToken: string
    user: {
      ...
    }
  }

  /*
   * Usually contains information about the provider being used
   * and also extends TokenSet, which is different tokens returned by OAuth Providers.
   */
  interface Account {
    ...
    access_token: string
  }
}

declare module 'next-auth/jwt' {
  /** Returned by the jwt callback and getToken, when using JWT sessions */
  interface JWT {
    ...
    accessToken: string
    user: {
      ...
    }
  }
}

Note: This is not a complete example. To implement refresh token you shoud read https://next-auth.js.org/tutorials/refresh-token-rotation, and to improve type interfaces follow the link of my comment above.

I’m new to next-auth and this is what I tested with KeycloakProvider, but I believe it will work for CredentialsProvider too.