redirect signin

src/components/Auth.vue

@@ -18,7 +18,8 @@ const uiConfig = {
     firebase.auth.EmailAuthProvider.PROVIDER_ID,
     firebase.auth.GoogleAuthProvider.PROVIDER_ID
   ],
-  signInFlow: 'popup',
+  // signInFlow: 'popup',
+  signInFlow: 'redirect',
   callbacks: {
     signInSuccessWithAuthResult(authResult: any) {
       // var user = authResult.user

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>

src/components/TopBar/Settings/SignOut.vue

@@ -4,10 +4,10 @@ import { signOut as firebaseSignOut } from '@/composables/useFirebase'
 import { clearEncryptionKeys } from '@/composables/useEncryption'
 
 const signOut = async (close: () => Promise<boolean>) => {
+  await close()
   await firebaseSignOut()
   preferredNotesSource.value = null
   clearEncryptionKeys()
-  close()
 }
 </script>
 

src/components/ui/UIModal.vue

@@ -51,9 +51,9 @@ const onLeave = (el: Element, done: () => void): void => {
 
 const styleClass = computed(() => {
   const sizeVariants = {
-    'sm': 'max-w-xs',
-    'md': 'max-w-md',
-    'lg': 'max-w-2xl'
+    sm: 'max-w-xs',
+    md: 'max-w-md',
+    lg: 'max-w-2xl'
   }
   const sizeClass = sizeVariants[props.size]
   return [sizeClass]
@@ -67,7 +67,7 @@ defineExpose({ open, close })
     <Transition @enter="onEnter" @leave="onLeave" appear>
       <div class="dui-modal bg-neutral-800 bg-opacity-60" v-if="show" ref="modal">
         <div class="dui-modal-box" :class="styleClass" ref="modalBox">
-          <h3 class="flex items-center text-xl font-bold mb-4" v-if="$slots.title">
+          <h3 class="mb-4 flex items-center text-xl font-bold" v-if="$slots.title">
             <slot name="title" />
           </h3>
           <div>