search

nextauthjs / next-auth

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

Sveltekit (@auth/sveltekit) / Cloudflare Workers #11999

Open pragmatic-recursion opened 1 month ago

pragmatic-recursion commented 1 month ago

Environment

  System:
    OS: macOS 14.6.1
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Memory: 29.28 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.2.0 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 10.7.0 - /usr/local/bin/npm
    pnpm: 6.11.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 129.0.6668.90
    Safari: 17.6
  npmPackages:
    @auth/sveltekit: ^1.6.0 => 1.6.0

Reproduction URL

https://github.com/pragmatic-recursion/auth-bug

Describe the issue

Running on Cloudflare Workers, not Pages! Works locally.

Server error

There is a problem with the server configuration.

Check the server logs for more information.

{
  "$cloudflare": {
    "truncated": false,
    "event": {
      "request": {
        "url": "https://one.pragmatic-recursion.workers.dev/auth/callback/github?code=62d6a29f6a2e303b9fba",
        "method": "GET",
        "path": "/auth/callback/github"
      }
    },
    "scriptName": "one",
    "eventType": "fetch",
    "scriptVersion": {
      "id": "6c4e96d9-0a8b-4ff0-89e7-a7b056292571"
    },
    "$metadata": {
      "requestId": "8cf4d7f4fde4b36d",
      "id": "01J9NMRD9E8N8G90RMFDYBQF7F",
      "type": "cf-worker",
      "error": "\u001b[31m[auth][cause]\u001b[0m: TypeError: Illegal invocation: function called with incorrect `this` reference. See https://developers.cloudflare.com/workers/observability/errors/#illegal-invocation-errors for details.\n    at _worker.js:7568:47\n    at authenticatedRequest (_worker.js:4949:44)",
      "errorPattern": "\u001b[<NUM>m[auth][cause]\u001b[<NUM>m: TypeError: Illegal invocation: function called with incorrect `this` reference. See <URL>#illegal-invocation-errors for details.\n    at <URL>:<NUM>\n    at authenticate",
      "messagePattern": "\u001b[<NUM>m[auth][cause]\u001b[<NUM>m: TypeError: Illegal invocation: function called with incorrect `this` reference. See <URL>#illegal-invocation-errors for details.\n    at <URL>:<NUM>\n    at authenticate"
    }
  },
  "level": "error",
  "message": "\u001b[31m[auth][cause]\u001b[0m: TypeError: Illegal invocation: function called with incorrect `this` reference. See https://developers.cloudflare.com/workers/observability/errors/#illegal-invocation-errors for details.\n    at _worker.js:7568:47\n    at authenticatedRequest (_worker.js:4949:44)"
}

How to reproduce

1) Install Svelte https://developers.cloudflare.com/workers/frameworks/framework-guides/svelte/ npm create cloudflare@latest my-svelte-app -- --framework=svelte --experimental

2) Install @auth/sveltekit https://authjs.dev/reference/sveltekit npm install @auth/sveltekit

3) Add GitHub as a Provider

4) Deploy to Cloudflare Worker (Free)

It works locally but not when deployed

Expected behavior

Should be logged in

jakemoves commented 1 month ago

I encountered this as well. Reverting to 

"@auth/core": "^0.35.0",
"@auth/sveltekit": "1.5.3",

works as expected. Maybe this is an issue with the new customFetch that @balazsorban44 added recently?

Here's the more-useful trace I get running locally with the newer releases:

TypeError: Illegal invocation: function called with incorrect `this` reference. See https://developers.cloudflare.com/workers/observability/errors/#illegal-invocation-errors for details.

      at Object.apply
  (file:///Users/jakemoves/projects/mixtape-project/mixtape/.wrangler/tmp/bundle-YxKLIk/checked-fetch.js:28:18)
      at Object.apply
  (file:///Users/jakemoves/projects/mixtape-project/mixtape/.wrangler/tmp/bundle-ul11C8/checked-fetch.js:28:18)
      at null.<anonymous>
  (file:///Users/jakemoves/projects/mixtape-project/mixtape/node_modules/.pnpm/@auth+core@0.36.0/node_modules/@auth/core/lib/actions/callback/oauth/callback.js:65:52)
      at authenticatedRequest

... and the linked docs from Cloudflare at https://developers.cloudflare.com/workers/observability/errors/#illegal-invocation-errors

ImAvafe commented 1 month ago

@jakemoves You're a life saver. I can finally ship. 🥹

balazsorban44 commented 1 month ago

Hmm. Unless you override customFetch, (which you really shouldn't in 99+% of the cases) we fall back to the globally available fetch

https://github.com/nextauthjs/next-auth/blob/57fe1e1e9befab929d4034ba89713d7b364872e3/packages/core/src/lib/utils/custom-fetch.ts#L33

No clue why this would break Cloudflare yet...

sezze commented 1 month ago

This happened to me too, not using @auth/sveletekit. This is running locally in Miniflare (Cloudflare simulator) using wrangler.

I logged all of the values in the custom fetch function in case something there rings a bell:

provider = {
  id: 'github',
  name: 'GitHub',
  type: 'oauth',
  authorization: { url: [URL], request: undefined, conform: undefined },       
  token: { url: [URL] },
  userinfo: {
    url: [URL],
    request: [AsyncFunction: request],
    conform: undefined
  },
  profile: [Function: profile],
  style: { bg: '#24292f', text: '#fff' },
  clientId: '...',
  clientSecret: '...',
  issuer: undefined,
  signinUrl: 'http://localhost:8787/auth/signin/github',
  callbackUrl: 'http://localhost:8787/auth/callback/github',
  redirectProxyUrl: undefined,
  checks: [ 'pkce' ],
  account: [Function: defaultAccount],
  [Symbol(custom-fetch)]: undefined
}

o.customFetch = Symbol()

customFetch = Symbol(custom-fetch)

fetch = [Function: fetch]
X [ERROR] [auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror

  [auth][cause]: TypeError: Illegal invocation: function called with
  incorrect `this` reference. See
  https://developers.cloudflare.com/workers/observability/errors/#illegal-invocation-errors
  for details.
      at Object.apply
  (file:///C:/.../.wrangler/tmp/bundle-ZruFbV/checked-fetch.js:28:18)
      at null.<anonymous>
  (file:///C:/.../node_modules/.pnpm/@auth+core@0.37.0/node_modules/@auth/core/lib/actions/callback/oauth/callback.js:116:52)    
      at authenticatedRequest
  (file:///C:/.../node_modules/.pnpm/oauth4webapi@3.1.1/node_modules/oauth4webapi/src/index.ts:3094:37)
      at async tokenEndpointRequest
  (file:///C:/.../node_modules/.pnpm/oauth4webapi@3.1.1/node_modules/oauth4webapi/src/index.ts:3136:20)
  [auth][details]: {
    "provider": "github"
  }
kooliebwoy commented 1 month ago

jakemoves

This works perfectly. Appreciate it!

noxan commented 1 month ago

same here, can confirm the issue and downgrading resolving it.

aholland commented 1 month ago

We're seeing a related but slightly different manifestation of this issue in standard Vite SSR (not Cloudflare Workers).

The error occurs during Vite's SSR module evaluation:

SyntaxError: [vite] The requested module '@auth/core' does not provide an export named 'customFetch'
at analyzeImportedModDifference (vite/dist/node/chunks/dep-Cyk9bIUq.js:52042:15)

Our version compatibility findings:

The fact that this manifests both in Cloudflare Workers (as an illegal invocation) and in standard Vite SSR (as a missing export) suggests there might be a broader issue with how customFetch is being exported and consumed.

Technical details:

Environment: