firebase.auth is not a function - with multiple firebase app initialization

Question

I am getting the error 'Uncaught TypeError: firebase.auth is not a function'.

My code was working perfectly, and then I implemented my clients api, and discovered that their api already uses and has initialized a different firebase app. So, as I couldn't initialise my firebase app in the usual way (ie. firebase.initializeApp(config) ), I followed the documentation on initializing multiple firebase apps as follows. (This results in the error)

var configOther = {
apiKey: "xxxx",
authDomain: "xxxx",
databaseURL: "xxxx",
projectId: "xxxx",
storageBucket: "xxxx",
messagingSenderId: "xxxx"
};

var firebaseOther = firebase.initializeApp(configOther, "firebaseOther");

console.log("auth: ", firebase.auth(firebaseOther)); //"Uncaught TypeError: firebase.auth is not a function"

Any ideas about what I'm doing wrong here? Many thanks.

Note - I have also tried the following shorthand notation:

firebaseOther.auth() 

instead of

firebase.auth(firebaseOther)

but this results in the same error.

Solution 1

The only explanation is that somewhere in the page, there is another <script> tag referencing the firebase-app.js file, eg

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

This tag will be appearing after your inclusion of firebase.js or firebase-app.js and firebase-auth.js.

What happens is the inclusion of firebase-app.js sets the value of the global firebase variable, overriding anything that was previously set.

The solution is to either remove the duplicate Firebase script inclusions or at the very least, make sure the ones you want active are included last.

Solution 2

You likely skipped the step for including the firebase-auth script in your page, as described by the documentation:

<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-app.js"></script>

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

Solution 3

I had a similar problem which was solved by removing defer in the HTML that was given by the documentation:

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

Comments

[Phil]

Have you included the appropriate Firebase script / module for auth?

[Phil]

See firebase.google.com/docs/web/setup#add_firebase_to_your_app

[Ric]

Currently I'm just including all of the firebase services using: <script src="gstatic.com/firebasejs/5.9.1/firebase.js"></script> so I think it should be there. Also, this was working before I implemented my clients API. I wonder if somewhere in their api, they are somehow overriding this - is that even possible?

[Phil]

I'd be checking for any other <script> tags using the cut-down firebase-app.js file as that will overwrite the firebase variable. Also check for any use of firebase = ...

[Ric]

Do you mean in my client's api? I'm not even sure how I would check that, their api is loaded via a script that appears to load another script with all sorts of encoding that I can't even fathom. I hope this isn't going to be a case of tracking down the author of their api and asking them to change it.

[Ric]

Ok I figured out how to check their api using the dev tools in the browser and yes, it looks like they are loading firebase-app.js after I am, but without the auth script.

[Phil]

Is there a callback from their API that you could use to load firebase-auth.js after their code does its thing?

[Ric]

Turns out there was, and that's what I've done. I've now managed to get both firebase apps initialized and behaving themselves - thanks for your help.

[Phil]

Looks like OP is including the full Firebase package

[Ric]

Yes, I was - although I've just changed it so that I'm just including the relevant ones, but I'm still getting the error. I'm wondering if it's possible that my client's api is subsequently re-loading the firebase package and then not including the auth script, but I'm not even sure how I could check that as I don't have access to their api.

[Doug Stevenson]

Use the browser's developer tools to see what's being loaded in what order.

[Ric]

That does make sense. Removing the duplicate script inclusions isn't an option - that's in my clients api. And I'm not sure how to ensure my inclusions come last, because it appears that my client's api is loaded asynchronously, so even if I do my includes after I load their script in the html, their initialization of firebase is still happening after mine.

[Ric]

Thanks - I've now done that and I can see that they are loading gstatic.com/firebasejs/5.5.7/firebase-app.js after I am, and they are not including the auth script. So I guess that's the source of the problem.