Question

我的代码遇到了问题。我正在使用3个标签在ReactJS中构建一个单页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挂钩来确保在调用起始方法时加载auth容器：

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

在卸载时删除实例。

ReactJS应用身份验证：Firebase + FirebaseUI未捕获错误：名为“[DEFAULT] -firebaseui-temp”的Firebase应用已存在

2 个答案: