またFirebaseのv9.0.0以降の変更点です。
プログラミング初心者なので誤りがあるかもしれません。
その際はご指摘お願いいたします。
Firebase Authenticationをこれから使用する人向け
Firebase v9はつい先日(2021/08/25)アップデートが行われ、正式にv9.0.0になりました。
npm install --save firebase
ってバージョンを明示せずにインストールするとv9になってるってことですね。
大きな変更点としては、Option API方式からComposition API方式になった事です。
といっても私もよくわかんないのでコードで説明すると、
import firebase from "firebase/app"
import "firebase/auth"
const config = {
//...
}
firebase.initializeApp(config);
const auth = firebase.auth();
import { initializeApp } from "firebase/app"
import { getAuth } from "firebase/auth"
const config = {
//...
}
initializeApp(config);
const auth = new getAuth();
のように、特定の関数をimportで明示的に呼び出す形のことをComposition APIと呼ぶようで、Vue3でも同様にComposition APIを使用するように変更が行われています。
これはページのロード高速化のためで、そりゃ毎回ライブラリ全部をimportするより明示的に一部分をimportした方が速いよねってことだと理解してます。
これからFirebaseやVue.jsで何かを作る場合は、Composition APIでコードを書くようにした方がいいみたいですね。
だいたいの引数にgetAuth()を入れる
色々なFirebase v8以前のサンプルコードを見ながら、どうv9に対応させればよいのか悩みましたが結局getAuth()を使えばほとんど解決する事に気づきました。
当然と言われれば当然なんですが…。
例えばセッションの永続性を設定するsetPersistence()だと、
import firebase from "firebase/app"
import "firebase/auth"
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION).then(() => {
//...
}
import { getAuth, setPersistence, browserSessionPersistence } from "firebase/auth"
setPersistence(getAuth(), browserSessionPersistence).then(() => {
//...
}
と書きます。
ここでの違いは、Composition APIだと関数の引数にAuthインスタンスを含むようになっていて、ここにgetAuth()を入れると解決します。
getAuth()は既存のAuthインスタンスを呼ぶか、既存のAuthインスタンスが無ければ新規でAuthインスタンスを生成します。
なので、firebase.js等のファイルで最初に初期化をし、setPersistence()でセッションの永続性を設定しておけばあとはFirebase Authenticationを使いたいところでgetAuth()を引数に入れておけばよいみたいです。
FirebaseのCodelabにあるサンプルコード（Friendly-chat）でも、最初に初期化した後は全部getAuth()してるので多分合ってます。
私がしてた勘違い
私が色んなサイトを見て混乱してたのは、例えばfirebase.jsでAuthインスタンスの初期化をした時に
import { getAuth } from "firebase/auth"
const auth = new getAuth();
export { auth }
として、それを他のAuthenticationを使いたい場所で
import auth from "@/firebase.js"
import { signOut } from "firebase/auth"
signOut(auth).then(() => {
//...
}
と書く必要があるのかと思って混乱していました。
実際にはこんな事をせずに、
import { signOut, getAuth } from "firebase/auth"
signOut(getAuth()).then(() => {
//...
}
同じ勘違いをされる方がいらっしゃるかはわかりませんが、そう解説してあるサイトもあったので一応…。（そのコードではそう書く必要があったのかもしれません。）
Firebase Authentication の初期化
onAuthStateChanged() の使い方で3~4日悩んだんですが、こうすればいいってわかったのでまた別投稿で書きます。