Защита роутов vue3 + firebase

У меня есть пачка роутов

import { createRouter, createWebHistory } from 'vue-router'
import firebase from 'firebase'

const routes = [
    {
        path: '/',
        name: 'login',
        meta: {layout: 'empty'},
        component: () => import('@/views/LoginPage.vue')
    },
    {
        path: '/register',
        name: 'register',
        meta: {layout: 'empty'},
        component: () => import('@/views/RegisterPage.vue')
    },
  {
    path: '/main',
    name: 'home',
        meta: {layout: 'main', auth: true},
    component: () => import('@/views/MainPage.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

Я пытаюсь прописать код ниже

router.beforeEach((to, from, next)=>{
  const currentUser = firebase.auth().currentUser;
  const requireAuth = to.matched.some(record => record.meta.auth);
  if(requireAuth && !currentUser){
    next({name:'signIn'})
  }else{
    next();
  }
});

В итоге я получаю ошибку Cannot find module 'firebase' Я работал по старой статье, где так импортировать было OK.

На данный момент появилась новая документация, где нужно импортить таким образом import { initializeApp } from 'firebase/app';. Но проблема в том, что я все равно получаю ошибку [Vue Router warn]: Unexpected error when starting the router: ReferenceError: firebase is not defined.

А при попытке вместо firebase прописать initializeApp я получаю ошибку связанную с auth. Устанавливал firebase через npm install firebase Если кто-то знает как это переписать под новую доку, буду сильно благодарен.