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.
Share Improve this question asked Jan 15 at 1:06 radishhorseradishhorse 356 bronze badges 1 |1 Answer
Reset to default 0Seems 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>
userbecomes 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