Nuxt 3 + Auth Module throws 500 Error when configured with https://localhost:3000 and Self Signed Certificate

[rod2ik]

Hi,

Thanks for your fantastic work !

I am trying to set up an https devServer with this nuxt-auth Auth Module + Nuxt 3, because some OAuth2 providers (like Instagram which I would like) require that you work with https://localhost:3000, even on development mode.

After a fresh install (Nuxt 3 + Auth Module + next-auth + the two pem files), I am receiving the following error when everything is set, when I try to yarn dev the project.

I successfully created two pem files (with mkcert) with a self signed certificate (mkcert CA), and configured the nuxt.config.ts lines as stated in the official nuxt 3 site as described in this page :

  devServer: {
    https: {
      key: './myserver+3-key.pem',
      cert: './myserver+3.pem',
    }
  }

SSL/TLS Certificates are working correctly

I am sure they do, because, when I add ssr: false on my nuxt.config.ts file, I can correctly render the site with https://localhost:3000

Environment

Nuxi 3.6.3 15:36:46

---

• Operating System: Linux (Manjaro Linux)
• Node Version: v20.3.0
• Nuxt Version: 3.6.3
• Nitro Version: 2.5.2
• Package Manager: [email protected]
• Builder: vite
• User Config: devtools, modules, auth, devServer
• Runtime Modules: @sidebase/[email protected]
• Build Modules: -

---

Reproduction of the Error

On project directory, type yarn dev and click on > Local: https://localhost:3000/

Here is a repo to play with : https://github.com/rod2ik/https-auth-nuxt

Describe the bug

Both on the Terminal/IDE (I am using VSCode) and in my Browser (Firefox and Chrome) I receive the following error when I launch the site via yarn dev

[nuxt] [request error] [unhandled] [500] fetch failed (https://localhost:3000/__nuxt_vite_node__/manifest)

What is weird is that it works fine (the page https://localhost:3000 is correctly rendered) if I add ssr: false in nuxt.config.ts configurations (uncomnent line 4 of nuxt.config.ts file to test it)

Browser Logs

[nuxt] [request error] [unhandled] [500] fetch failed (https://localhost:3000/__nuxt_vite_node__/manifest)  15:34:26
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async $fetchRaw2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:215:14)  
  at async $fetch2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:239:15)  
  at async ./.nuxt/dev/index.mjs:871:20  
  at async ./.nuxt/dev/index.mjs:959:64  
  at async ./.nuxt/dev/index.mjs:554:22  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1284:19)                                        15:34:22
  at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1359:7)
[nuxt] [request error] [unhandled] [500] fetch failed (https://localhost:3000/__nuxt_vite_node__/manifest)  15:34:26
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async $fetchRaw2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:215:14)  
  at async $fetch2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:239:15)  
  at async ./.nuxt/dev/index.mjs:871:20  
  at async ./.nuxt/dev/index.mjs:959:64  
  at async ./.nuxt/dev/index.mjs:554:22  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1284:19)  
  at async toNodeHandle (./node_modules/h3/dist/index.mjs:1359:7)  
  at async Object.ufetch [as localFetch] (./node_modules/unenv/runtime/fetch/index.mjs:9:17)  
  at async Object.errorhandler [as onError] (./.nuxt/dev/index.mjs:700:30)

Additional Context : h3 Logs

Additional Context : in the async toNodeHandle() function, on line 1359 of the h3 module, the h3 event is :

H3Event {                                                                                            15:48:29
  __is_event__: true,
  _handled: false,
  context: {},
  node: {
    req: IncomingMessage {
      _events: [Object: null prototype] {},
      _eventsCount: 0,
      _maxListeners: undefined,
      readableEncoding: null,
      readableEnded: true,
      readableFlowing: false,
      readableHighWaterMark: 0,
      readableLength: 0,
      readableObjectMode: false,
      readableAborted: false,
      readableDidRead: false,
      closed: false,
      errored: null,
      readable: false,
      destroyed: false,
      aborted: false,
      httpVersion: '1.1',
      httpVersionMajor: 1,
      httpVersionMinor: 1,
      complete: true,
      headers: [Object],
      trailers: {},
      method: 'GET',
      url: '/__nuxt_error?url=/&statusCode=500&statusMessage&message=fetch+failed+(https://localhost:3000/__nuxt_vite_node__/manifest)&stack=%3Cpre%3E%3Cspan+class=%22stack+internal%22%3Eat+process.processTicksAndRejections+(node:internal/process/task_queues:95:5)%3C/span%3E%0A%3Cspan+class=%22stack+internal%22%3Eat+async+$fetchRaw2+(./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:215:14)%3C/span%3E%0A%3Cspan+class=%22stack+internal%22%3Eat+async+$fetch2+(./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:239:15)%3C/span%3E%0A%3Cspan+class=%22stack%22%3Eat+async+./.nuxt/dev/index.mjs:1597:20%3C/span%3E%0A%3Cspan+class=%22stack%22%3Eat+async+./.nuxt/dev/index.mjs:1685:64%3C/span%3E%0A%3Cspan+class=%22stack%22%3Eat+async+./.nuxt/dev/index.mjs:661:22%3C/span%3E%0A%3Cspan+class=%22stack+internal%22%3Eat+async+Object.handler+(./node_modules/h3/dist/index.mjs:1284:19)%3C/span%3E%0A%3Cspan+class=%22stack+internal%22%3Eat+async+Server.toNodeHandle+(./node_modules/h3/dist/index.mjs:1360:7)%3C/span%3E%3C/pre%3E',
      statusCode: 200,
      statusMessage: '',
      connection: [Socket],
      socket: [Socket],
      body: null,
      __unenv__: undefined,
      [Symbol(kCapture)]: false
    },
    res: ServerResponse {
      _events: [Object: null prototype] {},
      _eventsCount: 0,
      _maxListeners: undefined,
      writable: true,
      writableEnded: false,
      writableFinished: false,
      writableHighWaterMark: 0,
      writableLength: 0,
      writableObjectMode: false,
      writableCorked: 0,
      closed: false,
      errored: null,
      writableNeedDrain: false,
      destroyed: false,
      _encoding: 'utf-8',
      statusCode: 200,
      statusMessage: '',
      upgrading: false,
      chunkedEncoding: false,
      shouldKeepAlive: false,
      useChunkedEncodingByDefault: false,
      sendDate: false,
      finished: false,
      headersSent: false,
      strictContentLength: false,
      connection: null,
      socket: null,
      _headers: {},
      req: [IncomingMessage],
      [Symbol(kCapture)]: false
    }
  }
}

[ThornWalli]

Same problem.

The getUrl method of requrl does not get from the request that it is https.

nuxt-auth/src/runtime/composables/authjs/useAuth.ts

Line 163 in 45d7e34

const callbackUrlFallback = await getRequestURLWN(nuxt)

nuxt-auth/src/runtime/utils/url.ts

Line 7 in 45d7e34

export const getRequestURL = (includePath = true) => getURL(useRequestEvent()?.node.req, includePath)

Could be related to this: unjs-archive/is-https#8

https://github.com/unjs/is-https does not recognize https.

[rod2ik]

After testing a bit, this problem is NOT an upstream problem (so I reopened the issue here) :

1°) This is NOT an upstream problem :
Meaning that Nuxt 3 + https devServer https://localhost:3000 works fine, as long as you add the correct NODE_TLS_REJECT_UNAUTHORIZED=0 flag in your package.json file, on the "dev" line :

Initially signaled as an upstream issue, this upstream was in the meantime closed by @danielroe : Please cf. this upstream issue page : nuxt/nuxt#22347 for reference

You can convince yourself that https is working well upstream (just Nuxt 3 + devServer https://localhost:3000), with the following playground repo : rod2ik/https-nuxt

2°) With sidebase/nuxt-auth :
But when (only) the sidebase/nuxt-auth module is added, the https devServer fails to load, even with the NODE_TLS_REJECT_UNAUTHORIZED=0 flag in the package.json file, as explained in this issue.

You can convince yourself that (only) the addition of the sidebase-nuxt-auth module breaks https devServer, playing with the following repo : rod2ik/https-auth-nuxt

[allusernamestakenexceptthis]

any plan to fix soon? or workarond? thanks

[andreasvirkus]

Bump... 🙏

[andreasvirkus]

Thanks to this comment #374 (comment)
I fixed the issue for myself - the auth.origin has to be auth.baseURL instead in your nuxt config 😑 The docs are still not updated since May (they have been updated in 0.6 beta)

[zoey-kaiser]

Hello everyone!

I assume this issue has been resolved. I will once again link the correct docs for Version 0.6 and above here: https://sidebase.io/nuxt-auth/v0.6/configuration/nuxt-config