Component setup runs before router middleware is resolved

[sangyookm]

Environment

---

• Operating System: Darwin
• Node Version: v18.12.0
• Nuxt Version: 3.0.0-rc.13
• Nitro Version: 0.6.1
• Package Manager: npm@8.19.2
• Builder: vite
• User Config: runtimeConfig, vite, modules, i18n
• Runtime Modules: @pinia/nuxt@0.4.3, @nuxtjs/i18n@8.0.0-beta.1
• Build Modules: -

---

Reproduction

// middleware/auth.global.js
export default defineNuxtRouteMiddleware(async (to)=> {
  if (process.client) return

  const app = useNuxtApp()
  const event = app.ssrContext.event
  const accessToken = getCookie(event, 'accessToken')
  
  // Authenticate if accessToken exists
  // ...

  const { isLoggedIn } = useUserStore()
  const publicPaths = [
    //.. some public paths not needing authentication
  ]
  if (!publicPaths.includes(to.path) && !isLoggedIn) {
    return navigateTo('/login')
  } else if (publicPaths.includes(to.path) && isLoggedIn) {
    return navigateTo('/')
  } 
})

// pages/index.vue
export default defineNuxtComponent({
  async setup() {
    const {data: someData} = await useAsyncData(()=> {
      return $fetch('/api/some_api_auth_required', {
        method: 'get',
        headers: useRequestHeaders(['cookie'])
      })
    })
    return {
      someData
    }
  }
})

Describe the bug

I'm seeing that setup block data fetching is being called before router middleware is resolved.

When I visit '/' without authentication, the page redirects to '/login' like expected.

But, on nuxt server console, I'll see that '/api/some_api_auth_required' was called and
failed because accesstoken doesnt exist (not authenticated).

Is this normal behavior? If so, how w

Additional context

No response

Logs

No response

[sangyookm]

I found a similar issue #15136
but, like the answer has stated, I did if (process.client) return to run the middleware on server.

Have I understood something differently?

[danielroe]

Would you provide a reproduction? 🙏

[sangyookm]

@danielroe Here you go https://stackblitz.com/edit/github-pednm9-yuvywh?file=middleware/auth.global.js

[madsh93]

After updating @sangyookim-ogq repro I still get the error on Nuxt Edge

https://stackblitz.com/edit/github-pednm9-5522a8?file=package.json

am I missing something @pi0 ?

[danielroe]

your reproduction was not using nuxt edge (if you look in the package-lock.json) - likely a stackblitz issue.

the current edge release is unstable but you should be able to test in rc14 shortly.

[madsh93]

@danielroe

https://stackblitz.com/edit/github-pednm9-5522a8?file=pages/index.vue

Here it is running RC 14. It seems to still be running code it shouldn't.

[sangyookm]

on my local version with Nuxt 3 stable, I'm still getting the issue as well, but partially. I'm not sure if this is intended behavior, but when I refresh the browser from /login, I won't get the error like before. However, when I visit /, I will get the error and be redirected to /login. Being redirected to /login is expected and normal behavior, but the error isn't.

[madsh93]

This is also causing serverless functions in Vercel to crash, giving a fatal error screen. I am not sure I agree with it being a minor bug. It is definitely not minor for me.

Edit: After moving to sidebase/nuxt-auth this is no longer an issue for me. I am not sure how it handles the redirect but it works now, and doesn't cause setup to run.

[ivanempire]

Chiming in here - I can reproduce this issue locally as well, similar situation where one of my protected routes still queries the DB after a navigateTo call, but fails because there's no token.

[teamboot88]

I have same issue. I'm waiting for it to be resolved.

[BracketJohn]

This issue also appears in nuxt-auth: sidebase/nuxt-auth#100