ReactJS app authentication: Firebase+FirebaseUI Uncaught Error: Firebase App named '[DEFAULT]-firebaseui-temp' already exists

Question

我的代码有问题。我正在用 ReactJS 构建一个包含 3 个选项卡的单页 Web 应用程序。

当用户转到一个选项卡时，应该会显示来自 FirebaseUI 的身份验证表单。问题是它只在第一次和第二次工作，如果我切换到另一个选项卡并返回，它会崩溃，React 重新呈现使用身份验证表单呈现 div 的组件并抛出错误:

"firebase.js:26 Uncaught Error: Firebase App named '[DEFAULT]-firebaseui-temp' already exists."

我的index.html是：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="./src/favicon.ico">
    <script src="https://www.gstatic.com/firebasejs/3.4.1/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "AIzaSyAdyeoTYNF0xLK37Zv3nEGHWCKNPQjSPsI",
        authDomain: "xxxx.com",
        databaseURL: "xxxxx.com",
        storageBucket: "xxxxxx.appspot.com",
        messagingSenderId: "xxxxxx"
      };
      firebase.initializeApp(config);
    </script>

    <script src="https://www.gstatic.com/firebasejs/ui/live/0.5/firebase-ui-auth.js"></script>
    <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/live/0.5/firebase-ui-auth.css" />
        <title>Flockin</title>
   </head>
  <body>

    <div id="root" class="container"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` in this folder.
      To create a production bundle, use `npm run build`.
    -->

  </body>
</html>

具有 Firebase 代码并填充 div 的模块位于模块目录的另一个文件中：

var firebase=global.firebase;
var firebaseui=global.firebaseui;

var  FirebaseUIManager=function(){

// FirebaseUI config.
var uiConfig = {
  'signInSuccessUrl': '/archive',
  'signInOptions': [
    // Leave the lines as is for the providers you want to offer your users.
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ],
  // Terms of service url.
  'tosUrl': '<your-tos-url>',
};

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);

var initApp = function() {
 firebase.auth().onAuthStateChanged(function(user) {
   if (user) {
     // User is signed in.
     var displayName = user.displayName;
     var email = user.email;
     var emailVerified = user.emailVerified;
     var photoURL = user.photoURL;
     var uid = user.uid;
     var providerData = user.providerData;
     user.getToken().then(function(accessToken) {
       document.getElementById('sign-in-status').textContent = 'Signed in';
       document.getElementById('sign-in').textContent = 'Sign out';
       document.getElementById('account-details').textContent = JSON.stringify({
         displayName: displayName,
         email: email,
         emailVerified: emailVerified,
         photoURL: photoURL,
         uid: uid,
         accessToken: accessToken,
         providerData: providerData
       }, null, '  ');
     });
   } else {
     // User is signed out.
     document.getElementById('sign-in-status').textContent = 'Signed out';
     document.getElementById('sign-in').textContent = 'Sign in';
     document.getElementById('account-details').textContent = 'null';
   }
 }, function(error) {
   console.log(error);
 });
};

initApp();

};

export default FirebaseUIManager;

最后，每次我返回到 componentDidMount 方法上的选项卡时重新呈现表单的组件是：

import React, { Component } from 'react';
import FirebaseUIManager from './../modules/firebase-auth-login-manager.js';

class FlockinList extends Component {
  componentDidMount(){
  FirebaseUIManager();
  }

  render() {

    return (
      <div>
         <div id="firebaseui-auth-container"></div>
         <div id="sign-in-status"></div>
         <div id="sign-in"></div>
         <div id="account-details"></div>
      </div>
    );
  }
}

export default FlockinList;

知道如何解决这个问题吗？谢谢！

Answer 1

您不应在每次显示时都初始化一个新的 FirebaseUI 实例：

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

这应该是外部初始化的。如果你想渲染，调用

ui.start('#firebaseui-auth-container', uiConfig);

当你想删除时，调用：

ui.reset();

但不要每次都初始化一个新的实例。

Answer 2

您可以使用 useEffect 挂钩来确保在调用 start 方法时加载 auth 容器：

useEffect(() => {
    let ui = new firebaseui.auth.AuthUI(firebase.auth());
    ui.start("#firebaseui-auth-container", uiConfig);
    return () => {
      ui.delete();
    };
  }, []);

卸载时删除实例。

ReactJS app authentication: Firebase+FirebaseUI Uncaught Error: Firebase App named '[DEFAULT]-firebaseui-temp' already exists

ReactJS app authentication: Firebase+FirebaseUI Uncaught Error: Firebase App named '[DEFAULT]-firebaseui-temp' already exists

javascript

reactjs

firebase

firebase-authentication

firebaseui