fix auth

src/components/Auth.vue

@@ -5,7 +5,7 @@ import * as firebaseui from 'firebaseui'
 import 'firebaseui/dist/firebaseui.css'
 
 const props = defineProps<{
-  authenticating: boolean
+  authenticating?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -17,11 +17,11 @@ const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(fi
 const uiConfig = {
   signInOptions: [
     firebase.auth.EmailAuthProvider.PROVIDER_ID,
-    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
-    firebase.auth.FacebookAuthProvider.PROVIDER_ID
+    firebase.auth.GoogleAuthProvider.PROVIDER_ID
   ],
+  signInFlow: 'popup',
   callbacks: {
-    signInSuccessWithAuthResult: function (authResult: any) {
+    signInSuccessWithAuthResult(authResult: any) {
       // var user = authResult.user
       // var credential = authResult.credential
       // var isNewUser = authResult.additionalUserInfo.isNewUser
@@ -32,6 +32,9 @@ const uiConfig = {
       // automatically or whether we leave that to developer to handle.
       emit('signedIn', authResult)
       return false
+    },
+    signInFailure(error: any) {
+      console.error('Error signing in', error)
     }
   }
   // Other config options...

src/components/Modal.vue

@@ -3,14 +3,14 @@ import { onClickOutside } from '@vueuse/core'
 
 const props = withDefaults(
   defineProps<{
-    open: boolean
+    open?: boolean
   }>(),
   {
     open: false
   }
 )
 
-const show = ref<boolean>(props.open)
+const show = ref<boolean>(Boolean(props.open))
 
 const modal = ref<HTMLElement | null>(null)
 const modalBox = ref(null)

src/components/TopBar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { addNote, setActiveNote, rootNote } from '@/composables/useNotes'
-import { user, signOut as firebaseSignOut, isPendingRedirect } from '@/composables/useAuth'
+import { user, signOut as firebaseSignOut } from '@/composables/useFirebase'
+import { initialized } from '@/composables/useFirebase'
 
 const props = defineProps<{
   sideBarCollapsed: boolean
@@ -10,22 +11,10 @@ const emit = defineEmits<{
   toggleSideBar: []
 }>()
 
-const signOut = (close: () => Promise<Boolean>) => {
-  firebaseSignOut()
+const signOut = async (close: () => Promise<boolean>) => {
+  await firebaseSignOut()
   close()
 }
-
-const signedIn = ref<boolean>(false)
-const closeAuthModal = async (close: () => Promise<boolean>) => {
-  await close()
-  signedIn.value = true
-  redirectPending.value = false
-}
-watch(user, () => {
-  if (!user.value) signedIn.value = false
-})
-
-const redirectPending = ref<boolean>(isPendingRedirect())
 </script>
 <template>
   <div class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
@@ -49,12 +38,12 @@ const redirectPending = ref<boolean>(isPendingRedirect())
         >
           <i class="fas fa-plus-circle text-[1.1rem]" />
         </button>
-        <Modal v-if="!signedIn" :open="redirectPending">
+        <Modal v-if="initialized && !user">
           <template #activator="{ open }">
             <button class="btn-outline btn-sm btn py-1 text-white" @click="open">Sign in</button>
           </template>
           <template #default="{ close }">
-            <Auth :authenticating="redirectPending" @signedIn="closeAuthModal(close)" />
+            <Auth @signedIn="close" />
           </template>
           <template #actions="{ close }">
             <button class="btn-sm btn" @click="close">Close</button>
@@ -72,6 +61,7 @@ const redirectPending = ref<boolean>(isPendingRedirect())
             <button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
           </template>
         </Modal>
+        <template v-else>Loading...</template>
       </div>
     </div>
   </div>

src/composables/useAuth.ts

@@ -1,12 +0,0 @@
-import type { User } from '@firebase/auth-types'
-import firebase from 'firebase/compat/app'
-import * as firebaseui from 'firebaseui'
-
-export const user = ref<User | null>(null)
-
-export const isPendingRedirect = () =>
-  (
-    firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
-  ).isPendingRedirect()
-
-export const signOut = () => firebase.auth().signOut()

src/composables/useFirebase.ts

@@ -1,6 +1,7 @@
 // import { initializeApp } from 'firebase/app'
 import firebase from 'firebase/compat/app'
-import { user } from '@/composables/useAuth'
+import type { User } from '@firebase/auth-types'
+
 // import { getAnalytics } from "firebase/analytics";
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
@@ -18,9 +19,16 @@ const firebaseConfig = {
   measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID
 }
 
+export const user = ref<User | null>()
+
 // Initialize Firebase
-export const firebaseApp = firebase.initializeApp(firebaseConfig)
-// const analytics = getAnalytics(app);
-firebase.auth().onAuthStateChanged(function (firebaseUser) {
-  user.value = firebaseUser
-})
+export const initializeFirebase = () => {
+  firebase.initializeApp(firebaseConfig)
+  firebase.auth().onAuthStateChanged((firebaseUser) => {
+    user.value = firebaseUser
+  })
+}
+
+export const initialized = computed(() => user.value !== undefined)
+
+export const signOut = () => firebase.auth().signOut()

src/main.ts

@@ -5,7 +5,9 @@ import App from './App.vue'
 import { setDefaultNotes } from '@/composables/useNotes'
 import { defaultNotes } from '@/utils/defaultNotes'
 import { usePreferredDark, useFavicon } from '@vueuse/core'
-import '@/plugins/firebase'
+import { initializeFirebase } from '@/composables/useFirebase'
+
+initializeFirebase()
 
 const isDark = usePreferredDark()
 const favicon = computed(() => (isDark.value ? '/contexted-white.ico' : '/contexted-black.ico'))