working auth

src/components/Auth.vue

@@ -4,13 +4,35 @@ import 'firebase/compat/auth'
 import * as firebaseui from 'firebaseui'
 import 'firebaseui/dist/firebaseui.css'
 
+const emit = defineEmits<{
+  signedIn: [authResult: any]
+}>()
+
 const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
-onMounted(() => {
-  ui.start('#auth', {
-    signInOptions: [firebase.auth.EmailAuthProvider.PROVIDER_ID]
-    // Other config options...
-  })
-})
+
+const uiConfig = {
+  signInOptions: [
+    firebase.auth.EmailAuthProvider.PROVIDER_ID,
+    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+    firebase.auth.FacebookAuthProvider.PROVIDER_ID
+  ],
+  callbacks: {
+    signInSuccessWithAuthResult: function (authResult: any) {
+      // var user = authResult.user
+      // var credential = authResult.credential
+      // var isNewUser = authResult.additionalUserInfo.isNewUser
+      // var providerId = authResult.additionalUserInfo.providerId
+      // var operationType = authResult.operationType
+      // Do something with the returned AuthResult.
+      // Return type determines whether we continue the redirect
+      // automatically or whether we leave that to developer to handle.
+      emit('signedIn', authResult)
+      return false
+    }
+  }
+  // Other config options...
+}
+onMounted(() => ui.start('#auth', uiConfig))
 </script>
 <template>
   <div id="auth"></div>

src/components/Modal.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
 
+const show = defineModel<boolean>({ local: true, default: false })
+
 const modal = ref<HTMLElement | null>(null)
 const modalBox = ref(null)
-const show = ref(false)
 
 const open = () => (show.value = true)
-const close = () => {
+const close = (): Promise<boolean> => {
   return new Promise((resolve) => {
     modal.value?.addEventListener('transitionend', () => resolve(true))
     show.value = false
@@ -28,20 +29,22 @@ const onLeave = (el: Element, done: () => void): void => {
   el.classList.remove('modal-open')
   el.addEventListener('transitionend', () => done())
 }
+
+defineExpose({ open, close })
 </script>
 <template>
   <slot name="activator" v-bind="slotProps"></slot>
   <Teleport to="body">
-    <Transition @enter="onEnter" @leave="onLeave">
+    <Transition @enter="onEnter" @leave="onLeave" appear>
       <div class="modal bg-neutral-800 bg-opacity-60" v-if="show" ref="modal">
         <div class="modal-box" ref="modalBox">
           <h3 class="text-lg font-bold" v-if="$slots.title"><slot name="title" /></h3>
           <p class="py-4">
-            <slot />
+            <slot v-bind="slotProps" />
           </p>
           <div class="modal-action">
             <slot name="actions" v-bind="slotProps">
-              <button class="btn-sm btn" @click="close()">Close</button>
+              <button class="btn-sm btn" @click="close">Close</button>
             </slot>
           </div>
         </div>

src/components/TopBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { addNote, setActiveNote, rootNote } from '@/composables/useNotes'
-import Auth from '@/components/Auth.vue'
+import { user, signOut as firebaseSignOut, isPendingRedirect } from '@/composables/useAuth'
 
 const props = defineProps<{
   sideBarCollapsed: boolean
@@ -10,11 +10,21 @@ const emit = defineEmits<{
   toggleSideBar: []
 }>()
 
-// const authRef = ref<InstanceType<typeof Auth> | null>(null)
-// const closeAuthModal = (close: () => void) => {
-//   close()
-//   authRef.value?.deleteAuthUi()
-// }
+const signOut = (close: () => Promise<Boolean>) => {
+  firebaseSignOut()
+  close()
+}
+
+const signedIn = ref<boolean>(false)
+const closeAuthModal = async (close: () => Promise<boolean>) => {
+  await close()
+  signedIn.value = true
+}
+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">
@@ -38,13 +48,27 @@ const emit = defineEmits<{
         >
           <i class="fas fa-plus-circle text-[1.1rem]" />
         </button>
-        <Modal>
+        <Modal v-if="!signedIn" v-model="redirectPending">
           <template #activator="{ open }">
             <button class="btn-outline btn-sm btn py-1 text-white" @click="open">Sign in</button>
           </template>
-          <template #default><Auth /></template>
+          <template #default="{ close }">
+            <Auth @signedIn="closeAuthModal(close)" />
+          </template>
           <template #actions="{ close }">
-            <button class="btn-sm btn" @click="close()">Close</button>
+            <button class="btn-sm btn" @click="close">Close</button>
+          </template>
+        </Modal>
+        <Modal v-else-if="user">
+          <template #activator="{ open }">
+            <button class="btn-outline btn-sm btn py-1 text-white" @click="open">
+              {{ user.displayName || user.email }}
+            </button>
+          </template>
+          <template #default>Are you sure want to signout?</template>
+          <template #actions="{ close }">
+            <button class="btn-sm btn" @click="close">Close</button>
+            <button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
           </template>
         </Modal>
       </div>