VueFireを使ってGoogleログインを実装する

VueFireを使ってGoogleログインを実装する

VueFireを使用して、Firebase Authを導入してみます。

公式ドキュメント
https://vuefire.vuejs.org/

Nuxtモジュールもあるよ！
https://vuefire.vuejs.org/nuxt/getting-started.html

初期化や設定に関しての留意点

VueFireは、初期化やFirestoreのインスタンスの取得などはできる限りFirebaseが提供するAPI(関数)を使用することを期待しているようです。

パッケージインストール

npm i vuefire firebase

初期化設定

// firebase.ts
import { initializeApp } from 'firebase/app'

const firebaseConfig = {
// この中はfirebase consoleからコピペ
};

export const firebaseApp = initializeApp(firebaseConfig);

main.tsの設定

import { createApp } from 'vue'
import { VueFire, VueFireAuth } from 'vuefire'
import App from './App.vue'
import { firebaseApp } from './firebase'

const app = createApp(App)
app.use(VueFire, {
  // imported above but could also just be created here
  firebaseApp,
  modules: [
    // we will see other modules later on
    VueFireAuth(),
  ],
})

app.mount('#app')

useFirebaseAuth()が使える！

main.tsにてVueFireAuth()をmodulesとして読み込んだことで、以下のようにuseFirebaseAuth()という関数が使えるようになります。

<script setup lang="ts">
import { useFirebaseAuth } from 'vuefire'
const auth = useFirebaseAuth()
</script>

Googleログインを実装してみよう

※サンプルコードをシンプルにするために、エラーハンドリングや型周りなどを全て省略しています。

<script setup lang="ts">
import {
  signInWithPopup,
  GoogleAuthProvider
} from 'firebase/auth'
import { useFirebaseAuth } from 'vuefire'

const auth = useFirebaseAuth()
const googleAuthProvider = new GoogleAuthProvider()
const signinPopup = () => {
  signInWithPopup(auth, googleAuthProvider)
}
</script>
<template>
  <button @click="signinPopup()">SignIn with Google</button>
</template>

いつものログイン画面が完成 🎉

VueFireの便利さを体験してみよう

VueFireを使うことでたくさんの便利関数(composable)が利用できます。
以下に使用例を示します。

useCurrentUser()

userCurrentUser()では、現在ログインしているユーザーに関する情報を取得できます。
以下のコードは、ユーザー名を取得して表示するコードです。

<script setup>
import { useCurrentUser } from 'vuefire'

const user = useCurrentUser()  // refオブジェクトで返ってきます!
</script>

<template>
  <p v-if="user">こんにちは {{ user.displayName }} さん！</p>
</template>

おわりに

本記事は、VueFireのなかでもGoogleログイン周りに限定した機能や使い方を紹介しました。
Firestoreなどからデータを取得したりFirebase Storageからデータを取得したりする場合は、もっとたくさんの便利関数が存在します！ぜひ公式ドキュメントを参照しつつ使ってみましょう！
https://vuefire.vuejs.org/