Test auth module with Nuxt Bridge

[bmulholland]

Make a new project with nuxt bridge and set up nuxt auth. https://v3.nuxtjs.org/getting-started/bridge/

Ensure it's working and report back

[steklopod]

Middleware of nuxt-auth module works with nuxt-bridge only in dev mode. With production mode we have problems. I tried to start server in both ways (same result):

1. nuxi preview
2. node .output/server/index.mjs

I tested this module and I spent the whole day trying to make it work. And it works. But not like it was showed in docs.

❌ router: { middleware: ['auth'] } seems to be broken in nuxt-bridge for command npm run start

There is a problem with middleware. It does not work (nuxt.confog.ts):

router: { middleware: ['auth'] }

✅ My solution of middleware fix

💁🏻 For me - it's not a preferable solution. But It works only if I set auth middleware in page:

<script lang="ts">
import { authMiddleware } from '~auth/runtime'
export default Vue.extend({
  auth: true,
  middleware: authMiddleware
})
</script>

👆🏻

---

Middleware also doesn't work with such nuxt.config.ts: ❌

// import { authMiddleware } from '@nuxtjs/auth-next/dist/runtime'
import { authMiddleware } from '@nuxtjs/auth-next'

middleware: [authMiddleware],

❌

router: { middleware: [authMiddleware] }

[lucasmb]

Worked for me with Nuxt Bridge latest version "3.0.0-27389502.88da719" Tested it in dev mode, and the static dist export with nitro disabled !

[bmulholland]

I've tried adding nuxt bridge to my production app and found similar: dev mode works, production breaks. In my case, I'm blocked by nuxt/bridge#27

I think there's been some recent nuxt 3/bridge work on middleware, too, so hopefully this gets better supported in the next few weeks.

[dominikjasek]

Hi, any updates?

[toniengelhardt]

Also having this problem with the latest bridge-edge and auth-next:

Internal server error: Failed to resolve import "{path}/frontend/middleware/auth" from "defaultexport:{path}/frontend/.nuxt/middleware.js". Does the file exist?

What's compiled to middleware.js in dev mode is this:

import $2d217e9e from "{path}/frontend/middleware/auth";
const middleware = {
  auth: $2d217e9e
}
export default middleware

This is wrong, bc there is no auth.js file in my middleware, it should be resolved from the auth-next module.

[toniengelhardt]

Here is a reproduction of the problem: https://stackblitz.com/edit/nuxt-bridge-test?file=nuxt.config.ts

@bmulholland, just to confirm, it is currently not possible to upgrade to Bridge when using nuxt/auth right?

[steklopod]

Does not work again 😢

[itpropro]

nuxt-auth will not be the first party auth library for Nuxt 3 and has not really been in active development for quite some time. It's best to either create your own authorization middleware, use a third party library or wait for the rewrite of the official nuxt/auth module. See pi0's comment: https://github.com/nuxt-community/auth-module/issues/893#issuecomment-1143174555

[bmulholland]

While we're waiting on the nuxt/auth rewrite, I have deployed the current auth module to production with nuxt bridge and that's working well. Closing this issue as resolved.

[toniengelhardt]

While we're waiting on the nuxt/auth rewrite, I have deployed the current auth module to production with nuxt bridge and that's working well. Closing this issue as resolved.

@bmulholland do you have it working with Vite enabled as well or just webpack?

[bmulholland]

Just webpack. Vite would be a whole 'nother thing.

[steklopod]

Could you please share a working example of nuxt-bridge + @nuxtjs/auth-next? Because my solution fails when "start": "export NODE_OPTIONS=--openssl-legacy-provider; nuxi preview".

Npm run "dev": "export NODE_OPTIONS=--openssl-legacy-provider && nuxi dev" works

Also everything works with Nuxt 2

package.json:

"dependencies": {
"@nuxtjs/auth-next": "latest",
"@nuxtjs/axios": "latest",
"@nuxtjs/dotenv": "latest",
"@nuxtjs/sentry": "latest",
"@stomp/stompjs": "latest",
"aos": "latest",
"event-source-polyfill": "latest",
"js-cookie": "latest",
"nuxt-edge": "latest",
"nuxt-healthcheck": "latest",
"screenfull": "5.2.0",
"simple-peer": "latest",
"sockjs-client": "latest",
"vanilla-tilt": "latest",
"vue-responsive-video-background-player": "1.3.0",
"vue-swatches": "latest"
},
"devDependencies": {
"@babel/eslint-parser": "latest",
"@mdi/js": "latest",
"@nuxt/bridge": "npm:@nuxt/bridge-edge",
"@nuxt/postcss8": "latest",
"@nuxt/types": "latest",
"@nuxtjs/eslint-config-typescript": "latest",
"@nuxtjs/stylelint-module": "latest",
"@nuxtjs/vuetify": "latest",
"@types/aos": "latest",
"@types/js-cookie": "latest",
"@types/simple-peer": "latest",
"@types/sockjs-client": "latest",
"@types/stompjs": "latest",
"@typescript-eslint/eslint-plugin": "latest",
"eslint": "latest",
"eslint-config-prettier": "latest",
"eslint-plugin-import": "latest",
"eslint-plugin-nuxt": "latest",
"eslint-plugin-vue": "latest",
"eslint-plugin-vuetify": "latest",
"husky": "latest",
"lint-staged": "latest",
"postcss-html": "latest",
"prettier": "latest",
"stylelint": "latest",
"stylelint-config-prettier": "latest",
"stylelint-config-recess-order": "latest",
"stylelint-config-recommended-vue": "latest",
"stylelint-config-sass-guidelines": "latest",
"stylelint-config-standard-scss": "latest",
"stylelint-scss": "latest",
"typescript": "latest"
},

[bmulholland]

Sorry, there's simply too much volume for me to provide help for individual projects.

[thisismydesign]

I had the exact issue @steklopod describes plus the page would fail to load due to OOM error (only with nuxi start, works fine with nuxi dev): FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

I managed to resolve this piece of the puzzle by transpiling defu:

nuxt.config.js

export default defineNuxtConfig({
  // ...

  build: {
    transpile: [
      'defu',
    ],
  },
})

[Draccano]

Do you have any new info about the coming rewrites of the module?