[next-auth][error][CLIENT_FETCH_ERROR] Unexpected characater at line 1 column 1 of the JSON data

[koala819]

Environment

System:
OS: Linux 5.10 Ubuntu 20.04 LTS (Focal Fossa)
CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
Memory: 23.05 GB / 24.45 GB
Container: Yes
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
Yarn: 1.22.19 - /usr/bin/yarn
npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
npmPackages:
next: 12.3.0 => 12.3.0
next-auth: ^4.17.0 => 4.17.0
react: 18.2.0 => 18.2.0

Reproduction URL

http://localhost:3000

Describe the issue

Hello there,

I'm trying to implement sign-in option in my next js app. I configure :
.env.local

GOOGLE_ID=
GOOGLE_SECRET=
NEXTAUTH_URL=http://localhost:3000
NEXT_PUBLIC_SECRET=

[...nextauth].js

import NextAuth from 'next-auth'
export default NextAuth({
   providers: [
     GoogleProvider({
          clientId: process.env.GOOGLE_ID,
          clientSecret: process.env.GOOGLE_SECRET
        }),
    ]
})

How to reproduce

I just added next-auth in my existing nextjs app.

Expected behavior

I just want to implement GoogleProvider in my nextjs app.

[wmcb91]

Hi @koala819, you probably made progress on this already, but for folks who stumble across this in the future, I'll explain what needs to be corrected in your setup.

If the code you provided in [...nextauth].js is complete, you are seeing [next-auth][error][CLIENT_FETCH_ERROR] Unexpected characater at line 1 column 1 of the JSON data because the Next API is throwing a 500 error, which is returned as HTML instead of JSON. The 500 error is because GoogleProvider is not defined since it was not imported. Adding the import will fix that error.

import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export default NextAuth({
   providers: [
     GoogleProvider({
          clientId: process.env.GOOGLE_ID,
          clientSecret: process.env.GOOGLE_SECRET
        }),
    ]
})

In .env.local, the GOOGLE_ID and GOOGLE_SECRET variables need values. To do so you need to go to https://console.cloud.google.com/apis/credentials/oauthclient and create an OAuth client, then follow the configuration docs for the Google Provider.

You will also want to change NEXT_PUBLIC_SECRET to NEXTAUTH_SECRET and generate a random value for it. You'll want to do that for two reasons. First, NextAuth will look for that value by default and second, using the NEXT_PUBLIC prefix will bundle that value into your client-side code, which makes it no longer secret and is a security risk.

GOOGLE_ID=<a_value_provided_in_google_console>
GOOGLE_SECRET=<a_value_provided_in_google_console>
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=<a_random_value_you_generate>

[investeusa]

Same thing here.
next-dev.js?3515:20 [next-auth][error][CLIENT_FETCH_ERROR] https://next-auth.js.org/errors#client_fetch_error Failed to fetch {error: {…}, url: '/api/auth/session', message: 'Failed to fetch'} client : true error : {message: 'Failed to fetch', stack: 'TypeError: Failed to fetch\n at _callee$ (webpac…es/scheduler/cjs/scheduler.development.js:533:21)', name: 'TypeError'} message : "Failed to fetch" url : "/api/auth/session"

[koala819]

Hi @wmcb91 thank you to answer.

In fact since this error has disappeared.

As you said I changed NEXT_PUBLIC_SECRET to NEXTAUTH_SECRET; then for the rest I already had the process.env and the imports.
I don't know why I didn't copy in my post the GoogleProvider import : import GoogleProvider from 'next-auth/providers/google'; :)

[cristianwpuig]

By deleting another api folder that was located at the same directory level as the pages directory, I was able to fix the issue. Hope that was helpful.

[MrBlackGhostt]

For me i put the folder structure like app/api/auth/[...nextauth]/route.ts