feat: composables to use firebase

posva · posva · commit f854b6764f74 · 2022-11-08T18:40:49.000+01:00
diff --git a/playground/src/firebase.ts b/playground/src/firebase.ts
@@ -1,11 +1,7 @@
-import { initializeApp, type FirebaseApp } from 'firebase/app'
-import { Firestore, getFirestore } from 'firebase/firestore'
-import { inject, type App, type InjectionKey } from 'vue'
-import { getAnalytics, type Analytics } from 'firebase/analytics'
-import { Database, getDatabase } from 'firebase/database'
+import { initializeApp } from 'firebase/app'
 
 export function createFirebaseApp() {
-  const firebaseApp = initializeApp({
+  return initializeApp({
     apiKey: 'AIzaSyAkUKe36TPWL2eZTshgk-Xl4bY_R5SB97U',
     authDomain: 'vue-fire-store.firebaseapp.com',
     databaseURL: 'https://vue-fire-store.firebaseio.com',
@@ -15,50 +11,4 @@ export function createFirebaseApp() {
     appId: '1:998674887640:web:1e2bb2cc3e5eb2fc3478ad',
     measurementId: 'G-RL4BTWXKJ7',
   })
-
-  const firestore = getFirestore(firebaseApp)
-  const database = getDatabase(firebaseApp)
-  const analytics = getAnalytics(firebaseApp)
-
-  // connectFirestoreEmulator(firestore, 'localhost', 8080)
-
-  return { firebaseApp, firestore, database, analytics }
-}
-
-export function VueFirePlugin({
-  firebaseApp,
-  firestore,
-  analytics,
-  database,
-}: ReturnType<typeof createFirebaseApp>) {
-  return (app: App) => {
-    app.provide(FirebaseAppInjectKey, firebaseApp)
-    app.provide(FirestoreInjectKey, firestore)
-    app.provide(FirebaseAnalyticsInjectKey, analytics)
-    app.provide(DatabaseInjectKey, database)
-  }
-}
-
-export const FirestoreInjectKey: InjectionKey<Firestore> = Symbol('firestore')
-export const DatabaseInjectKey: InjectionKey<Database> = Symbol('database')
-export const FirebaseAppInjectKey: InjectionKey<FirebaseApp> =
-  Symbol('firebaseApp')
-export const FirebaseAnalyticsInjectKey: InjectionKey<Analytics> =
-  Symbol('analytics')
-
-export function useFirestore() {
-  // TODO: warning with no currentInstance
-  return inject(FirestoreInjectKey)!
-}
-
-export function useDatabase() {
-  return inject(DatabaseInjectKey)!
-}
-
-export function useFirebaseApp() {
-  return inject(FirebaseAppInjectKey)!
-}
-
-export function useFirebaseAnalytics() {
-  return inject(FirebaseAnalyticsInjectKey)!
 }
diff --git a/playground/src/main.ts b/playground/src/main.ts
@@ -1,8 +1,8 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import { firestorePlugin } from 'vuefire'
+import { firestorePlugin, VueFire, VueFireAuth } from 'vuefire'
 import App from './App.vue'
-import { createFirebaseApp, VueFirePlugin } from './firebase'
+import { createFirebaseApp } from './firebase'
 import { createWebHistory, createRouter } from 'vue-router/auto'
 import { createStore } from 'vuex'
 
@@ -22,8 +22,11 @@ const store = createStore({
 const app = createApp(App)
 app
   .use(createPinia())
+  .use(VueFire, {
+    firebaseApp: createFirebaseApp(),
+    modules: [VueFireAuth],
+  })
   .use(firestorePlugin)
-  .use(VueFirePlugin(createFirebaseApp()))
   .use(store)
   .use(router)
 
diff --git a/playground/src/pages/authentication.vue b/playground/src/pages/authentication.vue
@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import {
+  createUserWithEmailAndPassword,
+  EmailAuthProvider,
+  linkWithCredential,
+  signInAnonymously,
+  signInWithEmailAndPassword,
+  signInWithPopup,
+  signInWithRedirect,
+  signOut,
+} from 'firebase/auth'
+import { ref } from 'vue'
+import { useCurrentUser, useFirebaseAuth } from 'vuefire'
+
+const auth = useFirebaseAuth()
+const user = useCurrentUser()
+
+// new user
+const email = ref('')
+const password = ref('')
+function signUp() {
+  // link to an existing anonymous account
+  if (user.value?.isAnonymous) {
+    const credential = EmailAuthProvider.credential(email.value, password.value)
+    return linkWithCredential(user.value, credential).then(() => {
+      return signInWithEmailAndPassword(auth, email.value, password.value)
+    })
+  }
+
+  // create a regular account
+  return createUserWithEmailAndPassword(auth, email.value, password.value)
+}
+</script>
+
+<template>
+  <main>
+    <h1>Auth playground</h1>
+    <button @click="signOut(auth)">SignOut</button>
+    <button @click="signInAnonymously(auth)">Anonymous signIn</button>
+    <form @submit.prevent="signUp()">
+      <fieldset>
+        <legend>New User</legend>
+
+        <label> Email: <input type="email" required v-model="email" /> </label>
+
+        <label>
+          Password: <input type="password" required v-model="password" />
+        </label>
+
+        <button>Create</button>
+      </fieldset>
+    </form>
+
+    <form @submit.prevent="signInWithEmailAndPassword(auth, email, password)">
+      <fieldset>
+        <legend>Sign in</legend>
+
+        <label> Email: <input type="email" required v-model="email" /> </label>
+
+        <label>
+          Password: <input type="password" required v-model="password" />
+        </label>
+
+        <button>Signin</button>
+      </fieldset>
+    </form>
+    <p>Current User:</p>
+    <pre>{{ user }}</pre>
+  </main>
+</template>
diff --git a/playground/src/pages/config.vue b/playground/src/pages/config.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { doc, getDoc } from 'firebase/firestore'
-import { useDocument } from 'vuefire'
-import { useFirestore } from '@/firebase'
+import { useDocument, useFirestore, usePendingPromises } from 'vuefire'
 import { ref } from 'vue'
-import { usePendingPromises } from '../../../src/ssr/plugin'
 
 const db = useFirestore()
 const configRef = doc(db, 'configs', 'jORwjIykFo2NmkdzTkhU')
diff --git a/playground/src/pages/converter-with-number.vue b/playground/src/pages/converter-with-number.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { collection, doc } from 'firebase/firestore'
-import { useCollection } from 'vuefire'
-import { useFirestore } from '@/firebase'
+import { useCollection, useFirestore } from 'vuefire'
 
 const db = useFirestore()
 const numbers = useCollection(
diff --git a/playground/src/pages/nested-collections.vue b/playground/src/pages/nested-collections.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { collection } from 'firebase/firestore'
-import { useCollection } from 'vuefire'
-import { useFirestore } from '@/firebase'
+import { useCollection, useFirestore } from 'vuefire'
 
 const db = useFirestore()
 const tweetsRef = collection(db, 'tweets')
diff --git a/playground/src/pages/nested-refs-list.vue b/playground/src/pages/nested-refs-list.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { collection, doc, getDoc } from 'firebase/firestore'
-import { useCollection, useDocument } from 'vuefire'
-import { useFirestore } from '@/firebase'
+import { collection } from 'firebase/firestore'
+import { useCollection, useFirestore } from 'vuefire'
 
 const db = useFirestore()
 const nestedRefs = collection(db, 'playground/nested-refs/list')
diff --git a/playground/src/pages/rtdb-todos.vue b/playground/src/pages/rtdb-todos.vue
@@ -7,8 +7,7 @@ import {
   update,
 } from 'firebase/database'
 import { ref } from 'vue'
-import { useList } from 'vuefire'
-import { useDatabase } from '@/firebase'
+import { useDatabase, useList } from 'vuefire'
 
 interface Todo {
   created: Date
diff --git a/playground/src/pages/todos.vue b/playground/src/pages/todos.vue
@@ -10,15 +10,17 @@ import {
   where,
 } from 'firebase/firestore'
 import { ref } from 'vue'
-import { useCollection } from 'vuefire'
-import { useFirestore } from '@/firebase'
+import { useCollection, useFirestore } from 'vuefire'
 
 interface Todo {
   created: Date
   finished: boolean
   text: string
 }
 
+// TODO: expose some kind of type to make this posssible
+// type TodoData = _VueFireQueryData<Todo>
+
 const db = useFirestore()
 const todosRef = collection(db, 'todos')
 const todosWithConverterRef = collection(db, 'todos').withConverter<Todo>({
diff --git a/playground/src/pages/vuex-store.vue b/playground/src/pages/vuex-store.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import { useFirestore } from '@/firebase'
 import { doc, setDoc } from 'firebase/firestore'
 import { toRef } from 'vue'
-import { useDocument } from 'vuefire'
+import { useDocument, useFirestore } from 'vuefire'
 import { useStore } from 'vuex'
 
 const store = useStore()
diff --git a/playground/typed-router.d.ts b/playground/typed-router.d.ts
@@ -36,6 +36,12 @@ import type {
 declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>
+    '/authentication': RouteRecordInfo<
+      '/authentication',
+      '/authentication',
+      Record<never, never>,
+      Record<never, never>
+    >
     '/config': RouteRecordInfo<
       '/config',
       '/config',
diff --git a/src/app/index.ts b/src/app/index.ts
@@ -6,20 +6,20 @@ export const _FirebaseAppInjectionKey: InjectionKey<FirebaseApp> =
   Symbol('firebaseApp')
 
 /**
- * Gets the application firebase app.
+ * Gets the firebase app instance.
  *
  * @param name - optional firebase app name
  * @returns the firebase app
  */
 export function useFirebaseApp(name?: string): FirebaseApp {
   // TODO: warn no current scope
-  const firebaseApp: FirebaseApp =
+  return (
     (getCurrentScope() &&
       inject(
         _FirebaseAppInjectionKey,
         // avoid the inject not found warning
         null
       )) ||
     getApp(name)
-  return firebaseApp
+  )
 }
diff --git a/src/auth/index.ts b/src/auth/index.ts
@@ -0,0 +1,28 @@
+import { FirebaseApp } from 'firebase/app'
+import { getAuth, User } from 'firebase/auth'
+import { App, shallowRef } from 'vue'
+import { useFirebaseApp } from '../app'
+import { scope } from '../globals'
+import { AuthUserInjectSymbol, setupOnAuthStateChanged } from './user'
+
+export { setupOnAuthStateChanged, useCurrentUser } from './user'
+
+// TODO: figure out a way, could be related to adding a new API to Vue that allows library authors to set the active app and therefore allow top level injcections
+// const userMap = new WeakMap<FirebaseApp, Ref<User | null | undefined>>()
+
+export function VueFireAuth(firebaseApp: FirebaseApp | undefined, app: App) {
+  const user = scope.run(() => shallowRef<User | null | undefined>())!
+  // userMap.set(app, user)
+  app.provide(AuthUserInjectSymbol, user)
+  setupOnAuthStateChanged(user, firebaseApp)
+}
+
+/**
+ * Retrieves the Firebase Auth instance.
+ *
+ * @param name - name of the application
+ * @returns the Auth instance
+ */
+export function useFirebaseAuth(name?: string) {
+  return getAuth(useFirebaseApp(name))
+}
diff --git a/src/auth/user.ts b/src/auth/user.ts
@@ -0,0 +1,36 @@
+import { FirebaseApp } from 'firebase/app'
+import { getAuth, onIdTokenChanged, User } from 'firebase/auth'
+import { inject, InjectionKey, Ref } from 'vue'
+
+export const AuthUserInjectSymbol: InjectionKey<Ref<User | null | undefined>> =
+  Symbol('user')
+
+/**
+ * Returns a shallowRef of the currently authenticated user in the firebase app. The ref is null if no user is
+ * authenticated or when the user logs out. The ref is undefined when the user is not yet loaded.
+ */
+export function useCurrentUser() {
+  // TODO: warn no current instance
+  return inject(AuthUserInjectSymbol)!
+}
+
+export function setupOnAuthStateChanged(
+  user: Ref<User | null | undefined>,
+  app?: FirebaseApp
+) {
+  const auth = getAuth(app)
+  let resolve!: (value: User | null) => void
+  const isReady = new Promise((_resolve) => {
+    resolve = _resolve
+  })
+
+  // onAuthStateChanged doesn't trigger in all scenarios like when the user goes links an existing account and their
+  // data is updated
+  // https://github.com/firebase/firebase-js-sdk/issues/4227
+  onIdTokenChanged(auth, (userData) => {
+    user.value = userData
+    resolve(userData)
+  })
+
+  return { isReady }
+}
diff --git a/src/database/index.ts b/src/database/index.ts
@@ -9,7 +9,7 @@ import {
   watch,
   isRef,
 } from 'vue-demi'
-import type { DatabaseReference, Query } from 'firebase/database'
+import { DatabaseReference, getDatabase, Query } from 'firebase/database'
 import {
   noop,
   OperationsType,
@@ -33,6 +33,7 @@ import {
   _RefDatabase,
 } from './utils'
 import { addPendingPromise } from '../ssr/plugin'
+import { useFirebaseApp } from '../app'
 
 export { databasePlugin } from './optionsApi'
 
@@ -194,3 +195,13 @@ export function useObject<T = unknown>(
 
 export const unbind = (target: Ref, reset?: ResetOption) =>
   internalUnbind('', rtdbUnbinds.get(target), reset)
+
+/**
+ * Retrieves the Database instance.
+ *
+ * @param name - name of the application
+ * @returns the Database instance
+ */
+export function useDatabase(name?: string) {
+  return getDatabase(useFirebaseApp(name))
+}
diff --git a/src/database/optionsApi.ts b/src/database/optionsApi.ts
@@ -80,7 +80,8 @@ export const rtdbUnbinds = new WeakMap<
 
 /**
  * Install this plugin if you want to add `$rtdbBind` and `$rtdbUnbind` functions. Note this plugin is only necessary if
- * you use the Options API. If you **only use the Composition API**, you can completely skip it.
+ * you use the Options API. If you **exclusively use the Composition API** (e.g. `useObject()` and `useList()`), you
+ * should not add it.
  *
  * @param app
  * @param pluginOptions
diff --git a/src/firestore/index.ts b/src/firestore/index.ts
diff --git a/src/firestore/optionsApi.ts b/src/firestore/optionsApi.ts
diff --git a/src/firestore/utils.ts b/src/firestore/utils.ts
diff --git a/src/globals.ts b/src/globals.ts
diff --git a/src/index.ts b/src/index.ts
