authjs with nextjs failing with google signin

Thu Apr 10 2025

Eric Thomas D. Cabigting

So you want to configure Authjs(as of this writing 5.0.0-beta.25) with Google Signin. All configuration are the same as the docs. When you run and test. You get this in your terminal:

✓ Compiled /signup in 373ms (1524 modules)
GET /signup 200 in 492ms
[auth][warn][debug-enabled] Read more: https://warnings.authjs.dev#debug-enabled
[auth][error] TypeError: fetch failed
at node:internal/deps/undici/undici:13484:13
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
at async getAuthorizationUrl (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/actions/signin/authorization-url.js:25:35)
at async Module.signIn (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/actions/signin/index.js:16:56)
at async AuthInternal (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/index.js:76:24)
at async Auth (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/index.js:130:34)
at async signIn (webpack-internal:///(rsc)/./node_modules/next-auth/lib/actions.js:53:17)
at async handleGoogleSignIn (webpack-internal:///(rsc)/./src/components/ui/GoogleSignInButton.tsx:19:5)
at async /mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:438:2357
at async handleAction (/mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:437:23434)
at async renderToHTMLOrFlightImpl (/mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:443:26714)
at async doRender (/mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/server/base-server.js:1650:34)
at async DevServer.renderToResponseWithComponentsImpl (/mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/server/base-server.js:1915:28)
at async DevServer.renderPageComponent (/mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/server/base-server.js:2393:24)
at async DevServer.renderToResponseImpl (/mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/server/base-server.js:2430:32)
at async DevServer.pipeImpl (/mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/server/base-server.js:1003:25)
at async NextNodeServer.handleCatchallRenderRequest (/mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/server/next-server.js:304:17)
at async DevServer.handleRequestImpl (/mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/server/base-server.js:895:17)
at async /mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/server/dev/next-dev-server.js:371:20
at async Span.traceAsyncFn (/mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/trace/trace.js:157:20)
at async DevServer.handleRequest (/mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/server/dev/next-dev-server.js:368:24)
at async invokeRender (/mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/server/lib/router-server.js:247:21)
at async handleRequest (/mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/server/lib/router-server.js:438:24)
at async requestHandlerImpl (/mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/server/lib/router-server.js:462:13)
at async Server.requestListener (/mnt/projects_github/src/specialsecretprojectforcats/web/node_modules/next/dist/server/lib/start-server.js:158:13)
GET /api/auth/error?error=Configuration 500 in 24ms
POST /signup 303 in 394ms
GET /api/auth/error?error=Configuration 500 in 5ms

In your browser you are getting http://localhost:3000/api/auth/error?error=Configuration in the URL. But thats strange, you configured your app as simple as how the docs specified.

I have spent hours on this error in the last week. And after much digging. I found the issue. The issue is actually, well related to the network. You see TypeError: fetch failed is about the fetch function of node that failed. Where did it fail exactly? Lets do some digging. Try running this in your terminal:

curl -v https://accounts.google.com/.well-known/openid-configuration

The command above actually tries to check the network connection on fetching openid-configuration from google. Unfortunately for my case, for some reason, my network is failing to fetch those config. Im getting something like this:

* Host accounts.google.com:443 was resolved.
* IPv6: 2404:6800:4003:c06::54   <--- Resolved an IPv6 address
* IPv4: 142.250.4.84            <--- Resolved an IPv4 address
*   Trying [2404:6800:4003:c06::54]:443... <--- Trying IPv6 first
* Immediate connect fail for 2404:6800:4003:c06::54: Network is unreachable <--- !! IPv6 FAILED !!
*   Trying 142.250.4.84:443... <--- Falling back to IPv4

So what does that mean? Lets analyze it:

IPv6 Failure: my machine successfully resolved Google's hostname (accounts.google.com) to both an IPv6 address and an IPv4 address. However, when curl tried to connect using the IPv6 address, it immediately failed with Network is unreachable. This indicates my current network environment has issues connecting to external IPv6 addresses.
IPv4 Fallback Success: curl is smart enough to see the IPv6 failure and automatically try the IPv4 address next. The connection over IPv4 worked perfectly (TLS handshake okay, HTTP/2 connection established, 200 OK response received).
Node.js fetch Behavior: The TypeError: fetch failed error we are seeing in our Next.js app strongly suggests that the Node.js fetch implementation (likely using undici internally) is also trying the IPv6 address first (because our system resolves it), but it's not successfully falling back to the working IPv4 address when the IPv6 connection fails. Instead, it just throws the low-level fetch failed error. This difference in fallback behavior between curl and Node's fetch is the likely cause of the problem.

So how do we fix it? On your auth.ts file, update your Google provider to explicitly define endpoints like this:

providers: [Google
    ({
       clientId: process.env.AUTH_GOOGLE_ID || "", // Ensure fallback for safety
       clientSecret: process.env.AUTH_GOOGLE_SECRET || "", // Ensure fallback for safety
    
       // --- Explicitly define endpoints ---
       authorization: {
         url: "https://accounts.google.com/o/oauth2/v2/auth",
         params: {
           scope: "openid email profile", // Adjust scopes as needed
           prompt: "consent",          // Optional: Forces consent screen every time
           access_type: "offline",     // Optional: Needed if you want refresh tokens
           response_type: "code",
         },
       },
       token: {
         url: "https://oauth2.googleapis.com/token",
       },
       userinfo: {
         url: "https://openidconnect.googleapis.com/v1/userinfo",
       },
    })

So how does this solve the fetch error? Well, authjs no longer needs to fetch the auth endpoints from https://accounts.google.com/.well-known/openid-configuration since we already explicitly configured all the important configs That means no more fetch failed error.

There you have it! Hope it helps you solve that pesky error with nodejs fetch.

UPDATE April 12, 2025: So after a few more digging it seems its due to my work network permanently disabling ipv6. When I run the same code without the explicit declaration in the authorization section. It works!

Let's Connect

Hey! My inbox is always free! Currently looking for new opportunities. Email me even just to say Hi! or if you have questions! I will get back to you as soon as possible!