title: Problem using Next-Auth with Credentials Provider for authenticating on existing system
body: <p>I am using Next-Auth Credentials provider to authenticate using our existing API.
  When I follow the directions on <a href="https://next-auth.js.org/configuration/callbacks" rel="nofollow noreferrer">https://next-auth.js.org/configuration/callbacks</a>
  like this:</p>
  <pre><code>callbacks: {
          async jwt({ token, user }) {
              if (user) {
                  token.accessToken = user.jwt
              }
  
              return token
          },
          async session({ session, token, user }) {
              session.accessToken = token.accessToken
              return session
          }
      }
  
  </code></pre>
  <p>the resulting session object from useSession() looks like this:</p>
  <pre><code>{
    expires: &quot;2022-03-22T18:29:02.799Z&quot;,
    user: {email: 'john@nextIsGreat.com'}
  }
  </code></pre>
  <p>I can't use that as it does not have the token available.</p>
  <p>So I was able to make up my own working solution, but it is kind of strange because of the way things are grouped together. Here is what I am doing now, that I am trying to figure out how to do better. I use comments to point out the problem areas:</p>
  <p>[...nextauth].js:</p>
  <pre><code>
  import NextAuth from 'next-auth'
  import Credentials from 'next-auth/providers/credentials'
  import axios from 'axios'
  
  export default NextAuth({
      providers: [
          Credentials({
              name: 'Email and Password',
              credentials: {
                  username: { label: 'Username', type: 'text', placeholder: 'jsmith' },
                  password: { label: 'Password', type: 'password' }
              },
              authorize: async (credentials) =&gt; {
                  const url = process.env.API_URL + '/authenticate'
                  const result = await axios.post(url, {
                      username: credentials.username,
                      password: credentials.password
                  })
  
                  const user = result.data
  
                  console.log(user)
                  //It logs this:
                  /*
                    {
                      jwt: 'eyJhbasU1OTJ9.NQ356H4Odya62KmN...', //&lt;---***This is the token i pass in to all of my API calls****
                      user: {
                              userId: 207,
                              email: 'john@nextIsGreat.com',
                              firstName: 'John',
                              lastName: 'Doe',
                              roleId: 1,
                      }
                   }
                 */
  
                  if (user) {
                      return Promise.resolve(user)
                  } else {
                      return Promise.resolve(null)                
                  }
              }
          })
      ],
  
      callbacks: {
          async jwt({ token, user }) {
              if (user) {
                  if (user.jwt) {
                      token = { accessToken: user.jwt, restOfUser: user.user }
                  }
              }
  
              return token
          },
          async session(seshProps) {
              return seshProps
          }
      }
  })
  
  
  </code></pre>
  <p>Home.js:</p>
  <pre><code>
  export const Home = () =&gt; {
  
      const { data: session } = useSession()
      
      console.log(session)
      //LOGS THIS ---&gt;
        /*
        {
          &quot;session&quot;: { &quot;user&quot;:{}, &quot;expires&quot;:&quot;2022-03-22T17:06:26.937Z&quot;},
          &quot;token&quot;:{
                  &quot;accessToken&quot;:&quot;eyJ...&quot;,
                  &quot;iat&quot;:1645376785,
                  &quot;exp&quot;:1647968785,
                  &quot;jti&quot;:&quot;41636a35-7b9a-42fd-8ded-d3dfgh123455a&quot;
                  &quot;restOfUser&quot;: {
                      &quot;userId&quot;:207,
                      &quot;email&quot;:&quot;john@nextIsGreat.com&quot;,
                      &quot;firstName&quot;:&quot;John&quot;,
                      &quot;lastName&quot;:&quot;Doe&quot;,
                      &quot;roleId&quot;:1
                  }
          }
        {
       */
  
      const getPosts=()=&gt; {
         const url = 'localhost:4000/posts'
         const {data} = axios.get(url, {
            Authorization: session.token.accessToken   &lt;--**This is the way I am calling my API
         })
         console.log(data)
      }
      
      return (
          &lt;div onClick={getPosts}&gt;
              Hello, {session.token.restOfUser.firstName}
  /* I have to access it like this now, which seems wrong ***** */
      
          &lt;/div&gt;
      )
  }
  
  
  </code></pre>