Question

我正在尝试按照here的说明使用firebase ui设置firebase auth。

我使用纱线添加了firebase ui模块。我的反应应用程序中的根目录中有一个firebase文件夹。在其中，我有一个firebase.js文件：

import * as firebase from 'firebase';
import * as firebaseui from 'firebaseui'

const config = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DATABASE_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET, 
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
  };

  firebase.initializeApp(config);

  const database = firebase.database();

  firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });

当我尝试检查我是否正确时，我收到一个控制台错误：

firebaseApp.js:339 Uncaught FirebaseError {code: "app/duplicate-service", message: "Firebase: Firebase service named 'auth' already registered (app/duplicate-service).", name: "auth", stack: "auth: Firebase: Firebase service named 'auth' alre…t

我不会在应用程序中的任何其他地方调用firebase，所以我认为这可能是一个错误的唯一方法是firebaseui已经导入firebase。我尝试删除第一个import语句，但这会导致错误，说明没有定义firebase。

有谁知道如何正确设置？我见过this question。我可以看到方法上的差异。我已经尝试使用问题中使用的配置语句。我仍然遇到同样的问题。

自从发布这个问题以来，我聘请了一些人来帮我设置这个问题。尽管花了400美元，我仍然有这个问题。其他问题已经发布了这个问题，并确定了角度闪光的重复。我不使用棱角分明。

上班承包商的设置如下：

const config = {
  apiKey: settings.FIREBASE_API_KEY,
  authDomain: settings.FIREBASE_AUTH_DOMAIN,
  databaseURL: settings.FIREBASE_DB_URL,
  projectId: settings.FIREBASE_PROJECT_ID,
  storageBucket: settings.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: settings.FIREBASE_MESSAGE_ID,
}

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

const database = firebase.database();
const auth = firebase.auth()

export {firebase, auth, database };

此块中有一个额外的const用于firebase.auth。我尝试删除它，但它没有任何区别。控制台错误仍然出现。

我上面链接的SO问题显示了从库导入的import语句。我的所有import语句都导入了我的firebase.js文件，该文件本身导入了firebase。我想知道这是不是重复？但是，导入中有if语句，所以我无法理解为什么会出现问题。我在我的组件中导入FirebaseUI，但我无法弄清楚是否以某种方式导入firebase重复。

我正在寻找一个有反应的解决方案。有没有人知道如何配置firebase以与react应用程序一起使用？

Answer 1

我不确定您的错误是怎么回事，但是我创建了一个带有create-react-app的React应用程序并立即开始工作。

首先我创建了'firebase.js'：

import firebaseui from 'firebaseui'

const config = ({
  // your config
})

// This is our firebaseui configuration object
const uiConfig = ({
  signInSuccessUrl: '/',
  signInOptions: [
    window.firebase.auth.GoogleAuthProvider.PROVIDER_ID
  ],
  tosUrl: '/terms-of-service' // This doesn't exist yet
})

// This must run before any other firebase functions
window.firebase.initializeApp(config)

// This sets up firebaseui
const ui = new firebaseui.auth.AuthUI(window.firebase.auth())

// This adds firebaseui to the page
// It does everything else on its own
const startFirebaseUI = function (elementId) {
  ui.start(elementId, uiConfig)
}

export startFirebaseUI

然后将现有的App.js编辑成：

import React, { Component } from 'react';
import { startFirebaseUI } from './firebase.js'

class App extends Component {
  componentDidMount() {
    startFirebaseUI ('#firebaseui')
  }
  render() {
    return (
      <div id="firebaseui"></div>
    );
  }
}

export default App;

Firebaseui将为您创建用户，您无需手动执行此操作。如果无法找到元素，它也会抛出一个令人讨厌的错误，所以请确保如果没有页面上的元素，你就不会调用它！

如果你需要在登录或注销时运行一个功能，你可以挂钩firebase.auth.onAuthStateChanged：

firebase.auth().onAuthStateChanged((user) => {
  // if user isn't null then we logged in
  if (user) {
    // login
  } else {
    // logout
  }
})

我怀疑您的错误与firebaseui干扰firebase.auth()有关，但我可能无法重现它。

Answer 2

对于到达此处以将Firebase-UI集成到React应用程序中的所有用户，我强烈建议使用官方节点模块。 https://www.npmjs.com/package/react-firebaseui

在npm中可以很好地捕获它。简而言之：

假设您的项目中已经有了Firebase，请通过以下命令安装react-firebaseui：$ npm install --save react-firebaseui

 const uiConfig = {
 // Popup signin flow rather than redirect flow.
 signInFlow: 'popup',
 // Redirect to /signedIn after sign in is successful. Alternatively you can 
 provide a callbacks.signInSuccess function.
 signInSuccessUrl: '/signedIn',
 // We will display Google and Facebook as auth providers.
 signInOptions: [
     firebase.auth.GoogleAuthProvider.PROVIDER_ID,
     firebase.auth.FacebookAuthProvider.PROVIDER_ID
 ]
 };

然后在您的组件的渲染/返回中添加以下标记：

<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>

Answer 3

我遇到了这个问题，最有可能的原因是最近的问题是npm无法使用Windows上最新版本的firebase。

问题是node_modules / firebasui / dist / npm.js中的文件是第一行。

var firebase = require('firebase/app'); require('firebase/auth');

我将其替换为：

var firebase=window.firebase;

我认为先导入firebase并明确放入window对象然后导入firebaseui：

var firebase = require('firebase'); window.firebase = firebase; var firebaseui = require('firebaseui');

React：使用firebase-ui

3 个答案: