I have the following setup:
<button type="button" name="button" class="btn btn-danger" onclick="signIn()">
<i class="fa fa-google"></i> Login With Google
</button>
<script src="js/firebase.js" type="module"></script>
<script src="js/custom.js"></script>
firebase.js
// FIREBASE INITIALIZATION
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.3.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.3.0/firebase-analytics.js";
const firebaseConfig = {
apiKey: "XXXXXXXX",
authDomain: "fir-chat-application-3e442.firebaseapp.com",
projectId: "fir-chat-application-3e442",
storageBucket: "fir-chat-application-3e442.appspot.com",
messagingSenderId: "264006913204",
appId: "XXXXXXXX",
measurementId: "XXXXXXXX"
};
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
custom.js
function signIn(){
var provider = new firebase.auth.GoogleAuthProvider();
}
When I click on the Login With Google button I am getting the following error in the console:
Uncaught ReferenceError: firebase is not defined
I checked everything again and again but I don't seem to catch the error. What mistake am I making here?
You're mixing api v8 and v9.
import { GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/9.3.0/firebase-auth.js"
const provider = new GoogleAuthProvider();
Edit to demostrate that firebase scripts includes GoogleAuthProvider:
<script type="module">
import { GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/9.3.0/firebase-auth.js"
console.info(GoogleAuthProvider)
</script>