title: NextAuth Credentials returns null after successfully fetch data
body: <p>Currently I'm  having trouble implementing <code>next-auth</code> <strong>credentials provider</strong> into my system.</p>
  <p>I'm using <code>axios</code> (<strong>to a different localhost</strong>) to <em>verify</em> the <strong>credentials</strong> (email &amp; password).</p>
  <ul>
  <li><strong>Nextjs</strong> system run in <code>http://localhost:3000</code></li>
  <li><strong>Node Server</strong> run in <code>http://localhost:5400</code></li>
  </ul>
  <h3>These are <strong>the problems</strong> I'm currently facing:-</h3>
  <ol>
  <li>after <strong>successful login</strong>, I was <strong>redirect</strong> to <code>http://localhost:5400</code> (blank screen). This is true even when I <code>logout</code> from the system. it still redirect me to the same url.</li>
  <li>even after <strong>successful login</strong>, <code>user</code> returns <code>null</code>. The only data I get from the <code>session</code> is <code>expires</code></li>
  </ol>
  <p>My current code now:-</p>
  <ul>
  <li>demo button to call <code>signIn</code> &amp; <code>signOut</code>:-</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>// in homepage (pages/home.js)
  import { signIn, signOut, useSession } from 'next-auth/client'
  
  export default Homepage = () =&gt; {
    const [ session ] = useSession()  
    console.log(session) 
    // returns 'null' (when not login yet)
    // returns { expires: &quot;2021-06-28T08:59:47.504Z&quot;, user: { name: null, email: null, image: null, _proto_: Object }, _proto_: Object } after successful login  
  
    return (
      &lt;&gt;
         {!session ? 
          &lt;&gt;
            Sign-in to continue
            &lt;button onClick={() =&gt; {
              signIn('credentials', 
              { 
                email: 'mohdfathi_mhdnoor@yahoo.com', 
                password: 'qwer1234', 
                callbackUrl: `${window.location.origin}/about` 
              })
              }}&gt;SignIn&lt;/button&gt;
          &lt;/&gt; 
        :
          &lt;&gt;
            {session.user.email}
            &lt;button onClick={() =&gt; signOut()}&gt;SignOut&lt;/button&gt;
          &lt;/&gt;
        
        }
      &lt;/&gt;
  }
  </code></pre>
  <ul>
  <li><code>[...nextauth].js</code>:-</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>import axios from 'axios'
  import NextAuth from 'next-auth'
  import Providers from 'next-auth/providers'
  import { config } from '../../../src/utils/Header'
  
  export default NextAuth({
    providers: [
      Providers.Credentials({
        name: 'Portfolio V4 Credentials',
        credentials: {
          email: { label: &quot;Email&quot;, type: &quot;email&quot;, placeholder: &quot;Please enter an email&quot; },
          password: { label: &quot;Password&quot;, type: &quot;password&quot;, placeholder: &quot;Please enter a password&quot; }
        },
        async authorize(credentials, req) {
          try {
            const res = await axios.post(
              process.env.REACT_APP_SERVER_ENDPOINT_HOST + &quot;/api/auth/callback/credentials&quot;, 
              { uid: '', email: credentials.email, password: credentials.password },
              config
            )
            const user = await res
            
            if (user.data.success) {
              console.log(user.data) // this logouts { success: true, data: { uid: '5f8fc26c6a103b243428bec1', sato: 1622295126589 } }
              return user.data
            }
          } catch (e) {
            console.log('Error: ')
            console.log(e)
            return null
          }
        }
      })
    ]
  })
  </code></pre>
  <p>I did change the content of <code>user</code> to what I get from the <code>server</code>. But it didn't <strong>reflect</strong> at all what's in the <code>session</code> I <code>console.log</code> above. It still <code>console.log</code>:-</p>
  <pre><code>{
    expires: &quot;2021-06-28T08:59:47.504Z&quot;,
    user: {
      email: null,
      image: null,
      name: null,
      _proto_: Object
    },
    _proto_: Object
  }
  </code></pre>