Auth0-spa-js , vue3, nuxt3 and a document / h3 error

Get Help
1

Please include the following information in your post:

  • Which SDK this is regarding: auth0-spa-js
  • SDK Version: 1.22.2
  • Platform Version:
  • Code Snippets/Error Messages/Supporting Details/Screenshots:

nuxt-auth has not been integrated with nuxt 3 yet (as per the overview here). However, I still want to give auth0 with nuxt3 a shot. I found this guide, which seemed promising.

However, AFAICT loading the auth0 client library into a middleware fails immediately on the iframe work in utils.ts:

In particular, it throws:

[h3] [unhandled] H3Error: document is not defined
    at createError (file:///Users/colearendt/working/dgroup.app/node_modules/h3/dist/index.mjs:191:15)
    at Server.nodeHandler (file:///Users/colearendt/working/dgroup.app/node_modules/h3/dist/index.mjs:381:21) {
  statusCode: 500,
  fatal: false,
  unhandled: true,
  statusMessage: 'Internal Server Error'
}

or

[nitro] [dev] [unhandledRejection] ReferenceError: window is not defined
    at e.<anonymous> (file:///Users/colearendt/working/dgroup.app/.nuxt/dist/server/server.mjs:4155:108286)
    at file:///Users/colearendt/working/dgroup.app/.nuxt/dist/server/server.mjs:4155:1532
    at Object.next (file:///Users/colearendt/working/dgroup.app/.nuxt/dist/server/server.mjs:4155:1637)
    at file:///Users/colearendt/working/dgroup.app/.nuxt/dist/server/server.mjs:4155:574
    at new Promise (<anonymous>)
    at c (file:///Users/colearendt/working/dgroup.app/.nuxt/dist/server/server.mjs:4155:319)
    at e.__checkSession (file:///Users/colearendt/working/dgroup.app/.nuxt/dist/server/server.mjs:4155:108191)
    at e.install (file:///Users/colearendt/working/dgroup.app/.nuxt/dist/server/server.mjs:4155:106335)
    at Object.use (/Users/colearendt/working/dgroup.app/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4305:28)
    at file:///Users/colearendt/working/dgroup.app/.nuxt/dist/server/server.mjs:4126:20

Does anyone have recommendations on the best way to get around this?

I have noticed that the nuxt-auth module (works only w/ nuxt 2 presently) does use window. somehow without error. But it’s not clear to me if this is a problem in configuring the client, setting up the nuxt3 process. or vite:

2

Hello,
I’m getting the same error. Just curious if you found a solution?
Thanks.

1 Like
3

I am facing same issue, any help please?

4

I have not :frowning_face: Unfortunately, this was enough to get me stuck. For this particular project, it was possible for me to bail on SSR and that resolved this problem in the short term :see_no_evil:

It may be worth figuring out where to file this issue for review by the auth0 folks. I’ll dig a bit further and post back here if I end up finding a reasonable place to submit a bug report :smile:

1 Like
5

Based on this issue I assume this is a problem to be solved on the nuxt side to make sure that auth0 only gets initialized on the client-side.

Perhaps as a client-only plugin? I’m working on this now and will send an update if I get it working.

1 Like
6

Hi, anyone some updates about this one?

7

Hi everyone!
I recommend to use Universal Login instead Embedded login as far as possible.
You can check it out my repository with an example nuxt3-auth0 middleware integration: GitHub - smorcuend/nuxt3-auth0: Nuxt3 boilerplate with Auth0 authentication plugin