且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Firebase初始化而无需身份验证-firebase.auth不是函数

更新时间:2023-12-05 21:58:16

更新:我最近开始再次遇到此错误. Firebase在没有Auth的情况下再次初始化(参见图片).当我更新或重新安装node_modules时,似乎偶尔会发生.

Update: I started encountering this error again recently. Firebase was initializing without Auth again (see image). It seemed to happen sporadically when I updated or re-installed my node_modules.

我在下面的链接上针对一个类似的问题发布了更新的答案-还列出了其他人尝试过的其他几种可能的解决方案.我的修复程序涉及从Mac上完全删除npm,nvm和节点,并使用nvm进行全新安装:

I posted an updated answer at the following link for a similar question - which also lists several other potential solutions other people experimented with. My fix involves completely removing npm, nvm, and node from my Mac, and doing a clean install with nvm: firebase.auth is not a function

我为此苦苦挣扎了3天,尝试完全按照文档说明以及其他许多示例的方式来实现sdk的各种不同方式,最后找到了一个可行的示例.这个git仓库有一个很棒的非常简单的例子,类似于我的react-router v4设置. tylermcginnis/react-router-firebase-auth

I struggled with this for 3 days, trying all sorts of different ways of implementing the sdk, exactly as according to documentation, and many other examples, and finally found an example that worked. This git repository has a great, and very simple example that was similar to my react-router v4 setup. tylermcginnis/react-router-firebase-auth

本质上,我的实现如下

firebase.js 我将firebase配置代码移到了一个单独的文件,然后将firebase.auth导出为名为firebaseAuth的常量.

firebase.js I moved the firebase configuration code to a separate file, and then exported firebase.auth as a constant called firebaseAuth.

import firebase from 'firebase'

const config = {
  apiKey: "AIza....pPk",
  authDomain: "project.firebaseapp.com",
  databaseURL: "https://project.firebaseio.com",
}

firebase.initializeApp(config)

export const firebaseAuth = firebase.auth

Redux动作/使用位置 我正在使用redux处理各种操作,而这些操作可能与组件发生的情况不同.在我的操作文件中,我正在导入firebaseAuth变量,并使用该变量来调用各种firebase auth函数.如您所见,firebaseAuth()作为函数被调用.

Redux Actions / Where it's Used I am using redux to handle the various actions than can happen with my components. In my actions file, I am importing the firebaseAuth variable, and using that to call the various firebase auth functions. As you can see here, firebaseAuth() is called as a function.

这成功在我的Firebase项目中创建了用户. (我知道所有内容都标记为"signIn",但它使用的是创建帐户"功能.)

This successfully created the user in my firebase project. (I am aware that everything is labeled "signIn", but it's using the create account function).

import { firebaseAuth } from '../../config/firebase'
/**
 * Sign In User
 * Signs in our end user using firebase auth
 */

export const signIn = () => {
    return (dispatch, getState) => {
        console.log("Sign In - In Progress");
        // Get the state from the redux store
        const reduxState = getState();

        let email = reduxState.form.signIn.values.email;
        let password = reduxState.form.signIn.values.password;

        firebaseAuth().createUserWithEmailAndPassword(email, password).catch(function(error) {
            // Handle Errors here.
            console.log("Login Errors: " + error.code + error.message);
            // ...
        });
    }
}

顺便说一句,我正在使用redux-form进行用户内容输入,并使用redux-thunk中间件在操作中具有dispatch和getState.

By the way, I am using redux-form for user content entry, and redux-thunk middleware to have dispatch and getState in the actions.