[v3] TypeError: firebase.auth is undefined

[thibautvdu]

Hello everyone,

I followed the v3.0.0 getting started guide and the Auth recipe. I'm using Next JS (with the redux-thunk recipe) and it seems that firebase is correctly initialized, however when calling firebase.login as per the Auth recipe, I get the following error :

TypeError: firebase.auth is undefined
createAuthProvider
webpack:/C:/Users/thiba/Documents/Projets perso/SuperBizCoach/firebase-app/node_modules/react-redux-firebase/es/utils/auth.js:1

This is my next.js app wrapper :
src/app/pages/_app.js

import React from 'react';
import App, { Container } from 'next/app';
import Head from 'next/head'
import withReduxStore from '../lib/with-redux-store'
import firebase from 'firebase/app'
import 'firebase/auth'
import { Provider } from 'react-redux'
import { ReactReduxFirebaseProvider } from 'react-redux-firebase'

import Layout from '../components/Layout.js'

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps, reduxStore} = this.props;

    const rrfConfig = { userProfile: 'users' } // react-redux-firebase config

    const rrfProps = {
      firebase,
      config: rrfConfig,
      dispatch: reduxStore.dispatch,
      // createFirestoreInstance // <- needed if using firestore
    }

    return (
      <Container>
       <Provider store={reduxStore}>
         <ReactReduxFirebaseProvider {...rrfProps}>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </ReactReduxFirebaseProvider>
       </Provider>
      </Container>
    );
  }
}

export default withReduxStore(MyApp)

And my firebase setup (with some SSR specific code) :
src/app/lib/with-redux-store.js

import React from 'react'
import firebase from 'firebase/app'
import 'firebase/auth'
import { initializeStore } from '../redux/store'

const isServer = typeof window === 'undefined'
const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__'

const initFirebase = (appName = '[DEFAULT]') => {
  if (firebase.apps.find(app => app.name === appName)) {
    return
  }

  firebase.initializeApp({
******************************
  }, appName)
}


function getOrCreateStore (initialState) {
  // Always make a new store if server, otherwise state is shared between requests
  if (isServer) {
    initFirebase();
    return initializeStore(initialState)
  }

  // Create store if unavailable on the client and set it on the window object
  if (!window[__NEXT_REDUX_STORE__]) {
    initFirebase();
    window[__NEXT_REDUX_STORE__] = initializeStore(initialState)
  }
  return window[__NEXT_REDUX_STORE__]
}

export default App => {
  return class AppWithRedux extends React.Component {
    static async getInitialProps (appContext) {
      // Get or Create the store with `undefined` as initialState
      // This allows you to set a custom default initialState
      const reduxStore = getOrCreateStore()

      // Provide the store to getInitialProps of pages
      appContext.ctx.reduxStore = reduxStore

      let appProps = {}
      if (typeof App.getInitialProps === 'function') {
        appProps = await App.getInitialProps(appContext)
      }

      return {
        ...appProps,
        initialReduxState: reduxStore.getState()
      }
    }

    constructor (props) {
      super(props)
      this.reduxStore = getOrCreateStore(props.initialReduxState)
    }

    render () {
      return <App {...this.props} reduxStore={this.reduxStore} />
    }
  }
}

And finally the root reducer :
src/app/redux/reducers.js

import {combineReducers} from 'redux'
import { firebaseReducer } from 'react-redux-firebase'
import {default as testReducer} from './test'

const rootReducer = combineReducers({
  firebase: firebaseReducer,
  test: testReducer
})

export default rootReducer

SSR redux setup is working perfectly fine and I did install the latest firebase npm package. Any idea of what's going on here ?

Many thanks

[illuminist]

I copied your code, modified a little bit on what's missing from what you provided, and it runs fine even got through logging in. How did you call firebase.login?

My recommendation about posting code, please name your files and their path, not just detail on what it does.

[thibautvdu]

@illuminist Thanks for your recommendation, I updated the original post according to it.

This is how I'm calling it from one of my next js page :
src/app/pages/index.js

import React from "react";
import Button from "../components/CustomButtons/Button.jsx";

import { compose } from 'redux'
import { connect } from 'react-redux'
import { testOperations } from '../redux/test'
import { firebaseConnect, isLoaded, isEmpty } from 'react-redux-firebase'

import aboutUsStyle from "../assets/jss/material-kit-pro-react/views/aboutUsStyle.jsx";

class AboutUsPage extends React.Component {
  render() {
    const { classes, category, firebase, auth } = this.props;

    return (
      <main>
          <Button justIcon round color="twitter" onClick={() => firebase.login({ provider: 'google', type: 'popup' })}>
      </main>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    category: state.test.category,
    auth: state.firebase.auth,
  }
};

const actionCreators = {
  selectCategory: testOperations.selectCategory
};

var styledPage = withStyles(aboutUsStyle)(AboutUsPage);

export default compose(
  firebaseConnect(), // withFirebase can also be used
  connect(mapStateToProps, actionCreators)
)(styledPage)

[illuminist]

One more file please, store.js. I suspect that the error might come from there.

[thibautvdu]

@illuminist Many thanks for your help. Here is the file :
src/app/redux/store.js

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import { createLogger } from 'redux-logger'
import rootReducer from './reducers'

const middleware = [ thunk ]
if (process.env.NODE_ENV !== 'production') {
  middleware.push(createLogger())
}


export function initializeStore (initialState) {
  return createStore(
    rootReducer,
    applyMiddleware(...middleware)
  );
}

[illuminist]

Still unable to reproduce an error. Could you take my repro https://github.com/illuminist/rrf-issue709 and run? Maybe find some difference in our code too.

[thibautvdu]

@illuminist After a lot of trials I finally found the origin of this error thanks to your repo : I both had the @firebase/auth and firebase npm packages in my package.json, which is the only difference between your code and mine. Somehow (honestly not really sure how as my imports doesn't include the @) that was conflicting.

A clean re-install of my dependencies without @firebase/auth solved the issue.

I'm really thankful for your time !