Firebase Initializing Without Auth - firebase.auth is not a function

Question

I cannot figure out why one of my Firebase apps initializes with auth() and one does not. I have followed the node installation options here: https://firebase.google.com/docs/web/setup

**Edit: ** To clarify, the one that works is also using the admin sdk inside firebase functions. However, I don't understand how that might be connected to the front-end client sdk interface.

I am continuously getting an error, whenever I try to call any firebase.auth() methods on the app that initializes without it.

What are reasons that would prevent my app from initializing without auth()? I have poured over the code and believe both incorporate firebase in the same way, but I must be missing something?

Example function causing errors

firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        console.log("User signed in!", user);
    } else {
        console.log("User NOT signed in!");
    }
});

Resulting Error

index.js:40 Uncaught TypeError: firebase.auth is not a function
    at Object.<anonymous> (index.js:40)
    at __webpack_require__ (bootstrap 06efabd01e08e38c858a:19)
    at bootstrap 06efabd01e08e38c858a:62
    at bootstrap 06efabd01e08e38c858a:62
(anonymous) @ index.js:40
__webpack_require__ @ bootstrap 06efabd01e08e38c858a:19
(anonymous) @ bootstrap 06efabd01e08e38c858a:62
(anonymous) @ bootstrap 06efabd01e08e38c858a:62

App 1 - Initialization I have replaced my data with xxx

var firebase = require('firebase/app');
require('firebase/auth');
var config = {
    apiKey: "xxx",
    authDomain: "xxx.firebaseapp.com",
    databaseURL: "https://xxx.firebaseio.com",
    projectId: "xxx",
    storageBucket: "xxx.appspot.com",
    messagingSenderId: "xxx"
};
firebase.initializeApp(config);
console.log("FIREBASE: ", firebase);

App 1 - Console Log Of Firebase Object Notice that "auth" exists

{__esModule: true, initializeApp: ƒ, app: ƒ, Promise: ƒ, …}
INTERNAL
:
{registerService: ƒ, createFirebaseNamespace: ƒ, extendNamespace: ƒ, createSubscribe: ƒ, ErrorFactory: ƒ, …}
Promise
:
ƒ Promise()
SDK_VERSION
:
"4.9.0"
User
:
ƒ Bk(a,b,c)
app
:
ƒ app(name)
apps
:
(...)
auth
:
ƒ (appArg)
default
:
{__esModule: true, initializeApp: ƒ, app: ƒ, Promise: ƒ, …}
initializeApp
:
ƒ initializeApp(options, name)
__esModule
:
true
get apps
:
ƒ getApps()
__proto__
:
Object

App 1 - Includes functions server-side admin sdk

var serviceAccount = require("./xxxxx62ba.json");

// Initialize the firebase admin app
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://xxx.firebaseio.com"
});

App 2 - Initialization I have replaced my data with xxx

var firebase = require('firebase/app');
require('firebase/auth');
var config = {
    apiKey: "xxx",
    authDomain: "xxx.firebaseapp.com",
    databaseURL: "https://xxx.firebaseio.com",
    projectId: "xxx",
    storageBucket: "xxx.appspot.com",
    messagingSenderId: "xxx"
};
firebase.initializeApp(config);

App 2 - Console Log of Firebase Object Notice that "auth" is missing

{__esModule: true, initializeApp: ƒ, app: ƒ, Promise: ƒ, …}
INTERNAL
:
{registerService: ƒ, createFirebaseNamespace: ƒ, extendNamespace: ƒ, createSubscribe: ƒ, ErrorFactory: ƒ, …}
Promise
:
ƒ Promise()
SDK_VERSION
:
"4.9.0"
app
:
ƒ app(name)
apps
:
(...)
default
:
{__esModule: true, initializeApp: ƒ, app: ƒ, Promise: ƒ, …}
initializeApp
:
ƒ initializeApp(options, name)
__esModule
:
true
get apps
:
ƒ getApps()
__proto__
:
Object

Answer 1

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.

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

---

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

Essentially, I made my implementation as follows

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 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.

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);
            // ...
        });
    }
}

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