single firebaseui import

src/App.vue

@@ -2,11 +2,16 @@
 import { activeNote, updateNote } from '@/composables/useNotes'
 import { viewModes, activeViewMode } from '@/composables/useViewMode'
 import { initialized } from '@/composables/useFirebase'
+import firebase from 'firebase/compat/app'
+import * as firebaseui from 'firebaseui'
 const sideBarCollapsed = ref(false)
 
 const Note = defineAsyncComponent(() => import('@/components/ViewModes/Note.vue'))
 const ListView = defineAsyncComponent(() => import('@/components/ViewModes/ListView.vue'))
 const Mindmap = defineAsyncComponent(() => import('@/components/ViewModes/Mindmap.vue'))
+
+const firebaseAuthUI = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
+provide('firebaseAuthUI', firebaseAuthUI)
 </script>
 
 <template>

src/components/Auth.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import firebase from 'firebase/compat/app'
 import 'firebase/compat/auth'
-import * as firebaseui from 'firebaseui'
 import 'firebaseui/dist/firebaseui.css'
 
 const props = defineProps<{
@@ -12,7 +11,7 @@ const emit = defineEmits<{
   signedIn: [authResult: any]
 }>()
 
-const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
+const ui: any = inject('firebaseAuthUI')
 
 const uiConfig = {
   signInOptions: [

src/components/TopBar.vue

@@ -2,8 +2,6 @@
 import { addNote, setActiveNote, rootNote } from '@/composables/useNotes'
 import { user, signOut as firebaseSignOut } from '@/composables/useFirebase'
 import { initialized } from '@/composables/useFirebase'
-import firebase from 'firebase/compat/app'
-import * as firebaseui from 'firebaseui'
 
 const props = defineProps<{
   sideBarCollapsed: boolean
@@ -18,11 +16,8 @@ const signOut = async (close: () => Promise<boolean>) => {
   close()
 }
 
-const authModalInitialStateOpen = ref(
-  (
-    firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
-  ).isPendingRedirect()
-)
+const authUI: any = inject('firebaseAuthUI')
+const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
 </script>
 <template>
   <div class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
@@ -62,7 +57,6 @@ const authModalInitialStateOpen = ref(
           <template v-else-if="user">
             <div class="dropdown-end dropdown">
               <label tabindex="0" class="btn-outline btn-sm btn py-1 text-white">
-                <!-- {{ user.displayName || user.email }} -->
                 <i class="fa-fw fa-solid fa-user-gear" />
               </label>
               <ul