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>