Nuxt Auth middleware not working on reload page

[kiketordera]

Reproduction

Follow instructions with Latest version of nuxt, vuefire and nuxt-fire

Steps to reproduce the bug

This middleware won't work when you reload the page manually from the reload button of the browser of navigating to specific link:

// middleware/auth.ts
export default defineNuxtRouteMiddleware(async (to, from) => {
  const user = await getCurrentUser()

  // redirect the user to the login page
  if (!user) {
    return navigateTo({
      path: '/login',
      query: {
        redirect: to.fullPath,
      },
    })
  }
})

Expected behavior

When an user is logged in, it does not redirect to login page either navigating clicking either reloading or going to a specific URL directly

Actual behavior

When an user is logged in, it does not redirect to login page if we are navigating clicking
BUT IT DOES NOT WORK AS EXPECTED WHEN either reloading or going to a specific URL directly

Additional information

Problem is that the middleware does not wait to the user to be loaded from firebase, it executes before so the users is not loaded.

I have SSR Enabled in my nuxt.config.ts:

  routeRules: {
    "**": { prerender: true },
  },

If I change it and add the route I want to go a spa, the middleware actually works as expected in that specific route (in this case '/profile':

  routeRules: {
    "/profile": { prerender: false, ssr: false },
    "**": { prerender: true },
  },

[minyilee95]

I think you can set sessionCookies to true in your nuxt config file and set your environment to have the GOOGLE_APPLICATION_CREDENTIALS

[LiamEderzeel]

I currently use this as a workaround to make it work.

as plugin

// plugins/auth-redirect.ts
export default defineNuxtPlugin({
  name: 'auth-middleware-plugin',
  enforce: 'post',
  async setup() {
    const nuxtApp = useNuxtApp()
    addRouteMiddleware("auth-middleware", defineNuxtRouteMiddleware(async (to) => {
      const user = unref(import.meta.client ? await getCurrentUser() : nuxtApp.$firebaseAuth.currentUser)
      if (user == null && to.path !== '/signin') {
        return navigateTo('/signin')
      }
    }
    ), { global: true })
  },
})

or as middleware

// middleware/auth-redirect.global.ts
export default defineNuxtRouteMiddleware(async (to) => {
  const user = unref(import.meta.client ? await getCurrentUser() : useNuxtApp().$firebaseAuth.currentUser)
  if (user == null && to.path !== '/signin') {
    return navigateTo('/signin')
  }
});