Firebase - SPA Web 应用程序 - 注销问题答案

【问题标题】：Firebase - SPA web application - issue with logoutFirebase - SPA Web 应用程序 - 注销问题
【发布时间】：2019-04-21 01:16:14
【问题描述】：

我最近制作了一个简单的 SPA 应用程序，它使用 Google 提供程序连接到 Firebase 并为经过身份验证的用户加载数据。一切都很好，直到我尝试使用文档中的以下方法注销用户：

firebase.auth().signOut()

注销成功，但在此之后，我无法再次登录，因为我收到以下错误：

updateCurrentUser 失败：第一个参数“user”必须是 Firebase User 的实例或 null。

当我在浏览器中检查网络选项卡时，我在响应中看到了我的用户数据，因此 firebasewebui 可能存在问题。

我也尝试过的事情

在其他浏览器中登录 - 正常工作
以隐身模式登录 - 不起作用
从其他域登录（例如在 Firebase 控制台中授权的假域）- 工作
从计算机上擦除了我的整个 Google Chrome 个人资料并重新添加 - 不起作用
从 Android 应用程序登录 - 正常工作（这里没有注销和登录问题）

所以看起来它与域和浏览器组合有关。

这是我的js代码：

const firebase = require('firebase/app');
require('firebase/auth');
require('firebaseui');

const initializeFirebase = () => {
    const config = { /* config */ };

    firebase.initializeApp(config);

    firebase.auth().onAuthStateChanged(function (user) {
        if (user) {
            // loads data
        } else {
            // visibility staff
            initializeFirebaseAuthForm();
        }
    });
}

const initializeFirebaseAuthForm = () => {
    const uiConfig = {
        callbacks: {
            signInSuccessWithAuthResult: function (authResult, redirectUrl) {
                return false;
            },
            uiShown: function () {
                visibilityManager(false);
            }
        },
        signInFlow: 'popup',
        signInOptions: [
            firebase.auth.GoogleAuthProvider.PROVIDER_ID
        ]
    };

    let ui = null;
    if (firebaseui.auth.AuthUI.getInstance()) {
        ui = firebaseui.auth.AuthUI.getInstance();
    } else {
        ui = new firebaseui.auth.AuthUI(firebase.auth());
    }
    ui.start('#firebaseui-auth-container', uiConfig);
}

document.addEventListener('DOMContentLoaded', function () {
    initializeFirebase();
});

在这种情况下，我在 onAuthStateChanged 中注册的观察者不会被触发。

【问题讨论】：

很难说是什么原因造成的。您能否提供可重现的示例代码或将您的代码托管在便于调试的地方？
@bojeil 同时，我找到了答案。我把它贴在下面。

标签： javascript firebase firebase-authentication google-signin firebaseui

【解决方案1】：

我自己找到了答案。有几个问题。首先，Firebase 初始化应放置为“全局”，例如此处：https://github.com/firebase/firebaseui-web/，尤其是以下几行：

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

其次，使用我的输入代码，我必须使用条件获取现有的 ui 实例。在 firebase github 中，ui 始终使用 new 运算符创建，并且每次脚本运行时始终创建一次。我发现有一种解决方法 - 可以使用 delete() 承诺删除 ui 实例。

【讨论】：