nextauthjs / next-auth

Authentication for the Web.
https://authjs.dev
ISC License
25.1k stars 3.55k forks source link

Google Oauth failed when Github runs ok : Server error There is a problem with the server configuration. #10089

Open wuzhuzhu opened 9 months ago

wuzhuzhu commented 9 months ago

Provider type

Google

Environment

System: OS: macOS 14.3.1 CPU: (11) arm64 Apple M3 Pro Memory: 351.67 MB / 18.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 21.6.1 - ~/.nvm/versions/node/v21.6.1/bin/node npm: 10.2.4 - ~/.nvm/versions/node/v21.6.1/bin/npm bun: 1.0.25 - ~/.bun/bin/bun Browsers: Chrome: 121.0.6167.184 Safari: 17.3.1 npmPackages: next: latest => 14.1.0 next-auth: beta => 5.0.0-beta.13 react: ^18.2.0 => 18.2.0

Reproduction URL

https://github.com/wuzhuzhu/authjs-google-issue

Describe the issue

login by google leads to error screen: image

Error on terminal:

✓ Compiled /api/auth/[...nextauth] in 98ms (633 modules) [auth][error] TypeError: fetch failed at node:internal/deps/undici/undici:12442:11 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async globalThis.fetch (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:57569) at async getAuthorizationUrl (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/signin/authorization-url.js:23:35) at async Module.signIn (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/signin/index.js:19:60) at async AuthInternal (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/index.js:73:24) at async Auth (webpack-internal:///(rsc)/./node_modules/@auth/core/index.js:126:29) at async /Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:63809 at async eU.execute (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:53964) at async eU.handle (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:65062) at async doRender (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/server/base-server.js:1333:42) at async cacheEntry.responseCache.get.routeKind (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/server/base-server.js:1543:40) at async DevServer.renderToResponseWithComponentsImpl (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/server/base-server.js:1463:28) at async DevServer.renderPageComponent (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/server/base-server.js:1856:24) at async DevServer.renderToResponseImpl (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/server/base-server.js:1894:32) at async DevServer.pipeImpl (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/server/base-server.js:911:25) at async NextNodeServer.handleCatchallRenderRequest (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/server/next-server.js:271:17) at async DevServer.handleRequestImpl (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/server/base-server.js:807:17) at async /Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/server/dev/next-dev-server.js:331:20 at async Span.traceAsyncFn (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/trace/trace.js:151:20) at async DevServer.handleRequest (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/server/dev/next-dev-server.js:328:24) at async invokeRender (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/server/lib/router-server.js:163:21) at async handleRequest (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/server/lib/router-server.js:342:24) at async requestHandlerImpl (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/server/lib/router-server.js:366:13) at async Server.requestListener (/Users/walter/repositories/next-auth/apps/examples/nextjs/node_modules/next/dist/server/lib/start-server.js:140:13)

How to reproduce

Google api console settings: Publishing status :In production

OAuth credentials settings: image image

# .env.local
AUTH_SECRET=f5679fe688efc******

AUTH_GITHUB_ID=3f96f3923******
AUTH_GITHUB_SECRET=ed3cda881******

AUTH_GOOGLE_ID=133689906618-7n8h7******
AUTH_GOOGLE_SECRET=GOCSPX-JSbBe73H4O******
# auth.ts
import NextAuth from "next-auth";

import GitHub from "next-auth/providers/github";
import Google from "next-auth/providers/google";

import type { NextAuthConfig } from "next-auth";

export const config = {
    theme: {
        logo: "https://next-auth.js.org/img/logo/logo-sm.png",
    },
    providers: [
        GitHub,
        Google,
    ],
    callbacks: {
        authorized({ request, auth }) {
            const { pathname } = request.nextUrl;
            if (pathname === "/middleware-example") return !!auth;
            return true;
        },
    },
} satisfies NextAuthConfig;

export const { handlers, auth, signIn, signOut } = NextAuth(config);

Expected behavior

Google oauth works fine as Github does.

ShlokBharadwaj commented 9 months ago

Have you tried adding http://localhost to both Authorized redirect URIs and Authorized JavaScript origins? After the introduction of Google Identity you need both http://localhost and http://localhost:3000 (in this case) to run the application. It should look something like this: image

wuzhuzhu commented 9 months ago

I tried add localhost into authorized origins and redirect URIs like this: image But still not work.

google says "Note: It may take 5 minutes to a few hours for settings to take effect", its 10mins ago, i will try again in next day.

ShlokBharadwaj commented 9 months ago

I tried add localhost into authorized origins and redirect URIs like this: image But still not work.

google says "Note: It may take 5 minutes to a few hours for settings to take effect", its 10mins ago, i will try again in next day.

Add http://localhost:3000 and http://localhost to Authorized redirect URIs as well.

wuzhuzhu commented 9 months ago

image still not working..

azad-nft commented 8 months ago

I reproduce the same APP for GITHUB providers for testing purpose, login with GITHUB also not working, although i just added the github id and github secret key just, rest each and everything is same, Don't know what is the issue

OKHand-Zy commented 8 months ago

I have same problem. any one can slove it? Credentials 401Error

ShlokBharadwaj commented 8 months ago

I also got the same error but then I followed this video and things worked out perfectly. Hope it helps.

addlistener commented 5 months ago

This is what I get. Is there any way we can show more information like the original request to & response from google?

[auth][error] TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11730:11)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at getAuthorizationUrl (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/actions/signin/authorization-url.js:24:35)
    at Module.signIn (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/actions/signin/index.js:16:56)
    at AuthInternal (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/index.js:72:24)
    at Auth (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/index.js:126:34)
    at /path/to/my-saas-project/node_modules/next/dist/compiled/next-server/webpack:/next/dist/esm/server/future/route-modules/app-route/module.js:207:37
    at e_.execute (/path/to/my-saas-project/node_modules/next/dist/compiled/next-server/webpack:/next/dist/esm/server/future/route-modules/app-route/module.js:122:26)
    at e_.handle (/path/to/my-saas-project/node_modules/next/dist/compiled/next-server/webpack:/next/dist/esm/server/future/route-modules/app-route/module.js:269:30)
    at doRender (/path/to/my-saas-project/node_modules/next/src/server/base-server.ts:2273:30)
image

/

And I believe I'm doing everything as the docs describes https://next-auth.js.org/providers/google

  '@auth/core@0.31.0':
    resolution: {integrity: sha512-UKk3psvA1cRbk4/c9CkpWB8mdWrkKvzw0DmEYRsWolUQytQ2cRqx+hYuV6ZCsngw/xbj9hpmkZmAZEyq2g4fMg==}

Authorized JavaScript origins

http://localhost:3000
http://localhost

Authorized redirect URIs

http://localhost:3000/api/auth/callback/google
http://localhost/api/auth/callback/google
http://localhost:3000
http://localhost
export default {
  debug: true, 
  providers: [
    Google({
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    }),
...
addlistener commented 5 months ago

I also got the same error but then I followed this video and things worked out perfectly. Hope it helps.

This video uses pure react without next.js or next-auth. So you abandoned next-auth? @ShlokBharadwaj

addlistener commented 5 months ago

My problem is actually this one https://github.com/nextauthjs/next-auth/issues/3920

I switched to next-auth v4 to have figured out it's actually the request timed out. Maybe next-auth v5 could improve on error logging.

TUTUBIG commented 5 months ago

Why there isn't a solution for this so popular issue, every application will chose to use goole login provider as thier first choice

AlanGolphi commented 4 months ago

I met the same problem, I try much but no solution. this problem only occur in localhost, it works fine if I deploy to vercel

kamjin1996 commented 4 months ago

I got the same error.

OKHand-Zy commented 4 months ago

My project is deployed on Vercel, but the local tests are not working. I found some posts suggesting that the issue might be caused by the host network environment, but I don't know how to fix it.

3920

kamjin1996 commented 4 months ago

My project is deployed on Vercel, but the local tests are not working. I found some posts suggesting that the issue might be caused by the host network environment, but I don't know how to fix it. #3920

After I read your link, this problem has been solved. Now google provider works normally on localhost:3000, the reason is indeed network problems. I think it is necessary to ensure that node can access Google server normally. I used clash for windows TUN mode and it worked fine, you can try it too.

haiderhossain10 commented 4 months ago

This is what I get. Is there any way we can show more information like the original request to & response from google?

[auth][error] TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11730:11)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at getAuthorizationUrl (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/actions/signin/authorization-url.js:24:35)
    at Module.signIn (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/actions/signin/index.js:16:56)
    at AuthInternal (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/index.js:72:24)
    at Auth (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/index.js:126:34)
    at /path/to/my-saas-project/node_modules/next/dist/compiled/next-server/webpack:/next/dist/esm/server/future/route-modules/app-route/module.js:207:37
    at e_.execute (/path/to/my-saas-project/node_modules/next/dist/compiled/next-server/webpack:/next/dist/esm/server/future/route-modules/app-route/module.js:122:26)
    at e_.handle (/path/to/my-saas-project/node_modules/next/dist/compiled/next-server/webpack:/next/dist/esm/server/future/route-modules/app-route/module.js:269:30)
    at doRender (/path/to/my-saas-project/node_modules/next/src/server/base-server.ts:2273:30)
image

/

And I believe I'm doing everything as the docs describes https://next-auth.js.org/providers/google

  '@auth/core@0.31.0':
    resolution: {integrity: sha512-UKk3psvA1cRbk4/c9CkpWB8mdWrkKvzw0DmEYRsWolUQytQ2cRqx+hYuV6ZCsngw/xbj9hpmkZmAZEyq2g4fMg==}

Authorized JavaScript origins

http://localhost:3000
http://localhost

Authorized redirect URIs

http://localhost:3000/api/auth/callback/google
http://localhost/api/auth/callback/google
http://localhost:3000
http://localhost
export default {
  debug: true, 
  providers: [
    Google({
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    }),
...

I'm getting same error. did you solve it?

ShlokBharadwaj commented 3 months ago

I also got the same error but then I followed this video and things worked out perfectly. Hope it helps.

This video uses pure react without next.js or next-auth. So you abandoned next-auth? @ShlokBharadwaj

I used next.js with next auth and didn't face any issues. The project is still running perfectly on my local machine and the hosted platform.

CodeWizardHemant commented 2 weeks ago

This is what I get. Is there any way we can show more information like the original request to & response from google?

[auth][error] TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11730:11)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at getAuthorizationUrl (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/actions/signin/authorization-url.js:24:35)
    at Module.signIn (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/actions/signin/index.js:16:56)
    at AuthInternal (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/index.js:72:24)
    at Auth (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/index.js:126:34)
    at /path/to/my-saas-project/node_modules/next/dist/compiled/next-server/webpack:/next/dist/esm/server/future/route-modules/app-route/module.js:207:37
    at e_.execute (/path/to/my-saas-project/node_modules/next/dist/compiled/next-server/webpack:/next/dist/esm/server/future/route-modules/app-route/module.js:122:26)
    at e_.handle (/path/to/my-saas-project/node_modules/next/dist/compiled/next-server/webpack:/next/dist/esm/server/future/route-modules/app-route/module.js:269:30)
    at doRender (/path/to/my-saas-project/node_modules/next/src/server/base-server.ts:2273:30)
image

/

And I believe I'm doing everything as the docs describes https://next-auth.js.org/providers/google

  '@auth/core@0.31.0':
    resolution: {integrity: sha512-UKk3psvA1cRbk4/c9CkpWB8mdWrkKvzw0DmEYRsWolUQytQ2cRqx+hYuV6ZCsngw/xbj9hpmkZmAZEyq2g4fMg==}

Authorized JavaScript origins

http://localhost:3000
http://localhost

Authorized redirect URIs

http://localhost:3000/api/auth/callback/google
http://localhost/api/auth/callback/google
http://localhost:3000
http://localhost
export default {
  debug: true, 
  providers: [
    Google({
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    }),
...

Has anyone solved this issue? I'm encountering it with IdentityServer v5 and Duende IdentityServer 6.

IIvexII commented 2 weeks ago

I have spent hours figuring out what was wrong and all it took to work is changing the network. That was funny and frustrating at the same time.

VruyrSaribekyan commented 1 week ago

I have the same problem, please help me, Локальный хост Works on dev environment no,