React: 使用Firebase-UI设置Firebase身份验证

Question

我正试图按照这里的说明设置使用Firebase UI的Firebase身份验证。

我使用yarn添加了Firebase UI模块。在我的React应用程序的根目录中有一个名为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的情况下才会出现错误。 我尝试删除第一个导入语句，但是那样会出现错误，说firebase未定义。

有人知道如何正确设置吗？我看到了这个问题。我可以看到方法上的差异。我尝试使用该问题中使用的配置语句。我仍然遇到相同的问题。

发布此问题后，我在upwork上雇了一个人来为我设置此项。 尽管花费了400美元，我仍然有这个问题。 其他问题已经发布了这个问题，并在angular flare中确定了重复。 我不使用angular。 upwork承包商的设置如下：

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 };

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

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

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

- Mel

---

看了一下 FirebaseUI 的演示，我发现 FirebaseUI 只有在 Firebase 初始化之后才被导入。然而，在你的方法中，firebase 和 firebaseui 都是先被导入，然后再进行初始化。参考链接：https://github.com/firebase/firebaseui-web/blob/master/demo/public/index.html - Vishal Sharma

Answer 1

编辑 2021 年: 现在有一个官方的 React 组件 - 请参见下面 saurabh 的答案。

我不确定你的错误是什么，但是我使用 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()有关，但无论我如何尝试，都无法重现它。

- Matt O'Tousa

---

任何在 {import firebaseui from 'firebaseui'} 上出现错误的人都可以将其替换为 {import * as firebaseui from 'firebaseui'}。 执行得很好，@Matt O'Tousa。 - saurabh

你在项目的index.html中添加了firebaseui.css吗？对我来说，直到我添加它样式才起作用。Google标志很大，必须添加CSS来应用样式。 - saurabh

Answer 2

如果您想在React应用程序中集成Firebase-UI，我强烈建议使用官方的Node模块。

https://www.npmjs.com/package/react-firebaseui

该模块已经很好地被纳入到npm中了。简单来说：

1. Assuming you already have firebase in your project, install react-firebaseui via command: $ 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()}/>

- saurabh

---

绝对是现代实现的方式！ - Steve

不再兼容React 18。 - finn

Answer 3

我也遇到了这个问题，很可能是由于npm与最新版本的firebase在Windows上不兼容的问题。

问题出在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');

- Kevin Stacey