Credentials Provider - [next-auth][error][client_fetch_error]

[dawosch]

Question 💬

I'm playing around with next-auth and the "credentials"-provider.
But i can't get it running.

I want to secure a route by using the getServerSideProps function.

// Path: /pages/dashboard.tsx
import type { GetServerSideProps, NextPage } from 'next';
import { getSession, useSession } from 'next-auth/client';

import styles from '../styles/Home.module.css';

const Dashboard: NextPage = () => {
  const [session, loading] = useSession();

  return <div className={styles.container}>Hello, your Email is {session?.user!.email}</div>;
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  const session = await getSession(context);

  if (!session) {
    return { redirect: { destination: '/', permanent: false } };
  }

  return { props: { session } };
};

export default Dashboard;

But when i try to call this route i get the following error:

[next-auth][error][client_fetch_error] 
https://next-auth.js.org/errors#client_fetch_error session FetchError: invalid json response body at http://localhost:3000/api/auth/session reason: Unexpected token < in JSON at position 0
    at C:\Users\me\workspace\vscode\projects\obot\nextjs\node_modules\node-fetch\lib\index.js:272:32
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5) {
  type: 'invalid-json'
}

Here is my [...nextauth].ts file:

import NextAuth, { User } from 'next-auth';
import Providers from 'next-auth/providers';

export default NextAuth({
  providers: [
    Providers.Credentials({
      name: 'Ogame Credentials',
      credentials: {
        username: { label: 'Username', type: 'text' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials, req) {
        const user: User = { id: 1, name: 'J Smith', email: '[email protected]', image: 'https://google.de' };

        if (user) {
          return user;
        } else {
          return null;
        }
      },
    }),
  ],
  // session: {
  //   jwt: true,
  // },
});

I tried to set the jwt for session too but no luck.
When i call http://localhost:3000/api/auth/session on my browser i get the following response:

{
   "user":{
      "name":"J Smith",
      "email":"[email protected]",
      "image":"https://google.de"
   },
   "expires":"2021-11-05T10:33:20.427Z"
}

But i think the response by fetching it on the client side is different (like the error message indicates it)

Do you have an idea why this is not working?

How to reproduce ☕️

1. yarn create next-app credentials-provider --typescript
2. yarn add next-auth
3. Create /pages/api/auth/[...nextauth].ts with my content
4. Create a .env.local file on the root folder with NEXTAUTH_URL=http://localhost:3000
5. Create a /pages/dashboardts route with my content
6. Use the content from the next-auth doc for the /pages/index.ts for signing in
7. Sign in with any credentials
8. Navigate to the dashboard route by entering the url in the browser: http://localhost:3000/dashboard

The error occures

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[balazsorban44]

You might have some proxy/browser extension set up? Strange if going directly to http://localhost:3000/api/auth/session works, but not when using getSession. The implementation is the same under the hood.

Could you test with different browsers/incognito mode, maybe another PC/network?

[dawosch]

Ok, on my Windows system in Chrome it's not working.
On my Mac it's working fine.

I don't think that it is a browser problem because the problem is on the getServerSideProps function.
And this will be executed on the server side i guess node js server?!

So the question is why its not working on my windows machine...

[dawosch]

Ok, i found the problem.
On my windows system i installed "miniconda" for my python enviroment.

By default when you open a new powershell terminal conda hooks in. Identicatable by the base in front of the powershell line.
After i deactivated conda for powershell everything works fine.

[balazsorban44]

Awesome! 😊

[dawosch]

Thank you very much for your help. Without testing it on another machine i wouldn't find this out.
Thx