2
私のコードに問題があります。私は3つのタブを持つReactJSの1ページのWebアプリケーションを構築しています。ReactJS app認証：Firebase + FirebaseUI Uncaught Error： '[DEFAULT] -firebaseui-temp'という名前のFirebaseアプリが既に存在します
ユーザが1つのタブに移動すると、FirebaseUIの認証フォームが表示されます。問題はそれが最初と2回目にのみ動作していることです。別のタブに変更して戻ってくるとクラッシュします.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;
これを解決する方法上の任意のアイデア？ありがとう！
解決策は...... 削除済み // Firebaseを使用してFirebaseUIウィジェットを初期化します。 var ui = new firebaseui.auth.AuthUI（firebase.auth（））; これはindex.htmlファイルのヘッダに置かれている変数からvar ui = global.uiという変数を使用していましたが、現在は不思議に思えます。それに近づく？ http://pastebin.com/ijcGbXWS – Juan