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

colearendt · July 25, 2022, 3:52pm

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:

github.com

auth0/auth0-spa-js/blob/ab5054811a0ab855b31cc16b9830db271af6d363/src/utils.ts#L41-L49


      
          const iframe = window.document.createElement('iframe');
          
          
iframe.setAttribute('width', '0');
          iframe.setAttribute('height', '0');
          iframe.style.display = 'none';
          
          
const removeIframe = () => {
            if (window.document.body.contains(iframe)) {
              window.document.body.removeChild(iframe);

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:

github.com

nuxt-community/auth-module/blob/c9880dc28fa13ba036f078d37ff76e1267c65d21/src/schemes/auth0.ts#L13


      
          
          
export class Auth0Scheme extends Oauth2Scheme {
            logout(): void {
              this.$auth.reset()
          
          
    const opts = {
                client_id: this.options.clientId + '',
                returnTo: this.logoutRedirectURI
              }
              const url = this.options.endpoints.logout + '?' + encodeQuery(opts)
              window.location.replace(url)
            }
          }

kelly.nelson · August 4, 2022, 11:49pm

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

rashidpathiyil · August 5, 2022, 3:28pm

I am facing same issue, any help please?

colearendt · August 10, 2022, 2:41am

I have not 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

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

alee · August 19, 2022, 12:27am

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.

jakub1 · September 6, 2022, 1:22pm

Hi, anyone some updates about this one?

sergio.morcuende · January 4, 2023, 10:33am

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