redirect signin

src/components/TopBar.vue

@@ -16,7 +16,12 @@ const emit = defineEmits<{
 const searchActive = ref<boolean>(false)
 
 const authUI: any = inject('firebaseAuthUI')
-const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
+const authPending = ref<boolean>(authUI.isPendingRedirect())
+
+const handleSignIn = async (close: () => Promise<boolean>) => {
+  await close()
+  authPending.value = false
+}
 </script>
 <template>
   <div class="z-[500] flex h-[50px] bg-primary" :class="searchActive && 'search-active'">
@@ -36,7 +41,7 @@ const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
         />
       </div>
       <div class="flex h-full flex-grow flex-row items-center gap-2 pl-5 pr-3">
-        <template v-if="!loading">
+        <template v-if="!loading || authPending">
           <SearchBar @active="(active) => (searchActive = active)" />
           <UIButton
             size="sm"
@@ -46,7 +51,7 @@ const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
           >
             <i class="fa-fw fa-solid fa-plus-circle scale-[115%]" />
           </UIButton>
-          <UIModal v-if="initialized && !user" :open="authModalInitialStateOpen">
+          <UIModal v-if="(initialized && !user) || authPending" :open="authPending">
             <template #activator="{ open }">
               <UIButton
                 size="sm"
@@ -57,9 +62,9 @@ const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
                 Sign in
               </UIButton>
             </template>
-            <template #title>Sign in</template>
+            <template #title>{{ authPending ? 'Signing in...' : 'Sign in' }}</template>
             <template #default="{ close }">
-              <Auth @signedIn="close" />
+              <Auth @signedIn="handleSignIn(close)" :authenticating="authPending" />
             </template>
             <template #actions="{ close }">
               <UIButton size="sm" @click="close">Close</UIButton>