Vuefire Nuxt 3 SSR - useCurrentUser null on server-side

Question

In my Nuxt 3 app I have a global auth middleware that looks like so:

// middleware/auth.global.ts
export default defineNuxtRouteMiddleware(async (to, from) => {
  /**
   * @link: https://v3.vuefire.vuejs.org/nuxt/auth.html#:~:text=//%20middleware/auth.ts
   */

  const user = await getCurrentUser();
  const publicPages = ["/login", "/register", "/thank-you", "/verify"];

  if (!user && !publicPages.includes(to.path)) {
    return navigateTo({
      path: "/login",
      query: {
        redirect: to.fullPath,
      },
    });
  }
});

This middleware causes me however to be redirected to the login page after a full reload as await getCurrentUser() appears to be null on the server-side.

And obviously, once redirected, I am stuck there as typing in /my-authed-page/ in the URL is a effectively a server request.

I also tried to patch this by forcing a redirection to /my-authed-page/ if the user is authenticated and on the login, but a) this is causing other issues and b) this is a "patch".

The docs read:

Nuxt VueFire integrates with Firebase Authentication module to automatically synchronize the current user state on the server and the client

Isn't this supposed to mean that getCurrentUser() should be available on the server too after full reload and therefore not lead to this issue?

Any help would be massively appreciated.

Thanks

Answer 1

Session cookies are the answer to the question, as per the discussion here: https://github.com/vuejs/vuefire/discussions/1404.

So:

export default defineNuxtConfig({
  // ...
  vuefire: {
    // ensures the auth module is enabled
    auth: {
      enabled: true
      // enables the sessionCookie
      sessionCookie: true
    },
  },
})