Error implementing NextAuth credentials with custom login and backend

I am implementing NextAuth with my NextJS(GraphQL) app. I have this error:

Unhandled Runtime Error
TypeError: Cannot use 'in' operator to search for 'credentials' in null

The network error also shows:

Error: HTTP GET is not supported for /api/auth/session

Error: HTTP GET is not supported for /api/auth/providers

I am not making a GET request anywhere I know. My code is below:

pages/api/[...nextauth.js]

const providers = [
  Providers.Credentials({
    name: 'Credentials',
    authorize: async (credentials) => {
      try {
        const user = await <GraphQL Logic to fetch user>

        if (user) {
          return {status: 'success', data: user.data.user}
        } 
      } catch (e) {
        const errorMessage = e.response.data.message
        // Redirecting to the login page with error messsage in the URL
        throw new Error(errorMessage + '&email=' + credentials.email)
      }

    }
  })
]

const callbacks = {
  async jwt(token, user) {
    if (user) {
      token.accessToken = user.data.token
    }

    return token
  },

  async session(session, token) {
    session.accessToken = token.accessToken
    return session
  }
}

const options = {
  providers,
  callbacks,
  pages: {
    error: '/login' // Changing the error redirect page to our custom login page
  }
}

export default (req, res) => NextAuth(req, res, options)

pages/login.js

<form onSubmit={(e) => handleLogin(e)}>
            <input value={email} onChange={(e) => setEmail(e.target.value)} />
            <input type='password' value={password} onChange={(e) => setPassword(e.target.value)} />
            <button type='submit' disabled={isLoginStarted}>Log In</button>
          </form>

handleLogin method

const handleLogin = (e) => {
    e.preventDefault()
    setIsLoginStarted(true)
    signIn('credentials',
      {
        email,
        password,
        callbackUrl: `${window.location.origin}/welcome`
      }
    )
  }