title: NextAuth: JWT callback returning object
body: <p>I've working in a project with <strong>Next.js (11.1.2) + NextAuth (^4.0.5) + Strapi(3.6.8)</strong>.</p>
  <p>I'm using Next Auth credentials provider and it's working fine. But I need to access a few user information using <code>session</code>, so I tried to do this using <code>jwt</code> and <code>session</code> callbacks.</p>
  <p>When I log response from strapi inside <code>authorize()</code>, I receive <code>{ jwt:{}, user:{} }</code>, so it's ok.</p>
  <pre><code>//[...nextauth.js]
  
  async authorize(credentials, req) {
          try {
            const { data } = await axios.post(process.env.CREDENTIALS_AUTH_URL, credentials)
            if (data) {
              //console.log('data: ', data) //this is ok
              return data;
            }
            else {
              return null;
            }
          } catch (e) {
            return null;
          }
  },
  </code></pre>
  <p>But, in <code>jwt</code> callback, when I log <code>token</code>, i'm getting a bizarre obj with <code>{token:{token:{token:{...}}}</code>:</p>
  <pre><code>// [...nextauth.js] callback:{ jwt: async (token) =&gt; { console.log(token) }}
  
  token: {
    token: {
      token: {},
      user: {
        jwt: ...,
        user: [Object]
      },
      account: { type: 'credentials', provider: 'credentials' },
      isNewUser: false,
      iat: ...,
      exp: ...,
      jti: ...
    }
  }
  </code></pre>
  <p>And <code>account</code> and <code>user</code> is always undefined inside that callbacks.</p>
  <p>Finally, when I get <code>session</code> from <code>useSession</code> in a page, I get this:</p>
  <pre><code>// console.log(session) in any page
  
  { 
    session: {
      expires: &quot;2022-01-12T19:27:53.429Z&quot;
      user: {} // empty
    },
    token:{
      token:{
        account: {type: 'credentials', provider: 'credentials'}
        exp: ...
        iat: ...
        isNewUser: false
        jti: &quot;...&quot;
        token: {} // empty
        user: { //exactly strapi response
           jwt:{...}
           user:{...}
        }
      }
    }
  }
  
  </code></pre>
  <p>All examples I've found aren't handling this objects with this confuse structure and I don't know if I missing something out. Can you help me?</p>
  <p>This is my <code>[...nextauth].js</code>:</p>
  <pre><code>import NextAuth from &quot;next-auth&quot;
  import CredentialsProvider from 'next-auth/providers/credentials'
  import axios from 'axios';
  
  export default NextAuth({
    providers: [
      CredentialsProvider({
        name: '...',
        credentials: {
          email: {label: &quot;Email&quot;, type: &quot;text&quot;, placeholder: &quot;email@provider.com&quot;},
          password: {  label: &quot;Password&quot;, type: &quot;password&quot; },
        },
        async authorize(credentials, req) {
  
          try {
            const { data } = await axios.post(process.env.CREDENTIALS_AUTH_URL, credentials)
            if (data) {
              //console.log('data: ', data)
              return data;
            }
            else {
              return null;
            }
          } catch (e) {
            return null;
          }
        },
      })
    ],
    secret: process.env.SECRET,
    session: {
      strategy: 'jwt',
      maxAge: 30 * 24 * 60 * 60 // 30 days
    },
    jwt: {
      secret: process.env.JWT_SECRET,
      encryption: true,
    },
    callbacks: {
      jwt: async (token, account) =&gt; {
  
        console.log('### JWT CALLBACK ###')
        console.log('token: ', token)
        console.log('account: ', account)
  
        return token;
      },
    
      session: async (session, token, user) =&gt; {
        console.log('### SESSION CALLBACK ###')
        console.log('session: ', session)
        console.log('user: ', token)
        console.log('user: ', user)
  
        return session;
      }
    },
    pages: {
      signIn: '/signin',
      signOut: '/signin',
      error: '/signin'
    }
  })
  </code></pre>