Middleware not working when accessing directly to a auth route

[DannyAndres]

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.

[minstn]

i guess you mean /secret page not /home? in fact, the "logged in user" is only known after the onAuthStateChanged is called.

[DannyAndres]

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

[silvanm]

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?

[smoakey]

@silvanm did you ever find an answer to your problem above?

[Eronne]

Same issue here! Middleware are triggered before the user is authenticated...

[superdiazzz]

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??

[minstn]

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 <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAMIQDVGWJMUD7T6WOVUNWDYPTSB3AVCNFSM6AAAAAAQBCLNWCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBSGU3TOMJSGM> . You are receiving this because you commented.Message ID: ***@***.***>

[EntertainmentPortal]

Found the solution:

• Remove the plugins/auth.js
• Create a folder called 'middleware'
• Create a file inside middleware called 'auth.js'
• Add this code to middleware/auth.js:
  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("/"); } } });
• Update the allowed routes accordingly to your page structure
• Remove the 'middleware: ['auth']' from definePageMeta on every page.
• That's it.

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