Composablesを参考に、Vue3 + Firebase Authの使い方を書いてみる

Vue3の学習を始めて約1ヶ月、だいぶ使い勝手を理解することができてきました。元々Reactを使用しておりHooksなどが便利で好きだったのですが、Composition APIとTypeScriptを使用すると、書き心地がReact同様に良く、お気に入りのフレームワークの一つとなりました！

そして、私自身が何かを作るときにFirebaseを頻繁に使用するのですが、Vue3使用時の例が（更新日時やVueのバージョン等が）古い情報のものも含めると複数個ありました。

色々試してもしっくりこなかったのですが、 composables を使用したこの書き方が良いかな？？と思いましたのでメモします📝

Composables

user-auth.ts

import { auth } from '@/lib/firebase';
import {
  onAuthStateChanged,
  type Unsubscribe,
  type User,
} from '@firebase/auth';
import { onMounted, onUnmounted, ref } from 'vue';

export const userAuth = () => {
  const user = ref<User | null | undefined>();
  const isLoading = ref<boolean>(false);

  let unsubscribe: Unsubscribe;

  onMounted(() => {
    isLoading.value = true;

    unsubscribe = onAuthStateChanged(auth, firebaseUser => {
      if (firebaseUser) {
        user.value = firebaseUser;
      } else {
        // ログアウト時の処理
        user.value = null;
      }

      isLoading.value = false;
    });
  });

  onUnmounted(() => {
    unsubscribe();
  });

  return {
    user,
    isLoading,
  };
};

※エラーハンドリング等、細かな処理は省略しています🙏

userデータを使用したいコンポーネント内部にして、下記のように使用

HomeView.vue

<template>
  <div class="app">
    <div v-if="isLoading">
      <p>Loading...</p>
    </div>
    <div v-else-if="user">
      {{ user.displayName }}
    </div>
    <div v-else>No user</div>
    <button v-if="!user" @click="googleSignIn">Login</button>
    <button v-if="user" @click="logout">Logout</button>
  </div>
</template>
  
  
  <script setup lang="ts">
import AppBar from '@/components/AppBar.vue';
import {
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
  updateProfile,
} from '@firebase/auth';
import { userAuth } from './composables/user-auth';
import { auth } from './lib/firebase';

const { user, isLoading } = userAuth();

// Google SignInなどの処理は省略
</script>

他に「この方法が良いよ！」という情報がありましたらぜひ教えてください！