firebase.auth is not a function

Question

I am using Webpack with firebase and firebase-admin.

To install firebase I ran

npm install --save firebase

I am importing firebase

Answer 1

You just need to use the import as following

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";

in the above case, both auth and DB services are being used. For any other service, you need to import like that only.

Answer 2

This is because firebase-auth script is not added.

First you have to install npm files in your node modules by

npm install firebase --save
npm install firebase-admin --save

Then you have to add the script of firebase.auth after firebase-app script and make sure the version is same.

Before fix:

<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js"></script>

AFTER FIX YOU NEED TO ADD BOTH THE SCRIPT AND AFTER THIS ADD YOUR FIREBASE ACCOUNT SCRIPT AS FOLLOWS

<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-auth.js"></script>

THEN IT SHOULD WORK FINE

Answer 3

I kept getting an error that said

"TypeError: firebase.auth is not a function"

I got the auth object to appear and the thing I did differently was install the modules in a different order.

The first time I installed the modules (this is when the auth object wasn't appearing):

// this seems to confuse things with the auth object when installed in this order
$ npm install firebase-admin --save
$ npm install firebase --save

I deleted the npm folder and started from scratch although this time I reversed the installation order:

// for some reason this worked and now I can access the auth object
$ npm install firebase --save
$ npm install firebase-admin --save

I didn't do anything else. I simply reversed the installation order by installing firebase first and firebase-admin second.

I hope this works for other people.

You can read more about it here

Answer 4

Though there are many root causes behind this issue, a simple one like this also could be the case.

I forgot to include the js files for auth and db although I use them inside the JS code.

Before the fix;

<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-app.js"></script>

After the fix;

<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-app.js"></script>

<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-auth.js"></script>

<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-database.js"></script>

Answer 5

I had the same problem and solved it this way:

<script src = "https://www.gstatic.com/firebasejs/6.5.0/firebase-app.js"> </script>
<script src = "https://www.gstatic.com/firebasejs/6.5.0/firebase-auth.js"> </script>
<script>
// Firebase settings of your web application
var firebaseConfig = {
apiKey: "your apikey",
authDomain: "hackatonteleton.firebaseapp.com",
databaseURL: "https://name-database.firebaseio.com",
projectId: "name-projectid",
storageBucket: "name.appspot.com",
messagingSenderId: "730018138942",
Application ID: "1: 730018138942: web: eb12fac2f91fb17f"
};
// Initialize Firebase
firebase.initializeApp (firebaseConfig);
const auth = firebase.auth ();
</script>

The difference you notice is that they need:

<script src = "https://www.gstatic.com/firebasejs/6.5.0/firebase-auth.js"> </script>

and initialize the function

const auth = firebase.auth ();`enter code here`

Answer 6

Ok, fixed this by deleting my node_modules directory and reinstalling everything.

Also I'm importing firebase like so:

import firebase from 'firebase'
require('firebase/auth')

I don't know.

¯\_(ツ)_/¯