not work with nuxt 3

[n4an]

Cannot start nuxt

[mrleblanc101]

Nuxt 3 hasn't even been in beta for 2 weeks yet... All plugin are incompatible, you'll need to wait for the next major release I suppose (v6).

[ngajhede]

It's not released for nuxt3 yet. Follow the module compatibility here: https://github.com/nuxt/framework/discussions/751

[kissu]

Did you tried it with Nuxt Bridge?

Do you mind submitting your findings or updates here please? https://isnuxt3ready.owln.ai/
This way, the community will have a faster and simpler way of spotting the actual status of some packages.

[bmulholland]

We haven't had time to investigate this - so more information, investigation, and PRs would all be very welcomed.

[hartmut-co-uk]

Hi, did anyone take a look in the meantime? Any gut feeling how much effort it will be to support nuxt3? Any blockers (I understand pinia already is supported and therefore can be used?) Is this going to be built/released with/as v5?

[bmulholland]

It will certainly be part of v5/auth-next.

First task on the list is to upgrade packages one-by-one; help with that is welcomed. Just create a PR with one upgraded package, make sure it passes yarn test and the demo application (yarn dev) works.

[Dreaming-Codes]

Did you tried it with Nuxt Bridge?

Do you mind submitting your findings or updates here please? https://isnuxt3ready.owln.ai/ This way, the community will have a faster and simpler way of spotting the actual status of some packages.

Works perfectly on nuxt bridge

[mrleblanc101]

Should probably make sure v5 work on both Nuxt 2 and Nuxt 3 when it launch. Otherwise v5 should focus on Nuxt 2 and a v6 should be created for Nuxt 3

[hartmut-co-uk]

It will certainly be part of v5/auth-next.

@bmulholland which branch would that be then? dev?

[bmulholland]

Yes, auth-next is the dev branch

[mrleblanc101]

Si v5 will still be compatible with Nuxt 2 or supporting Nuxt 3 has breaking change ?

[bmulholland]

I don't know yet

[mrleblanc101]

IMHO, v5 should support Nuxt 2 as a lot of people are already using it with @nuxtjs/auth-next. They would be left with no alternative if v5 only support Nuxt 3.

If there is breaking change to support Nuxt 3, I think v5 should be finished with only Nuxt 2 support and a new v6 should be started for Nuxt 3.

[bmulholland]

@mrleblanc101 Thanks, I understood your point in your original comment. We'll make sure we provide appropriate nuxt version support for whatever is needed. Your PRs to help out are welcomed.

[hartmut-co-uk]

@bmulholland is the yarn dev supposed to compile and run on dev branch? Is any particular node version required? (I'm using v16.13.0)

Module build failed (from ./node_modules/ts-loader/index.js):                                                                                                                                                                                                    friendly-errors 17:59:23
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (/Users/hartmut/dev/git/examples/nuxt/auth-module/node_modules/ts-loader/dist/index.js:91:41)
    at Object.loader (/Users/hartmut/dev/git/examples/nuxt/auth-module/node_modules/ts-loader/dist/index.js:14:21)
                                                                                                                                                                                                                                                                 friendly-errors 17:59:23
 @ ./demo/pages/oauth2RefreshTest.vue?vue&type=script&lang=ts& 1:0-298 1:314-317 1:319-614 1:319-614
 @ ./demo/pages/oauth2RefreshTest.vue
 @ ./demo/.nuxt/router.js
 @ ./demo/.nuxt/index.js
 @ ./demo/.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./demo/.nuxt/client.js

⚠️ Note for M1 users: in case anyone else runs into, I'm with an M1 and had trouble with yarn install with playwright - I was able to make it work by switching to x64 architecture environment.

[bmulholland]

@hartmut-co-uk Honestly I haven't fired it up myself for some time, and so basic fixes for yarn dev may well be needed.

Re: playwright, I'm hoping that upgrading it will add M1 support.

[hartmut-co-uk]

Re: playwright, I'm hoping that upgrading it will add M1 support. I found https://github.com/microsoft/playwright/issues/7646#issuecomment-880797427 but using playwright@next didn't solve the build for me. It was still breaking, I think not because of playwright anymore but just failed without any error message 🎁 😅

[toniengelhardt]

For me it doesn't work with Nuxt Bridge. As soon as I add middleware: ['auth'] to router in nuxt.config.js like so:

  router: {
    base: '/',
    middleware: ['auth'],
    linkActiveClass: 'active',
    linkExactActiveClass: 'exact-active',
    extendRoutes(routes) {
      routes.push({
        path: '/',
        redirect: '/write',
      })
    }
  }

I get the following error when I try to start the dev server with yarn dev:

If I remove middleware: ['auth'] the error disappears.

Digging into the source file that causes the error node_modules/@nuxt/bridge/dist/chunks/module2.mjs:

it happens in map((m) => ...) where m is simply the string "auth" and therefore m.src is undefined.

Is this a problem of the @nuxt/auth package or Nuxt Bridge?

[bmulholland]

IMO the config format you included should be supported by nuxt, so I think it's an issue with nuxt bridge - could you please file an issue over there?

[toniengelhardt]

@bmulholland yes will do, thanks!

[sneakylenny]

@toniengelhardt:

For me it doesn't work with Nuxt Bridge.

I have tested it with Nuxt 3 Bridge and it's working like it's supposed to after following the guide.

EDIT: Removed this section, reason: I did not see you had set the property correctly

The only bug I'm experiencing is when I log in and refresh the page the middleware can't detect I'm logged in and redirects me to the login page. However, the store is correct and has the fetched user object and has the loggedIn: true. I think this has to do with the breaking changes to how middlewares work in Nuxt3. I may try and create a middleware suited for Nuxt 3. If I succeed I will update you with the discoveries I made.

My full `nuxt.config.js`

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'auth-test',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'ant-design-vue/dist/antd.css'
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '@/plugins/antd-ui'
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://dev.auth.nuxtjs.org/
    '@nuxtjs/auth-next'
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    prefix: '/api/',
    credentials: true,
    proxy: true,
  },

  proxy: {
    '/api/': { target: 'http://localhost:8000/', pathRewrite: { '^/api/': '' } }
  },

  // Auth module configuration: https://dev.auth.nuxtjs.org/
  auth :{
    strategies: {
      local: {
        token: {
          property: 'token',
          global: true,
          required: true,
          type: 'Bearer'
        },
        user: {
          property: 'user',
          autoFetch: true
        },
        endpoints: {
          login: { url: '/login', method: 'post' },
          logout: { url: '/logout', method: 'get' },
          user: { url: '/user', method: 'get' }
        }
      }
    },
    // redirect: {
    //   login: '/login',
    //   logout: '/',
    //   callback: '/login',
    //   home: '/profile'
    // }
  },

  router: {
    middleware: [
      'auth',
    ],
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    //
  }
})

[toniengelhardt]

Hey @TimVanHerwijnen, thanks for digging in!

I just raised the issue in the Nuxt repo (nuxt/bridge#164) and created a reproduction:

Github: https://github.com/toniengelhardt/nuxt-bridge-debug CodeSandBox: https://codesandbox.io/s/cool-benji-c0ryp

Note that the router config also includes the middleware setting as specified in the docs.

When I first tried to reproduce the problem from scratch I also didn't see it at first, but when I added more packages and modules from my project repo it showed up, so it seems like it is clashing with some other module or package.

[toniengelhardt]

Update

The previous issue has been fixed in Nuxt Bridge, but now I get this one:

I think that is because the middleware is now actually loaded, but not compatible yet...

[sneakylenny]

I am now taking the refresh (jwt) approach and got the auth module completely working now without any issues.

@toniengelhardt:

The previous issue has been fixed in Nuxt Bridge, but now I get this one:

So I am convinced this is a configuration or a Vite error. Since I don't have this issue and I am not using Vite. I am also not using the @nuxtjs/pwa module. I'm not sure if that has anything to do with this.

My dependencies:

"dependencies": {
  "@nuxtjs/auth-next": "^5.0.0-1637745161.ea53f98",
  "@nuxtjs/axios": "^5.13.6",
  "ant-design-vue": "^1.7.8",
  "core-js": "^3.15.1",
  "nuxt-edge": "^2.16.0-27322574.c1d02ea3"
},
"devDependencies": {
  "@nuxt/bridge": "npm:@nuxt/bridge-edge"
}

What I've tested and is working as supposed:

• I can make calls to my auth api and get tokens when logging in.
• Tokens are stored in cookie and loggedIn is set to true.
• User is successfully obtained.
• Middleware works: I can access login page only when unauthenticated and profile only when authenticated. If not authenticated/unauthenticated it redirects me to configured redirects.
• When token is expired it automatically refreshes token or logs you out if refresh token is invalid/revoked. (resetOnError must be true)

My updated `nuxt.config.js`

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'fusionauth-test',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'ant-design-vue/dist/antd.css'
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '@/plugins/antd-ui',
    '@/plugins/axios',
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://dev.auth.nuxtjs.org/
    '@nuxtjs/auth-next'
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL: 'http://localhost:8080/', // Nuxt host url
    credentials: true,
    proxy: true,
  },

  proxy: {
    '/auth/': { target: process.env.FUSIONAUTH_URL, pathRewrite: { '^/auth/': '' } }
  },

  // Auth module configuration: https://dev.auth.nuxtjs.org/
  auth :{
    localStorage: false,
    resetOnError: true,
    strategies: {
      local: {
        scheme: 'refresh',
        tokenType: 'JWT',
        token: {
          property: 'token',
          maxAge: 60 * 10, // 10 Minutes
          global: true,
        },
        refreshToken: {
          tokenRequired: true,
          property: 'refreshToken',
          data: 'refreshToken',
          maxAge: 60 * 60 * 24 * 30 // 30 Days
        },
        user: {
          property: 'user',
          autoFetch: true
        },
        endpoints: {
          login: { url: 'auth/api/login', method: 'post' },
          refresh: { url: 'auth/api/jwt/refresh', method: 'post' },
          logout: { url: 'auth/api/logout', method: 'post' },
          user: { url: 'auth/api/user', method: 'get' }
        },
        autoLogout: false
      }
    },
    redirect: {
      login: '/login',
      logout: '/',
      home: '/profile',
      callback: '/login',
    }
  },

  router: {
    middleware: [
      'auth',
    ],
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    //
  }
})

[toniengelhardt]

Interesting, so it probably is a Vite bug. I also have other errors when disabling Vite in my project, but I'll try to resolve and confirm that it works without Vite and then raise an issue in the Nuxt repo.

[bmulholland]

Quick update: I upgraded packages and fixed yarn dev (cc @hartmut-co-uk); hopefully that's a good first step here.

I've also added a request for assistance with some specific tasks over at https://github.com/nuxt-community/auth-module/issues/1393. If you find anything specific that is needed -- or helpful -- for nuxt bridge or nuxt 3, please let me know and I'll add it to the list.

[hartmut-co-uk]

👍 I can now run and start in dev mode from latest dev branch without any errors. Also can access the page locally. I also was able to login with oauth2 and OpenIDConnect using admin:admin.

So much for quick feedback.

[hartmut-co-uk]

running yarn jest from local all tests are failing, getting those 2 types of errors:

...

I can see gh actions pass on dev branch, is there anything specific to setup to get this working?

[bmulholland]

Ah I'd added a note on running tests to the readme, but it was stuck in a branch. Just pushed it, does this help? https://github.com/nuxt-community/auth-module#development

[hartmut-co-uk]

thx, all tests pass!