【Firebase】firebase auth+webでログアウトした際の不具合２箇所

Contents

ログアウト時のアラートが2回出た

自分で作ってて自分で踏んだ。
まずひとつ。公式からのコピペで
以下の実装をしていた際に、ログアウト時のアラートが2回出た。

document.querySelector("#logout_form").addEventListener("submit", function(event) {
  if(confirm('ログアウトします。よろしいですか？')){
    firebase.auth().onAuthStateChanged( (user) => {
      firebase.auth().signOut().then(()=>{
        alert("ログアウトしました");
        location.reload();
      })
      .catch( (error)=>{
        var errorCode = error.code;
        var errorMessage = error.message;
        alert(errorCode + ', ' + errorMessage);
      });
    });
  }
  event.preventDefault();
}, false);

よく考えたら
・何かしら認証ステータスが変わった際に→signOut()を試み→アラート
という次第で循環してしまっているだけなのでは。

document.querySelector("#logout_form").addEventListener("submit", function(event) {
  if(confirm('ログアウトします。よろしいですか？')){
    firebase.auth().signOut().then(()=>{
      console.log('L282');
      alert("ログアウトしました。");
      location.reload();
    })
    .catch( (error)=>{
      var errorCode = error.code;
      var errorMessage = error.message;
      alert(errorCode + ', ' + errorMessage);
    });
    event.preventDefault();
  }
}, false);

直接signOut()を呼び出すように修正し、ことなきを得ました。

スナップショット取得の権限がないと叱られた

一方、同じタイミングなんですが

    query.onSnapshot(function(snapshot) {
      snapshot.docChanges().forEach(function(change) {
        （略）
      });
   });

とスナップショットを取得していたのが、権限がなく取得できないと叱られていました。

https://firebase.google.com/docs/firestore/query-data/listen?hl=ja#handle_listen_errors

db.collection("cities")
    .onSnapshot(function(snapshot) {
        //...
    }, function(error) {
        //...
    });

上記のように、スナップショットのエラーを明示的に拾うように対応。

    query.onSnapshot(function(snapshot) {
      snapshot.docChanges().forEach(function(change) {
        （略）
      });
    }, function(error) {
      console.log(error.message );
    });

こちらも事なきを得ました。