Initialisez les références Firebase dans deux fichiers distincts dans la nouvelle API.

Question

Je suis passé à la nouvelle API et je ne sais pas comment initialiser les références Firebase dans deux fichiers séparés :

    /* CAS 1 */
    // 1er fichier
    var config = {/* ...  */};
    firebase.initializeApp(config);
    var rootRef = firebase.database().ref();

    // 2ème fichier - initialisation à nouveau
    var config = {/* ...  */};
    firebase.initializeApp(config);
    var rootRef = firebase.database().ref();

RÉSULTAT : bundle.js:535 Erreur non capturée : L'application Firebase nommée '[DEFAULT]' existe déjà.

    /* CAS 2 */
    // 1er fichier
    var config = {/* ...  */};
    firebase.initializeApp(config);
    var rootRef = firebase.database().ref();

    // 2ème fichier - ne pas initialiser
    var rootRef = firebase.database().ref();

RÉSULTAT : bundle.js:529 Erreur non capturée : Aucune application Firebase '[DEFAULT]' n'a été créée - appelez Firebase App.initializeApp().

Avant la nouvelle API, je faisais simplement appel à

var myFirebaseRef = new Firebase("https://.firebaseio.com/");

dans chaque fichier, et ça fonctionnait bien.

Answer 1

C'est un problème que j'ai également rencontré en mettant à jour vers la nouvelle version de Firebase. Vous voudrez peut-être initialiser deux applications Firebase distinctes, comme expliqué dans d'autres réponses, mais je voulais simplement utiliser les références à deux emplacements différents dans mon application et j'obtenais la même erreur.

Ce que vous devez faire dans cette situation est de créer un module Firebase pour votre application qui n'initialise Firebase qu'une seule fois, puis vous l'importez ou le requirez ailleurs dans votre application.

C'est assez simple, voici le mien: modules/firebase.js

import firebase from 'firebase';
var firebaseConfig = {
  apiKey: "some-api-key",
  authDomain: "some-app.firebaseapp.com",
  databaseURL: "https://some-app.firebaseio.com",
  storageBucket: "some-app.appspot.com",
};

var FbApp = firebase.initializeApp(firebaseConfig);
module.exports.FBApp = FbApp.database(); //cela ne doit pas être seulement la base de données

Et ensuite, ailleurs dans votre application, vous faites simplement:

import FBApp from '/your/module/location'
var messagesRef = FBApp.ref("messages/");

Answer 2

Vous devez nommer vos différentes instances (Apps comme Firebase les appelle); par défaut, vous travaillez avec l'App [DEFAULT], car c'est le cas d'utilisation le plus courant, mais lorsque vous avez besoin de travailler avec plusieurs Apps, vous devez ajouter un nom lors de l'initialisation :

// Initialiser l'App "[DEFAULT]"
var mainApp = firebase.intializeApp({ ... });

// Initialiser une App "Secondaire"
var secondaryApp = firebase.initializeApp({ ... }, "Secondaire");
...
mainApp.database().ref("chemin/vers/données").set(valeur);
secondaryApp.database().ref("chemin/vers/données").set(uneAutreValeur);

Vous pouvez trouver d'autres scénarios d'exemple dans la section mise à jour Initialiser plusieurs apps du guide Ajouter Firebase à votre projet JavaScript.

Answer 3

Si vous n'avez pas le contrôle sur l'endroit où Firebase sera instancié, vous pouvez faire quelque chose comme ceci :

 try {
    let firApp = firebase.app(applicationName);
    return firApp;
  } catch (error) {
    return firebase.initializeApp({
      credential: firebase.credential.cert(firebaseCredentials),
      databaseURL: firebaseUrl
    }, applicationName);
  }

Firebase essaiera d'obtenir l'application, si elle n'existe pas, alors vous pouvez l'initialiser librement.

Answer 4

J'ai fait l'erreur en important de cette manière.

import firebase from 'firebase'

const firebaseConfig = {
  apiKey: 'clé',
  authDomain: 'domaine',
  databaseURL: 'url',
  storageBucket: ''
};

firebase.initializeApp(firebaseConfig);

Cela fonctionnait bien pendant quelques jours, mais lorsque j'ai essayé de me connecter avec jetons personnalisés, mon objet d'authentification n'a pas été mis à jour. J'ai dû rafraîchir la page pour qu'il se mette à jour afin de pouvoir effectuer certains appels à la base de données qui étaient protégés par mes propres règles d'authentification.

 ".read": "$uid === auth.uid || auth.isAdmin === true || auth.isTeacher === true",

En changeant mes importations comme ceci, tout a marché à nouveau.

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';

const firebaseConfig = {
  apiKey: 'clé',
  authDomain: 'domaine',
  databaseURL: 'url',
  storageBucket: ''
};

firebase.initializeApp(firebaseConfig);

Ensuite, chaque fois que j'ai besoin d'utiliser Firebase dans un certain module, j'importe cela (remarquez l'importation à partir de firebase/app au lieu de firebase) :

import firebase from 'firebase/app';

Et interagissez avec certains services comme ceci :

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // Authentifié.
  } else {
    // Déconnecté.
  }
});

firebase.database().ref('maref').once('value').then((snapshot) => {
  // faire des choses avec le snapshot
});

Answer 5

Pour créer plusieurs instances en utilisant new firebase.initializeApp(), vous avez besoin d'un deuxième paramètre pour le constructeur firebase :

firebase.initializeApp( {}, "deuxième paramètre" );

Comparez-le à l'ancienne méthode pour générer plusieurs instances où

new Firebase.Context() 

est le deuxième paramètre :

new Firebase('', new Firebase.Context() );