I'm using Vue3 and Nuxt3 for a dashboard. I'm currently using the VueFire Nuxt plugin to handle Firebase Authentication.

I have a logout button that signs the user out and then routes to the login page. When I click the logout button, I get redirected, but errors are thrown because the API requests I make on the homepage are getting called again, and since there is no signed in user, the request fails.

This is a minimum, reproducible example of the error:

pages/test.vue

<script setup>
definePageMeta({
  layout: "default",
  pageType: "loggedIn",
});
import { signOut } from "@firebase/auth";
import axios from "axios";

const request_response = ref(0);
watchEffect(() => {
  getCurrentUser()
    .then((user) => {
      return user.getIdToken();
    })
    .then((access_token) => {
      let request = {
        url: ";,
        method: "GET",
        headers: {
          authorization: "Bearer " + access_token,
        },
      };
      return axios(request);
    })
    .then((response) => {
      request_response.value = response.data;
    })
    .catch((error) => {
      console.error(error);
    });
});

const auth = useFirebaseAuth();
async function logout() {
  await signOut(auth);
  await navigateTo("/authentication/login");
}
</script>

<template>
  <div>
    <section>
      <v-row class="py-0">
        <v-btn @click="logout">logout</v-btn>
        <div>{{ request_response }}</div>
      </v-row>
    </section>
  </div>
</template>

When the logout button is pressed, I get redirect to the login page, and the following error is thrown: user is null (line 29 of test.vue)

This is my Nuxt config file:

import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: false },
  build: {
    transpile: ["vuetify"],
  },
  modules: [
    "nuxt-vuefire",
  ],
  vite: {
    server: {
      hmr: {
        overlay: false,
      },
    },
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
  vuefire: {
    auth: {
      enabled: true,
    },
    config: {
      apiKey: ...,
      authDomain: ...,
      projectId: ...,
      storageBucket: ...,
      messagingSenderId: ...,
      appId: ...,
    },
  }
});

I don't have any middleware implemented at the moment.

Is there a step I'm missing before redirecting to login?

Any help would be appreciated! Thanks in advance.

I'm using Vue3 and Nuxt3 for a dashboard. I'm currently using the VueFire Nuxt plugin to handle Firebase Authentication.

I have a logout button that signs the user out and then routes to the login page. When I click the logout button, I get redirected, but errors are thrown because the API requests I make on the homepage are getting called again, and since there is no signed in user, the request fails.

This is a minimum, reproducible example of the error:

pages/test.vue

<script setup>
definePageMeta({
  layout: "default",
  pageType: "loggedIn",
});
import { signOut } from "@firebase/auth";
import axios from "axios";

const request_response = ref(0);
watchEffect(() => {
  getCurrentUser()
    .then((user) => {
      return user.getIdToken();
    })
    .then((access_token) => {
      let request = {
        url: "https://api.test/request",
        method: "GET",
        headers: {
          authorization: "Bearer " + access_token,
        },
      };
      return axios(request);
    })
    .then((response) => {
      request_response.value = response.data;
    })
    .catch((error) => {
      console.error(error);
    });
});

const auth = useFirebaseAuth();
async function logout() {
  await signOut(auth);
  await navigateTo("/authentication/login");
}
</script>

<template>
  <div>
    <section>
      <v-row class="py-0">
        <v-btn @click="logout">logout</v-btn>
        <div>{{ request_response }}</div>
      </v-row>
    </section>
  </div>
</template>

When the logout button is pressed, I get redirect to the login page, and the following error is thrown: user is null (line 29 of test.vue)

This is my Nuxt config file:

import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: false },
  build: {
    transpile: ["vuetify"],
  },
  modules: [
    "nuxt-vuefire",
  ],
  vite: {
    server: {
      hmr: {
        overlay: false,
      },
    },
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
  vuefire: {
    auth: {
      enabled: true,
    },
    config: {
      apiKey: ...,
      authDomain: ...,
      projectId: ...,
      storageBucket: ...,
      messagingSenderId: ...,
      appId: ...,
    },
  }
});

I don't have any middleware implemented at the moment.

Is there a step I'm missing before redirecting to login?

Any help would be appreciated! Thanks in advance.

• firebase
• vuejs3
• nuxt3.js
• vuefire

• 1 the watcher will run anytime a dependency changes, i.e. when user becomes defined OR undefined. it's good practice to check if a variable is null/undefined before trying to use it. a simple if statement will prevent improper requests. – yoduh Commented Jan 15 at 4:14

1 Answer 1

Seems like watchEffect is triggered when the component is mounted, and it continues to run even after the user logs out.

What you can do is to unwatch/stop the watchEffect before calling signOut.

Here's how you can unwatch a watcher. For more go to the docs

<script setup>
definePageMeta({
  layout: "default",
  pageType: "loggedIn",
});
import { signOut } from "@firebase/auth";
import axios from "axios";

const request_response = ref(0);

const unwatch = watchEffect(() => {
  getCurrentUser()
    .then((user) => {
      return user.getIdToken();
    })
    .then((access_token) => {
      let request = {
        url: "https://api.test/request",
        method: "GET",
        headers: {
          authorization: "Bearer " + access_token,
        },
      };
      return axios(request);
    })
    .then((response) => {
      request_response.value = response.data;
    })
    .catch((error) => {
      console.error(error);
    });
});

const auth = useFirebaseAuth();
async function logout() {
  unwatch()
  await signOut(auth);
  await navigateTo("/authentication/login");
}
</script>