Vue3 + Firebase Authentication (onAuthStateChanged) Problem - firebase

Question

I'm working on vue3 and firebase. I'm having a problem with the onAuthStateChanged.
If I make all the router without the children it works but, if I add /admin and then put the children routes there I cannot stay logged in anymore.
This is my main.js file:
// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { auth } from './plugins/firebase'
import { onAuthStateChanged } from 'firebase/auth'
import App from './App.vue'
import router from './router'
import './assets/styles/index.css'
import { useAuthenticationStore } from './stores/authentication'
let newApp
onAuthStateChanged(auth, (user) => {
if (!newApp) {
newApp = createApp(App)
newApp.use(createPinia())
newApp.use(router)
const authStore = useAuthenticationStore()
authStore.user = user
newApp.mount('#app')
}
})
This is my router. You can see that I need to validate if the user is logged in inside /admin
//router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { useAuthenticationStore } from '../stores/authentication'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: () => import('../views/PublicView.vue'),
children: []
},
{
path: '/admin',
name: 'admin',
children: [
{
path: '',
name: 'dashboard',
component: () => import('../views/admin/HomeView.vue'),
meta: {
requiresAuth: true,
layout: 'PrivateLayout'
}
},
{
path: 'login',
name: 'login',
component: () =>
import('../views/admin/authentication/LoginView.vue'),
meta: {
requiresAuth: false,
layout: 'AuthenticationLayout'
}
},
{
path: 'password',
children: [
{
path: 'recovery',
name: 'password-recovery',
component: () =>
import(
'../views/admin/authentication/PasswordRecoveryView.vue'
),
meta: {
requiresAuth: false,
layout: 'AuthenticationLayout'
}
},
{
path: 'reset',
name: 'password-reset',
component: () =>
import('../views/admin/authentication/PasswordResetView.vue'),
meta: {
requiresAuth: false,
layout: 'AuthenticationLayout'
}
}
]
}
]
},
{
path: '/404',
component: () => import('../views/NotFound.vue')
},
{ path: '/:catchAll(.*)', redirect: '/404' }
]
})
router.beforeEach((to, from, next) => {
const authenticationStore = useAuthenticationStore()
const requiresAuth = to.matched.some((record) => record.meta.requiresAuth)
const isAuthenticated = authenticationStore.user !== null
if (to.path === '/admin/login' && isAuthenticated) {
next('/admin/dashboard')
}
if (requiresAuth && !isAuthenticated) {
next('/admin/login')
}
next()
})
export default router
//plugins/firebase.js
import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
// Firebase configuration
const firebaseConfig = {
apiKey: import.meta.env.VITE_API_KEY,
authDomain: import.meta.env.VITE_AUTH_DOMAIN,
projectId: import.meta.env.VITE_PROJECT_ID,
storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
appId: import.meta.env.VITE_APP_ID,
measurementId: import.meta.env.VITE_MEASUREMENT_ID
}
// Initalize Firebase
const firebaseApp = initializeApp(firebaseConfig)
const auth = getAuth(firebaseApp)
export { auth }