Open DannyAndres opened 2 years ago
i guess you mean /secret
page not /home
? in fact, the "logged in user" is only known after the onAuthStateChanged
is called.
yeah, /secret and /home in this case is to represent a route which should be protected and only accesible with a logged user. I think the problem comes with onAuthStateChanged
takes some time to load at the beginning
I think the problem comes with
onAuthStateChanged
takes some time to load at the beginning
I agree that this is the reason.
Is there a way to wait for onAuthStateChanged
to be called on before the Middlewares are being called?
Or should we store the current user in localStorage so that we're independent of onAuthStateChanged
?
@silvanm did you ever find an answer to your problem above?
Same issue here! Middleware are triggered before the user is authenticated...
I have strange issue in my middleware, when i console log like below:
export default defineNuxtPlugin(() => {
addRouteMiddleware('global-test', () => {
}, { global: true })
addRouteMiddleware('auth', async() => {
const { $auth } = useNuxtApp()
console.log("call auth middle 1", $auth);
console.log('call auth middle 2', $auth.currentUser);
})
})
first console shows there is a value, but the second is null??
I assume the $auth.currentUser is not yet initialized, as Firebase Auth is a long process which happens in the browser, not on the server.
On Sun, 21 Jan 2024 at 11:06, 'Uda Jul' via info @.***> wrote:
I have strange issue in my middleware, when i console log like below:
export default defineNuxtPlugin(() => { addRouteMiddleware('global-test', () => {
}, { global: true }) addRouteMiddleware('auth', async() => { const { $auth } = useNuxtApp() console.log("call auth middle 1", $auth); console.log('call auth middle 2', $auth.currentUser); })
})
first console shows there is a value, but the second is null??
Screen.Shot.2024-01-21.at.16.49.42.png (view on web) https://github.com/razorcx-courses/nuxt3-firebase-auth/assets/10770867/b580232b-271b-46a4-afc9-859a16e6b14c
— Reply to this email directly, view it on GitHub https://github.com/razorcx-courses/nuxt3-firebase-auth/issues/1#issuecomment-1902577123, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAMIQDVGWJMUD7T6WOVUNWDYPTSB3AVCNFSM6AAAAAAQBCLNWCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBSGU3TOMJSGM . You are receiving this because you commented.Message ID: @.***>
Found the solution:
export default defineNuxtRouteMiddleware((to, from) => { const user = useFirebaseUser(); const allowedRoutes = ["/", "/login"]; if (user.value) { if (allowedRoutes.includes(to.path)) { return navigateTo("/secret"); } } else { if (!allowedRoutes.includes(to.path)) { return navigateTo("/"); } } });
What it does: it defines the middleware globally, guarding all routes. If you want any exceptions, you can add them to the allowed list. It checks for the useFirebaseUser, which contains a watcher too
If I access /home from url as the first page to load it will not find auth variable with
const auth = getAuth();
nuxtApp.vueApp.provide('auth', auth);
nuxtApp.provide('auth', auth);
because it cannot find it, it will not get passed to the middleware behaving as if there is no user at all.
When the user is already loaded everything work as expected, I suspect it is getAuth() which does not load as quick as it should causing all of this.