feat(auth): getCurrentUser()

Author: posva

playground/package.json

@@ -11,7 +11,7 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "pinia": "^2.0.23",
+    "pinia": "^2.0.24",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
     "vuefire": "workspace:*",

playground/src/main.ts

@@ -1,6 +1,13 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import { firestorePlugin, VueFire, VueFireAuth, VueFireAppCheck } from 'vuefire'
+import {
+  VueFire,
+  VueFireAuth,
+  VueFireAppCheck,
+  VueFireFirestoreOptionsAPI,
+  VueFireDatabaseOptionsAPI,
+  getCurrentUser,
+} from 'vuefire'
 import App from './App.vue'
 import { createFirebaseApp } from './firebase'
 import { createWebHistory, createRouter } from 'vue-router/auto'
@@ -11,6 +18,10 @@ const router = createRouter({
   history: createWebHistory(),
 })
 
+router.beforeEach(async () => {
+  await getCurrentUser()
+})
+
 const store = createStore({
   // can't work with vuefire
   // strict: import.meta.env.DEV,
@@ -34,9 +45,10 @@ app
           '6LfJ0vgiAAAAAHheQE7GQVdG_c9m8xipBESx_SKI'
         ),
       }),
+      VueFireDatabaseOptionsAPI(),
+      VueFireFirestoreOptionsAPI(),
     ],
   })
-  .use(firestorePlugin)
   .use(store)
   .use(router)
 

src/auth/index.ts

@@ -5,7 +5,7 @@ import { useFirebaseApp } from '../app'
 import { getGlobalScope } from '../globals'
 import { AuthUserInjectSymbol, setupOnAuthStateChanged } from './user'
 
-export { setupOnAuthStateChanged, useCurrentUser } from './user'
+export { useCurrentUser, getCurrentUser } from './user'
 
 /**
  * VueFire Auth Module to be added to the `VueFire` Vue plugin options.

src/auth/user.ts

@@ -1,6 +1,8 @@
-import { FirebaseApp } from 'firebase/app'
+import type { FirebaseApp } from 'firebase/app'
 import { getAuth, onIdTokenChanged, User } from 'firebase/auth'
 import { inject, InjectionKey, Ref } from 'vue'
+import { useFirebaseApp } from '../app'
+import type { _Nullable } from '../shared'
 
 export const AuthUserInjectSymbol: InjectionKey<Ref<User | null | undefined>> =
   Symbol('user')
@@ -14,23 +16,67 @@ export function useCurrentUser() {
   return inject(AuthUserInjectSymbol)!
 }
 
+// @internal
+type _UserState =
+  // state 1 waiting for the initial load
+  | [Promise<_Nullable<User>>, (user: Ref<_Nullable<User>>) => void]
+  // state 2 loaded
+  | Ref<_Nullable<User>>
+
+const initialUserMap = new WeakMap<FirebaseApp, _UserState>()
+
+// @internal
+function _getCurrentUserState() {
+  const firebaseApp = useFirebaseApp()
+  if (!initialUserMap.has(firebaseApp)) {
+    let resolve!: (resolvedUser: _Nullable<User>) => void
+    const promise = new Promise<_Nullable<User>>((_resolve) => {
+      resolve = _resolve
+    })
+
+    const userState: _UserState = [
+      promise,
+      (user: Ref<_Nullable<User>>) => {
+        initialUserMap.set(firebaseApp, user)
+        // resolve the actual promise
+        resolve(user.value)
+      },
+    ]
+
+    initialUserMap.set(firebaseApp, userState)
+  }
+
+  return initialUserMap.get(firebaseApp)!
+}
+
+/**
+ * Returns a promise that resolves the current user once the user is loaded. Must be called after the firebase app is
+ * initialized.
+ */
+export function getCurrentUser(): Promise<_Nullable<User>> {
+  const userOrPromise = _getCurrentUserState()
+
+  return Array.isArray(userOrPromise)
+    ? userOrPromise[0]
+    : Promise.resolve(userOrPromise.value)
+}
+
 export function setupOnAuthStateChanged(
-  user: Ref<User | null | undefined>,
+  user: Ref<_Nullable<User>>,
   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) => {
+    const userOrPromise = _getCurrentUserState()
     user.value = userData
-    resolve(userData)
+    // setup the initial user
+    // afterwards, this will never be an array
+    if (Array.isArray(userOrPromise)) {
+      userOrPromise[1](user)
+    }
   })
-
-  return { isReady }
 }

src/index.ts

@@ -55,7 +55,12 @@ export type {
 export { useFirebaseApp } from './app'
 
 // Auth
-export { useCurrentUser, VueFireAuth, useFirebaseAuth } from './auth'
+export {
+  useCurrentUser,
+  VueFireAuth,
+  useFirebaseAuth,
+  getCurrentUser,
+} from './auth'
 
 // SSR
 export { usePendingPromises } from './ssr/plugin'