Uncaught Referenceerror: Firebase Is Not Defined

I am trying to create Google authentication but I copy var provider = new firebase.auth.GoogleAuthProvider(); to my JavaScript and it keeps telling me that Uncaught ReferenceError:

Solution 1:

One common gotcha with Firebase that would cause this error is if your script loads before Firebase. When using Firebase Hosting for example they create these tags:

<scriptdefersrc="/__/firebase/6.0.2/firebase-app.js"></script>
  ...
  <scriptdefersrc="/__/firebase/init.js"></script>

You need to then also load your script using defer

<scriptdefersrc="js/app.js"></script>

Solution 2:

You are getting this error because firebase variable has not been instantiated and initialized on the page on which you are running the code. To do so you need to -

1. Include the relevant scripts-

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

firebase.js contains the variable firebase representing your firebase app. firebase-auth.js contains the firebase.auth library which your code is using.

2. Initialize your app using -

   var config = {
       apiKey: "<API_KEY>",
       authDomain: "<PROJECT_ID>.firebaseapp.com",
       databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
       storageBucket: "<BUCKET>.appspot.com",
       messagingSenderId: "<SENDER_ID>",
   };
   
   firebase.initializeApp(config);
   

To learn more refer - https://firebase.google.com/docs/web/setup