feat(auth): useIsCurrentUserLoaded() composable (#1307)

Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>
Co-authored-by: Eduardo San Martin Morote <posva13@gmail.com>

Author: Soviut

docs/guide/auth.md

@@ -48,6 +48,8 @@ const user = useCurrentUser()
 
 ### Wait for the user to be loaded
 
+The `useCurrentUser()` composable will give you an `undefined` value until the user is loaded. It will then become `null` or the user object itself. If you need to wait for the user to be loaded in a declarative fashion, you can use the `useIsCurrentUserLoaded()` composable. Internally it's just a computed property that returns `true` when if user is not `undefined`.
+
 There is also a `getCurrentUser()` function that returns a promise of the current user. This is useful if you want to wait for the user to be loaded before doing anything. You can, for example, await it within a navigation guard:
 
 ```ts

src/auth/index.ts

@@ -8,6 +8,7 @@ import { authUserMap, setupOnAuthStateChanged } from './user'
 
 export {
   useCurrentUser,
+  useIsCurrentUserLoaded,
   getCurrentUser,
   updateCurrentUserProfile,
   updateCurrentUserEmail,

src/auth/user.ts

@@ -8,7 +8,7 @@ import {
   reauthenticateWithCredential,
   AuthCredential,
 } from 'firebase/auth'
-import type { Ref } from 'vue-demi'
+import { computed, Ref } from 'vue-demi'
 import { useFirebaseApp } from '../app'
 import type { _MaybeRef, _Nullable } from '../shared'
 
@@ -36,6 +36,17 @@ export function useCurrentUser(name?: string) {
   return authUserMap.get(useFirebaseApp(name))!
 }
 
+/**
+ * Helper that returns a computed boolean that becomes `true` as soon as the current user is no longer `undefined`. Note
+ * this doesn't ensure the user is logged in, only if the initial signing process has run.
+ *
+ * @param name - name of the application
+ */
+export function useIsCurrentUserLoaded(name?: string) {
+  const currentUser = useCurrentUser(name)
+  return computed(() => currentUser !== undefined)
+}
+
 /**
  * Updates the current user profile and updates the current user state. This function internally calls `updateProfile()`
  * from 'firebase/auth' and then updates the current user state.

src/index.ts

@@ -78,6 +78,7 @@ export { useFirebaseApp } from './app'
  */
 export {
   useCurrentUser,
+  useIsCurrentUserLoaded,
   VueFireAuth,
   useFirebaseAuth,
   getCurrentUser,