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

I'm having trouble with my code. I'm building a one page web app in ReactJS with 3 tabs.

When the user goes to one tab, the authentication form from FirebaseUI should show up. The thing is that it's working only the first time and the second time, if I change to another tab and come back, it crashes, React re-renders the component that renders the div with the authentication form and throws the error:

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

My index.html is :

<!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>

The module that has the Firebase code and fills the div is on another file on a modules directory:

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;

And finally, the component that re-renders the form every time I go back to the tab on the componentDidMount method is:

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;

Any idea on how to solve this? Thanks!

javascriptreactjsfirebasefirebase-authenticationfirebaseuiphpdatetime


Solution 1:[1]

you could use the useEffect hook to make sure the auth container is loaded when the start method is called :

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

remove the instance on unmounting.

Solution 2:[2]

Because PHP is returning an integer with no period or decimal places since any number ending in .0 is not needed for a number value (you get an integer value 1642221885 rather than 1642221885.000). However the U.u date format expects a UNIX epoch timestamp followed by a period followed by another number representing milliseconds. When the period and additional numbers are not included, an error is thrown.

You can instead use something like number_format or sprintf to return a formatted number string (not int or float) so that the returned value is ensured to have a period and milliseconds at the end that the date parser expects, even if they are just zeros.

$t1 = 1642221885412;
$t2 = 1642221885000;

$dt = DateTime::createFromFormat('U.u', sprintf("%.3f", $t1/1000));                
$dt->setTimezone(new DateTimeZone('UTC'));
$txt1 = $dt->format("H:i:s:v");     


$dt = DateTime::createFromFormat('U.u', sprintf("%.3f", $t2/1000));
$dt->setTimezone(new DateTimeZone('UTC'));
$txt2 = $dt->format("H:i:s:v");     

print_r($txt1);
print_r('<br>');
print_r($txt2);

// 04:44:45:412<br>04:44:45:000

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hackman
Solution 2 Jim

Related Questions