Firebase UIで「An AuthUI instance already exists」エラーが出た時の対応

原因

firebaseuiインスタンスは一度しか呼び出せないので、ルートするたびに、

ui = new firebaseui.auth.AuthUI(firebase.auth());

と、毎回作成するようになっているとこのエラーがおきます。

ネット上のVue.js + FIrebase UIのサンプルでこうなっているものがいくつかありました。

対策

インスタンスを作成するのではなく、呼び出して空だったら作成するようにすればOKです。

let ui = firebaseui.auth.AuthUI.getInstance();
if (!ui) {
  ui = new firebaseui.auth.AuthUI(firebase.auth());
}

Firebase UIは便利な反面、機能が多いので取扱いに慣れるまでは細かい修正が必要ですね。