working auth

package-lock.json

@@ -45,7 +45,7 @@
         "@types/node": "^20.2.1",
         "@types/shortid": "^0.0.29",
         "@types/turndown": "^5.0.1",
-        "@vitejs/plugin-vue": "^4.2.2",
+        "@vitejs/plugin-vue": "^4.2.3",
         "@vue/eslint-config-prettier": "^7.1.0",
         "@vue/eslint-config-typescript": "^11.0.3",
         "@vue/tsconfig": "^0.4.0",
@@ -2339,9 +2339,9 @@
       }
     },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.2.tgz",
-      "integrity": "sha512-kNH4wMAqs13UiZe/2If1ioO0Mjz71rr2oALTl2c5ajBIox9Vz/UGW/wGkr7GA3SC6Eb29c1HtzAtxdGfbXAkfQ==",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz",
+      "integrity": "sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==",
       "dev": true,
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
@@ -14086,9 +14086,9 @@
       }
     },
     "@vitejs/plugin-vue": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.2.tgz",
-      "integrity": "sha512-kNH4wMAqs13UiZe/2If1ioO0Mjz71rr2oALTl2c5ajBIox9Vz/UGW/wGkr7GA3SC6Eb29c1HtzAtxdGfbXAkfQ==",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz",
+      "integrity": "sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==",
       "dev": true,
       "requires": {}
     },

package.json

@@ -52,7 +52,7 @@
     "@types/node": "^20.2.1",
     "@types/shortid": "^0.0.29",
     "@types/turndown": "^5.0.1",
-    "@vitejs/plugin-vue": "^4.2.2",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/tsconfig": "^0.4.0",

postcss.config.js

@@ -1,4 +1,5 @@
 export default {
+
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

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]
+
+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>

src/composables/useAuth.ts

@@ -0,0 +1,12 @@
+import type { User } from '@firebase/auth-types'
+import firebase from 'firebase/compat/app'
+import * as firebaseui from 'firebaseui'
+
+export const user = ref<User | null>(null)
+
+export const isPendingRedirect = () =>
+  (
+    firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
+  ).isPendingRedirect()
+
+export const signOut = () => firebase.auth().signOut()

src/plugins/firebase.ts

@@ -1,5 +1,6 @@
 // import { initializeApp } from 'firebase/app'
 import firebase from 'firebase/compat/app'
+import { user } from '@/composables/useAuth'
 // import { getAnalytics } from "firebase/analytics";
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
@@ -20,3 +21,6 @@ const firebaseConfig = {
 // Initialize Firebase
 export const firebaseApp = firebase.initializeApp(firebaseConfig)
 // const analytics = getAnalytics(app);
+firebase.auth().onAuthStateChanged(function (firebaseUser) {
+  user.value = firebaseUser
+})

vite.config.ts

@@ -12,7 +12,7 @@ const require = createRequire(import.meta.url)
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue(),
+    vue({ script: { defineModel: true } }),
     AutoImport({ imports: ['vue'] }),
     Components(),
     ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark') })