working auth

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>