not work with nuxt 3 #1323

n4an · 2021-10-13T11:08:04Z

Cannot start nuxt

mrleblanc101 · 2021-10-20T16:08:17Z

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 · 2021-10-23T13:26:17Z

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

Here is the latest issue related to this module: nuxt-community/auth-module#1323

kissu · 2021-10-25T05:59:03Z

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 · 2021-11-05T10:06:10Z

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

hartmut-co-uk · 2021-11-24T08:48:14Z

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 · 2021-11-24T09:08:30Z

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 · 2021-11-24T19:23:38Z

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 · 2021-11-24T19:25:57Z

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 · 2021-11-25T18:46:12Z

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

@bmulholland which branch would that be then?
dev?

bmulholland · 2021-11-25T18:49:05Z

Yes, auth-next is the dev branch

mrleblanc101 · 2021-11-25T19:20:22Z

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

bmulholland · 2021-11-25T19:25:00Z

I don't know yet

mrleblanc101 · 2021-11-25T21:41:33Z

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 · 2021-11-26T08:27:57Z

@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 · 2021-11-26T17:08:08Z

@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 · 2021-11-27T11:33:59Z

@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 · 2021-11-27T11:48:48Z

Re: playwright, I'm hoping that upgrading it will add M1 support.
I found microsoft/playwright#7646 (comment) 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 · 2021-11-27T19:14:15Z

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 · 2021-11-29T10:57:02Z

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 · 2021-11-29T11:08:32Z

@bmulholland yes will do, thanks!

timyourivh · 2021-12-08T10:28:07Z

@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 · 2021-12-08T10:40:42Z

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 · 2021-12-13T00:01:30Z

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...

timyourivh · 2021-12-16T09:54:36Z

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 · 2021-12-17T19:56:19Z

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 · 2021-12-26T23:52:47Z

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 #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 · 2022-01-04T23:21:15Z

👍 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 · 2022-01-04T23:26:34Z

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 · 2022-01-05T10:13:08Z

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 · 2022-01-05T10:57:40Z

thx, all tests pass!

lacorde · 2022-01-11T13:43:13Z

@hartmut-co-uk Good news ! Are you on Nuxt-Bridge or Nuxt 3 ?

bmulholland · 2022-01-20T10:45:28Z

Created #1519
And #1520

Those are small sample projects that will help to confirm if the basics work from scratch.

mrleblanc101 · 2022-02-25T04:54:02Z

@linhherrera96 Use Nuxt 2 as Nuxt 3 is still in Beta or wait for a Nuxt 3 version of this plugin.

linhherrera96 · 2022-02-25T04:59:53Z

@linhherrera96 Use Nuxt 2 as Nuxt 3 is still in Beta or wait for a Nuxt 3 version of this plugin.

so is there any library to replace it? Currently I am using Nuxt 3 to do project.

timyourivh · 2022-05-05T10:45:53Z

so is there any library to replace it? Currently I am using Nuxt 3 to do project.

So I've noticed on the Nuxt 3 roadmap they are working on it, but in a private beta. So I think we'll have to wait since there are no alternatives yet.
My project is still stuck in Nuxt bridge for this and more reasons.

toniengelhardt · 2022-05-05T11:27:38Z

@TimVanHerwijnen do you have nuxt/auth running with Bridge and Vite?

I'm having a middleware issue mentioned here: #1519

timyourivh · 2022-05-12T07:51:04Z

@toniengelhardt I do have it running with @nuxtjs/auth-next: 5.0.0-1648802546.c9880dc and @nuxt/bridge: npm:@nuxt/[email protected] without any issues but I don't use Vite.

Edit:
Tested in both dev and prod

justindasilva · 2022-05-19T15:30:05Z

Anyone have this running with Nuxt Bridge?
If so, are there specific package versions that need to be set?

Currently seeing this:

 ERROR  [worker reload] [worker init] The requested module 'file:///Users/justin.dasilva/Sites/mercatus/cm/config-manager/app/node_modules/defu/dist/defu.mjs' does not provide an export named 'createDefu'

  import { createDefu } from 'node_modules/defu/dist/defu.mjs';
  ^^^^^^^^^^
  SyntaxError: The requested module 'node_modules/defu/dist/defu.mjs' does not provide an export named 'createDefu'
  at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
  at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
  at async Promise.all (index 0)
  at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
  at async loadESM (node:internal/process/esm_loader:88:5)
  at async handleMainPromise (node:internal/modules/run_main:65:12)

aborn · 2022-06-10T13:50:01Z

OpenID-Connect(OIDC) integration module for nuxt 3.0.

phillipmohr · 2022-06-15T11:01:52Z

OpenID-Connect(OIDC) integration module for nuxt 3.0.

Thanks! I looked into the examples. But how would I restrict certain pages? For example:
pages

index.vue (< this is public)
admin (< these are all restricted and only visible after login)
- index.vue
- settings.vue

aborn · 2022-06-15T11:48:16Z

OpenID-Connect(OIDC) integration module for nuxt 3.0

This exampe page shows how to use it in restricted pages. For public pages, you don't need ref: const { $oidc } = useNuxtApp() at setup script, which page can't get use info.

amery · 2022-06-23T15:34:20Z

anyone using @nxutjs-alt/auth in the meantime? I'm getting undefined when trying to access useNuxtApp().$auth on a form submit function

Slaknoah · 2022-07-06T20:38:11Z

I only got it working with Vite + Nuxt Bridge Next by adding this to my nuxt config. Hope it helps someone out.

vite: { 
    optimizeDeps: {
      include: [
        'cookie'
      ]
    }
  }

toniengelhardt · 2022-08-06T13:24:41Z

@Slaknoah could you share your full config? That would be amazing!

Arturexe · 2022-12-04T19:48:50Z

Is there a replacement now?

amery · 2022-12-04T20:01:50Z

Is there a replacement now?

https://www.npmjs.com/package/@nuxtjs-alt/auth works fine, but it's diverged from slightly from @nuxtjs/auth

n4an added the bug label Oct 13, 2021

kissu added a commit to kissu/isnuxt3ready that referenced this issue Oct 25, 2021

fix: add issueUrl to @nuxtjs/auth

8167860

Here is the latest issue related to this module: nuxt-community/auth-module#1323

kissu mentioned this issue Oct 25, 2021

fix: add issueUrl to @nuxtjs/auth owlnai/isnuxt3ready#10

Merged

toniengelhardt mentioned this issue Apr 13, 2022

Replace of 'undefined' in router middleware nuxt/bridge#164

Closed

bmulholland mentioned this issue Dec 26, 2021

Help Wanted #1393

Open

9 tasks

scherii mentioned this issue Jan 20, 2022

Set Bridge Compatibility for @nuxt/auth nuxt/modules#286

Closed

This comment was marked as off-topic.

Sign in to view

not work with nuxt 3 #1323

not work with nuxt 3 #1323

Comments

n4an commented Oct 13, 2021 • edited Loading

mrleblanc101 commented Oct 20, 2021

ngajhede commented Oct 23, 2021

kissu commented Oct 25, 2021

bmulholland commented Nov 5, 2021

hartmut-co-uk commented Nov 24, 2021

bmulholland commented Nov 24, 2021

Dreaming-Codes commented Nov 24, 2021

mrleblanc101 commented Nov 24, 2021

hartmut-co-uk commented Nov 25, 2021

bmulholland commented Nov 25, 2021

mrleblanc101 commented Nov 25, 2021

bmulholland commented Nov 25, 2021

mrleblanc101 commented Nov 25, 2021 • edited Loading

bmulholland commented Nov 26, 2021

hartmut-co-uk commented Nov 26, 2021

bmulholland commented Nov 27, 2021

hartmut-co-uk commented Nov 27, 2021

toniengelhardt commented Nov 27, 2021

bmulholland commented Nov 29, 2021

toniengelhardt commented Nov 29, 2021

timyourivh commented Dec 8, 2021 • edited Loading

toniengelhardt commented Dec 8, 2021

toniengelhardt commented Dec 13, 2021

timyourivh commented Dec 16, 2021 • edited Loading

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

My dependencies:

What I've tested and is working as supposed:

toniengelhardt commented Dec 17, 2021 • edited Loading

bmulholland commented Dec 26, 2021 • edited Loading

hartmut-co-uk commented Jan 4, 2022

hartmut-co-uk commented Jan 4, 2022

bmulholland commented Jan 5, 2022

hartmut-co-uk commented Jan 5, 2022

lacorde commented Jan 11, 2022

bmulholland commented Jan 20, 2022

This comment was marked as off-topic.

mrleblanc101 commented Feb 25, 2022

linhherrera96 commented Feb 25, 2022

timyourivh commented May 5, 2022 • edited Loading

toniengelhardt commented May 5, 2022

timyourivh commented May 12, 2022 • edited Loading

justindasilva commented May 19, 2022

aborn commented Jun 10, 2022

phillipmohr commented Jun 15, 2022

aborn commented Jun 15, 2022

amery commented Jun 23, 2022 • edited Loading

Slaknoah commented Jul 6, 2022

toniengelhardt commented Aug 6, 2022

Arturexe commented Dec 4, 2022

amery commented Dec 4, 2022

n4an commented Oct 13, 2021 •

edited

Loading

mrleblanc101 commented Nov 25, 2021 •

edited

Loading

timyourivh commented Dec 8, 2021 •

edited

Loading

timyourivh commented Dec 16, 2021 •

edited

Loading

toniengelhardt commented Dec 17, 2021 •

edited

Loading

bmulholland commented Dec 26, 2021 •

edited

Loading

timyourivh commented May 5, 2022 •

edited

Loading

timyourivh commented May 12, 2022 •

edited

Loading

amery commented Jun 23, 2022 •

edited

Loading