未捕获的错误:Firebase app named '[DEFAULT]-firebaseui-temp'

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

本文关键字：DEFAULT -firebaseui-temp named app 错误 Firebase      更新时间：2023-09-26

我的代码有问题。我正在用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的模块位于modules目录下的另一个文件中:

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;

你知道怎么解决这个问题吗?谢谢!

您不应该在每次显示它时初始化一个新的FirebaseUI实例:

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

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

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

当你想删除时，调用:

ui.reset();

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

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

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